แปลงหน่วยและตัวเลข

แปลงโค้ดสี HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK

โค้ดสี HEX คือค่า R, G, B (0–255) เขียนเป็นเลขฐานสิบหกคู่ละ 2 หลัก เช่น #2A9D8F = rgb(42, 157, 143) = hsl(173, 58%, 39%) ส่วนคอนทราสต์ตามเกณฑ์ WCAG คิดจาก (L₁ + 0.05) ÷ (L₂ + 0.05) ข้อความปกติต้องได้อย่างน้อย 4.5:1 จึงผ่านระดับ AA

อัปเดต ใช้ฟรี ไม่ต้องสมัครคำนวณในเครื่องของคุณ

รองรับ #rgb, #rrggbb, #rrggbbaa, rgb()/rgba(), hsl()/hsla(), hsv()/hsb(), cmyk() และชื่อสี CSS
ลองค่าตัวอย่าง:

ช่องตัวเลขพิมพ์สูตรได้ เช่น 25000*12 · ผลลัพธ์อัปเดตทันทีเมื่อแก้ตัวเลข

ผลลัพธ์

วิธีใช้แปลงโค้ดสี

  1. พิมพ์โค้ดสีในรูปแบบใดก็ได้ เช่น #2A9D8F, rgb(42, 157, 143), hsl(173, 58%, 39%) หรือชื่อสีภาษาอังกฤษ เช่น tomato
  2. หรือคลิกช่อง “เลือกจากจานสี” เพื่อเลือกสีด้วยเมาส์ ค่าจะแปลงให้ทันที
  3. กดปุ่ม “คัดลอก” ข้างรูปแบบที่ต้องการ ตรวจคอนทราสต์กับพื้นขาว/ดำ และคลิกชุดสีเพื่อดูโค้ดของสีนั้น

สูตรแปลงโค้ดสี

#RRGGBB → R = 0xRR, G = 0xGG, B = 0xBB (0–255)

รูปแบบความหมายใช้กับ
HEXค่าแดง เขียว น้ำเงิน เป็นเลขฐานสิบหก 00–FF อย่างละ 2 หลัก (8 หลักถ้ามีค่าความโปร่งใส)เว็บ CSS, Figma
RGBแสงสามสีบวกกัน แต่ละช่อง 0–255หน้าจอ ภาพดิจิทัล
HSLเฉดสี (Hue 0–360°) ความอิ่มตัว (Saturation) ความสว่าง (Lightness)ปรับโทนสีใน CSS
HSV / HSBเฉดสี ความอิ่มตัว และค่าความสว่างสูงสุด (Value/Brightness)Photoshop, ตัวเลือกสี
CMYKหมึกฟ้า ม่วงแดง เหลือง ดำ (% หมึก)งานพิมพ์
  • RGB → HSL: ให้ M = max(r,g,b), m = min(r,g,b) (สเกล 0–1) แล้ว L = (M + m) ÷ 2, S = (M − m) ÷ (1 − |2L − 1|) และ H ขึ้นกับว่าช่องใดมีค่ามากที่สุด
  • RGB → CMYK: K = 1 − max(r,g,b), C = (1 − r − K) ÷ (1 − K) และคิด M, Y แบบเดียวกัน
  • ความสว่างสัมพัทธ์ (WCAG): L = 0.2126R + 0.7152G + 0.0722B โดย R, G, B ต้องแปลงเป็นค่าเชิงเส้นก่อน แล้วคอนทราสต์ = (L₁ + 0.05) ÷ (L₂ + 0.05)

ตัวอย่างการคำนวณ

โจทย์: แปลง #2A9D8F เป็น RGB และ HSL

  1. แยกเป็นคู่: 2A, 9D, 8F → 2×16 + 10 = 42, 9×16 + 13 = 157, 8×16 + 15 = 143 ได้ rgb(42, 157, 143)
  2. สเกลเป็น 0–1: r = 0.165, g = 0.616, b = 0.561 → M = 0.616 (เขียว), m = 0.165
  3. L = (0.616 + 0.165) ÷ 2 = 0.390 → 39%; S = 0.451 ÷ (1 − |0.780 − 1|) = 0.578 → 58%
  4. H = 60 × ((b − r) ÷ (M − m) + 2) = 60 × (0.878 + 2) ≈ 173° จึงได้ hsl(173, 58%, 39%)

คอนทราสต์กับพื้นขาวได้ 3.32:1 (ผ่าน AA เฉพาะข้อความตัวใหญ่) และกับพื้นดำได้ 6.31:1 (ผ่าน AA) จึงควรใช้ตัวอักษรสีดำบนสีนี้

เกณฑ์คอนทราสต์ WCAG 2 ที่ควรรู้

ระดับข้อความปกติข้อความตัวใหญ่
AA (มาตรฐานขั้นต่ำที่แนะนำ)≥ 4.5 : 1≥ 3 : 1
AAA (เข้มงวด)≥ 7 : 1≥ 4.5 : 1

“ตัวใหญ่” หมายถึงขนาดอย่างน้อย 18pt (ประมาณ 24px) หรือ 14pt ตัวหนา (ประมาณ 18.7px) ส่วนไอคอนและขอบของปุ่มใช้เกณฑ์ 3 : 1 ค่าคอนทราสต์อยู่ระหว่าง 1 : 1 (สีเดียวกัน) ถึง 21 : 1 (ดำบนขาว)

ชุดสีแบบต่าง ๆ ใช้ทำอะไร

  • คู่ตรงข้าม (Complementary) หมุนเฉดสี 180° ตัดกันชัด เหมาะกับปุ่มหรือจุดที่ต้องการให้เด่น
  • ข้างเคียง (Analogous) เฉดสี ±30° กลมกลืน ดูสบายตา เหมาะกับพื้นหลังและภาพประกอบ
  • สามเหลี่ยม (Triadic) เฉดสีห่างกัน 120° สดใสแต่ยังสมดุล ควรใช้สีหนึ่งเป็นหลักและอีกสองสีเป็นสีเสริม
  • คู่ตรงข้ามแบบแยก (Split-complementary) ใช้สองสีข้างคู่ตรงข้าม (150° และ 210°) ตัดกันน้อยกว่าคู่ตรงข้ามตรง ๆ

สีบนจอ (RGB) กับสีพิมพ์ (CMYK) ไม่ตรงกันเสมอไป ค่า CMYK ที่ได้เป็นการแปลงอย่างง่ายแบบไม่มีโปรไฟล์สี งานพิมพ์จริงควรตรวจกับโรงพิมพ์หรือใช้โปรไฟล์ ICC

คำถามที่พบบ่อย

แปลง HEX เป็น RGB ด้วยมือทำอย่างไร

แบ่งโค้ด 6 หลักเป็น 3 คู่ แต่ละคู่แปลงจากฐานสิบหกเป็นฐานสิบโดยนำหลักแรกคูณ 16 แล้วบวกหลักที่สอง (A=10 … F=15) เช่น #FF8000 → 255, 128, 0

โค้ดสี 3 หลักอย่าง #F80 คือสีอะไร

เป็นรูปย่อที่ซ้ำแต่ละหลักสองครั้ง #F80 จึงเท่ากับ #FF8800 หรือ rgb(255, 136, 0)

HEX 8 หลักคืออะไร

สองหลักสุดท้ายคือค่าความทึบ (alpha) จาก 00 (โปร่งใสทั้งหมด) ถึง FF (ทึบ) เช่น #2A9D8F80 คือสีเดิมที่ทึบประมาณ 50%

ตัวหนังสือสีขาวหรือสีดำ อ่านง่ายกว่าบนสีนี้

ดูค่าคอนทราสต์ที่โปรแกรมคำนวณ เลือกสีที่ได้อัตราส่วนสูงกว่า และควรได้อย่างน้อย 4.5:1 สำหรับข้อความปกติ

HSV กับ HSL ต่างกันอย่างไร

ทั้งสองใช้เฉดสี (H) เหมือนกัน แต่ HSL ให้สีบริสุทธิ์อยู่ที่ความสว่าง 50% ส่วน HSV/HSB ให้สีบริสุทธิ์อยู่ที่ V = 100% โปรแกรมกราฟิกอย่าง Photoshop มักใช้ HSB ส่วน CSS ใช้ HSL

แหล่งอ้างอิง

เครื่องมือที่เกี่ยวข้อง