แปลงรหัสสี

พิมพ์สีลงในช่องใดช่องหนึ่งของ HEX, RGB, HSL, HSV, CMYK, OKLCH หรือชื่อสี CSS แล้วรูปแบบอื่น ๆ จะอัปเดตทันที ใช้ย้ายสีจากงานออกแบบไปใช้ใน CSS หรือตรวจว่าข้อความมีคอนทราสต์กับพื้นหลังเพียงพอ

วิธีใช้

1. เลือกสีด้วย "เลือกสี" หรือพิมพ์ค่าลงในช่องใดช่องหนึ่ง เช่น HEX หรือ RGB ช่องอื่นจะเปลี่ยนตาม คัดลอกค่าใดก็ได้ด้วยปุ่มข้าง ๆ
2. ตั้ง "ความทึบ" เพื่อเพิ่มความโปร่งใส HEX จะกลายเป็น 8 หลัก และ RGB จะเป็น rgba
3. เลือกตัวอย่างสีใน "อ่อนลงและเข้มขึ้น" หรือ "ชุดสีที่เข้ากัน" เพื่อเปลี่ยนไปใช้สีนั้น
4. ใน "ตรวจคอนทราสต์" ตั้ง "สีข้อความ" และ "สีพื้นหลัง" แล้วดู "อัตราส่วนคอนทราสต์" และผลการประเมิน AA และ AAA

หลักการทำงาน

• HEX เขียนค่าสีแดง เขียว และน้ำเงิน (0 ถึง 255) เป็นเลขฐานสิบหกค่าละ 2 หลัก เช่น rgb(255, 99, 71) คือ #FF6347
• อัตราส่วนคอนทราสต์ = (ความสว่างสัมพัทธ์ของสีที่สว่างกว่า + 0.05) ÷ (ความสว่างสัมพัทธ์ของสีที่เข้มกว่า + 0.05) ประเมินตามเกณฑ์ WCAG 2.2 ข้อ 1.4.3 และ 1.4.6 อัตราส่วนจะปัดลง
• CMYK ใช้สูตรอย่างง่ายโดยไม่มีโปรไฟล์การพิมพ์ สีที่พิมพ์จริงจึงจะต่างไป สีที่ใช้ล่าสุดและสีสุดท้ายจะบันทึกไว้ในอุปกรณ์นี้

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

จะแปลง HEX เป็น RGB ได้อย่างไร

แบ่งโค้ดเป็นคู่ แล้วแปลงแต่ละคู่จากเลขฐานสิบหกเป็นฐานสิบ #3B82F6 ได้ 3B = 59, 82 = 130 และ F6 = 246 จึงเป็น rgb(59, 130, 246) พิมพ์ลงในช่อง HEX เพื่อดูผลทันที

ข้อความต้องมีอัตราส่วนคอนทราสต์เท่าไร

WCAG AA กำหนด 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ ส่วน AAA กำหนด 7:1 และ 4.5:1 ข้อความขนาดใหญ่คือขนาดอย่างน้อย 24px หรือ 18.66px แบบตัวหนา

โค้ด HEX 3 หลักคืออะไร

คือรูปแบบย่อของโค้ด 6 หลัก โดยแต่ละหลักจะถูกเขียนซ้ำสองครั้ง #F80 คือสีเดียวกับ #FF8800

บอกชื่อสีได้ไหม

หากสีตรงกับชื่อสี CSS ใดใน 148 ชื่อ จะแสดงชื่อนั้น หากไม่ตรง จะแสดงชื่อ CSS ที่ใกล้ที่สุดพร้อมค่า HEX