HEX, RGB, HSL, CMYK ต่างกันอย่างไร
ทั้งสี่แบบอธิบายสีเดียวกันแต่คนละมุมมอง เลือกใช้ให้ตรงกับงานจะทำงานง่ายขึ้นมาก
| ระบบ | หน้าตา | เหมาะกับ |
|---|---|---|
| HEX | #38BDF8 |
งานเว็บทั่วไป สั้น ก๊อปง่าย เป็นรูปแบบที่ทุกโปรแกรมรับ |
| RGB | rgb(56, 189, 248) |
เมื่อต้องคำนวณสีในโค้ด หรือต้องใส่ความโปร่งใสด้วย rgba() |
| HSL | hsl(198, 93%, 60%) |
สร้างชุดสี — คงเนื้อสีไว้แล้วปรับแค่ความสว่างก็ได้เฉดอ่อน–เข้มทันที |
| CMYK | cmyk(77%, 24%, 0%, 3%) |
งานพิมพ์ นามบัตร โบรชัวร์ — เป็นสัดส่วนหมึกสี่สีที่เครื่องพิมพ์ใช้ |
ทำไม HSL ถึงสร้างชุดสีง่ายที่สุด: ถ้าอยากได้สีฟ้าอ่อนลง ใน HEX คุณต้องเดาว่าเลขไหนควรเพิ่ม แต่ใน HSL แค่เพิ่มค่า L (Lightness) ตัวเดียว โดยที่ H (เนื้อสี) กับ S (ความสด) คงเดิม — นี่คือหลักการที่สเกล 100–900 ในหน้านี้ใช้
ค่าความต่างสีสำคัญกว่าที่คิด
สีตัวอักษรที่ต่างจากพื้นหลังน้อยเกินไปทำให้อ่านยาก โดยเฉพาะกับคนสายตาเลือนราง คนสูงอายุ หรือคนที่กำลังใช้มือถือกลางแดด มาตรฐาน WCAG 2.1 กำหนดเกณฑ์ไว้ชัดเจน
| ประเภทข้อความ | AA (ขั้นต่ำ) | AAA (ดีเยี่ยม) |
|---|---|---|
| ตัวอักษรขนาดปกติ | 4.5 : 1 | 7 : 1 |
| ตัวอักษรขนาดใหญ่ (18pt+ หรือ 14pt ตัวหนา) | 3 : 1 | 4.5 : 1 |
| ขอบปุ่ม ไอคอน องค์ประกอบที่ต้องมองเห็น | 3 : 1 | — |
อัตราสูงสุดที่เป็นไปได้คือ 21:1 (ดำสนิทบนขาวสนิท) และต่ำสุดคือ 1:1 (สีเดียวกัน) การคำนวณใช้สูตรความสว่างสัมพัทธ์ตามมาตรฐาน ซึ่งถ่วงน้ำหนักสีเขียวมากที่สุดเพราะตามนุษย์ไวต่อสีเขียวกว่าสีอื่น
อย่าสื่อความหมายด้วยสีอย่างเดียว
ราว 8% ของผู้ชาย และ 0.5% ของผู้หญิงมีภาวะตาบอดสีบางระดับ ที่พบมากที่สุดคือแยกสีแดงกับสีเขียวไม่ออก ซึ่งเป็นคู่สีที่คนนิยมใช้สื่อว่า “ผ่าน/ไม่ผ่าน” มากที่สุดพอดี
- เพิ่มสัญลักษณ์: ใช้ ✓ กับ ✗ ควบคู่กับสีเขียวและสีแดง
- เพิ่มข้อความ: เขียนกำกับว่า “สำเร็จ” หรือ “ผิดพลาด” ไปเลย
- เพิ่มความต่างของความสว่าง: ถ้าสองสีมีความสว่างต่างกันชัด คนตาบอดสีก็ยังแยกออก แม้จะเห็นเนื้อสีไม่ตรง
แถบจำลองด้านบนใช้เมทริกซ์แปลงสีตามแบบจำลองที่ใช้กันทั่วไปในเครื่องมือตรวจการเข้าถึง เป็นการประมาณเพื่อให้เห็นภาพ ไม่ใช่การจำลองการมองเห็นของแต่ละบุคคลอย่างแม่นยำ
ทำไมสีบนจอกับสีที่พิมพ์ไม่เหมือนกัน
จอภาพใช้ RGB ซึ่งเกิดจากแสงบวกกัน (ยิ่งผสมยิ่งสว่าง) ส่วนงานพิมพ์ใช้ CMYK ซึ่งเกิดจากหมึกดูดกลืนแสง (ยิ่งผสมยิ่งมืด) สีสดจัดบางสีที่จอแสดงได้จึงไม่มีส่วนผสมหมึกใดให้ผลนั้นได้เลย
ค่า CMYK ที่หน้านี้แปลงให้เป็นการประมาณเชิงคณิตศาสตร์ ไม่ได้คิดโปรไฟล์สีของกระดาษและหมึกจริง สำหรับงานพิมพ์ที่ต้องการสีเป๊ะ ให้ยึดรหัสสีจากพัดสีของโรงพิมพ์เป็นหลัก
คำถามที่พบบ่อย (FAQ)
ค่าความต่างสีต้องได้เท่าไรถึงจะผ่าน
ตัวอักษรขนาดปกติต้องได้อย่างน้อย 4.5:1 (AA) หรือ 7:1 (AAA) ส่วนตัวใหญ่ใช้เกณฑ์ 3:1 และ 4.5:1 ตามลำดับ
HEX RGB HSL ควรใช้อันไหน
HEX สำหรับงานเว็บทั่วไป RGB เมื่อต้องคำนวณหรือใส่ความโปร่งใส และ HSL เมื่อต้องสร้างชุดสีที่ไล่เฉด
ทำไมสีบนจอกับสีที่พิมพ์ไม่เหมือนกัน
เพราะจอใช้ RGB (แสงบวกกัน) ส่วนงานพิมพ์ใช้ CMYK (หมึกดูดแสง) ค่าที่แปลงในหน้านี้เป็นการประมาณ งานพิมพ์จริงควรยึดพัดสีของโรงพิมพ์
ชื่อสีภาษาไทยที่แสดงมาจากไหน
เทียบจากรายการสีไทยที่ใช้กันทั่วไป โดยหาสีที่ใกล้ที่สุดด้วยวิธีวัดระยะห่างสีแบบถ่วงน้ำหนักตามการรับรู้ของตามนุษย์ เป็นชื่อโดยประมาณเพื่อสื่อสารให้เข้าใจตรงกัน ไม่ใช่มาตรฐานทางการ
เครื่องมืออื่นที่อาจได้ใช้
- ตารางสีเสื้อมงคลประจำวัน — เช็กสีมงคลวันนี้และสีกาลกิณีที่ควรเลี่ยง
- แปลงไฟล์รูปภาพ — แปลงและย่อรูปในเครื่อง ไม่ต้องอัปโหลด
- JSON Formatter — จัดรูปแบบและตรวจสอบ JSON
- ดูเครื่องมือทั้งหมดของ Thai Toolbox