เครื่องแปลงสี (HEX, RGB, HSL — ทันที)
พิมพ์รหัส hex, RGB triplet หรือค่า HSL รูปแบบอื่นจะอัปเดตทันทีพร้อมตัวอย่างสีที่มองเห็นได้ เหมาะสำหรับนักออกแบบ นักพัฒนาเว็บ และทุกคนที่จับคู่สีในเครื่องมือต่างๆ
hex: #0ea5e9
rgb(14, 165, 233)
hsl(199, 89%, 48%)วิธีการทำงาน
สามวิธีในการอธิบายสีเดียวกัน
HEX, RGB และ HSL คือสามสัญลักษณ์สำหรับสี sRGB HEX คือตัวย่อของ RGB: #FF6B35 หมายถึง red=255, green=107, blue=53 RGB อธิบายสีโดยการผสมแสงสีแดง เขียว และน้ำเงินมากแค่ไหน (0-255 แต่ละสี) HSL เข้ารหัสสี RGB เดียวกันใหม่ในแง่ของ hue (สีอะไร) saturation (ความสดใส) และ lightness (ความสว่าง)
ทั้งสามเทียบเท่ากัน คุณสามารถแปลงไปกลับได้โดยไม่สูญเสียข้อมูล นักออกแบบชอบ HSL สำหรับการปรับโทนสี (การเพิ่ม lightness รักษา hue ให้คงที่) ในขณะที่นักพัฒนามักวาง HEX จากเครื่องมือออกแบบตรงลงใน CSS RGB พบบ่อยที่สุดเมื่อทำงานกับ image-processing หรือ canvas API
เมื่อไหร่จะใช้แบบไหน
HEX: คัดลอกวางจาก design, Figma export, brand guideline, CSS color literal กระชับแต่อ่านยาก
RGB: งาน color แบบโปรแกรม (canvas, image manipulation), การตรวจสอบ accessibility (การคำนวณ contrast ทำงานใน linear RGB) และเมื่อต้องการค่า integer ที่แน่นอน
HSL: การปรับสีตามความรู้สึก เช่น 'เวอร์ชันที่ saturated กว่าเล็กน้อย', 'variant ที่มืดกว่าสำหรับ hover states', หรือการสร้าง palette โดย stepping hue ง่ายกว่า HEX มากสำหรับงานเหล่านั้น
สิ่งที่คุณจะไม่เห็นในเครื่องมือนี้
เราละเว้น alpha channel (ความโปร่งใส) ไปก่อน แต่ #RRGGBBAA ใช้งานได้ในเบราว์เซอร์สมัยใหม่ทั้งหมด ถ้าคุณต่อท้ายสองหลัก hex สำหรับ opacity (00 = ใส, FF = ทึบ)
เราไม่ครอบคลุม wide-gamut (P3, Rec.2020, OKLCH) สำหรับงานเว็บส่วนใหญ่ HEX/RGB/HSL แบบ sRGB คือตัวเลือกที่ถูกต้อง ถ้ากำหนดเป้าหมายจอ HDR หรือ wide-gamut ให้ดู CSS Color Module Level 4 syntax
คำถามที่พบบ่อย
›สามารถแปลงไปกลับจาก HSL เป็น HEX โดยไม่สูญเสียความแม่นยำได้หรือไม่?
ส่วนใหญ่ได้ HSL เก็บเป็นองศาจำนวนเต็มและเปอร์เซ็นต์ ดังนั้น 360 × 101 × 101 = 3.7 ล้านค่า HSL จับคู่กับ 16.7 ล้านการรวม RGB มีการปัดเศษเล็กน้อยที่มุม ใช้ HEX เป็น canonical สำหรับการเก็บที่แน่นอน
›รองรับรหัส HEX 3 หลักหรือไม่?
ใช่ #f60 ถือเป็น #ff6600 ทั้งสองขยายเป็น RGB triplet เดียวกัน
›ทำไม HSL จึงไม่ไปถึง 360 ใน saturation/lightness?
Hue เป็นองศา (0-360 รอบ color wheel) Saturation และ Lightness เป็นเปอร์เซ็นต์ (0-100)
›HSL เหมือนกับ HSB หรือ HSV หรือไม่?
ไม่ HSV (และ HSB) แทนที่ 'lightness' ด้วย 'value' ซึ่งเป็นโมเดลความสว่างที่แตกต่าง HSL L=50% คือสีเต็ม HSV V=100% คือสีเต็ม เราใช้ HSL เพราะตรงกับ CSS
›รองรับความโปร่งใสหรือไม่?
ยังไม่ได้ สำหรับตอนนี้ให้ต่อท้าย alpha สองหลักไปที่ HEX (เช่น #00000080 สำหรับสีดำ 50%)
›ทำไม RGB จึงไม่แสดง float 0-1?
เพราะบริบทส่วนใหญ่ (CSS, เครื่องมือออกแบบ) ใช้จำนวนเต็ม 0-255 สำหรับงาน shader ให้หารด้วย 255 เพื่อให้ได้ float 0-1
›นักออกแบบได้สีที่ถูกต้องมาจากไหน?
Brand guideline, design token หรือ palette generator เครื่องมือ contrast checker สามารถตรวจสอบคู่ foreground/background ว่าตรงตาม WCAG AA/AAA
›เครื่องคำนวณแม่นยำหรือไม่?
ใช่ ใช้คณิตศาสตร์การแปลง sRGB มาตรฐาน ความแตกต่างในการแปลงไปกลับมาจาก HSL ที่เป็น integer-quantized เท่านั้น
เครื่องมือที่เกี่ยวข้อง
อัปเดตล่าสุด: