โค้ด​สี​ไทย​สำหรับ​หน้า​เว็บ แปลง CMYK เป็น HEX แล้ว​ทดสอบ​ก่อน​ใช้

ปัญหา​ของ​แบรนด์​ที่​เลือก​สี​ไทย​มัก​เริ่ม​หลัง​งาน​พิมพ์​ผ่าน​ไป​แล้ว กล่อง​และ​นามบัตร​ออก​มา​ตรง​กับ​ค่า CMYK ใน​คู่มือ แต่​พอ​ทีม​เว็บ​นำ​ค่า​เดียวกัน​ไป​แปลง​เป็น​โค้ด​สี หน้า​เว็บ​กลับ​ได้​เขียว​ที่​สดก​ว่า​กล่อง​หรือ​ม่วง​ที่​ออก​น้ำเงิน ลูกค้า​ที่​เห็น​สินค้า​ผ่าน​จอ​ก่อน​เจอ​ของ​จริง​จึง​เห็น​แบรนด์​คนละ​เฉด​กับ​ที่​ได้​รับ

บท​นี้​ปิด​ซี​รีส์​สี​ไทย​ด้วย​การนำ​ค่า​สี​ทั้ง 168 สี​ไป​แปลง​เป็น​ค่า​สำหรับ​หน้า​จอ แล้ว​วัด​ว่า​วิธี​แปลง​แต่ละ​แบบ​ให้​ผล​ต่าง​กัน​แค่​ไหน ผู้​อ่าน​จะ​ได้​รู้​ว่า​ควร​แปลง​ด้วย​วิธี​ใด สี​ไทย​สี​ไหน​ใช้​เป็น​สี​ตัว​อักษร​ได้ และ​ต้อง​ทดสอบ​อะไร​ก่อน​บันทึก​โค้ด​สี​ลง​คู่มือ​แบรนด์

แหล่ง​ค่า​สี​ไทย​ที่​เปิด​อ่าน​ได้​ทั้ง​สอง​แหล่ง​ให้​ค่า​ไว้​สำหรับ​งาน​พิมพ์​เท่านั้น ดุษฎีนิพนธ์​เรื่อง "การ​สร้าง​ประสบการณ์​ทาง​สุนทรี​ยะ​จาก​สี​ไทย" ให้​ค่า CMYK กับ​รหัส T ครบ 168 สี ส่วนสี​ไทย​ใน​คู่มือ​อัต​ลักษณ์​ศิลปากร 15 สี​ประจำ​คณะ​และ​รหัส​สี​ทา​อาคาร ให้​ค่า​พิมพ์​คู่​กับ​รหัส​สี​ทา​อาคาร ทั้ง​สอง​แหล่ง​ไม่มี​ค่า RGB หรือ​รหัส HEX

หน้า​จอ​สร้าง​สี​ด้วย​แสง​สาม​สี ส่วน​งาน​พิมพ์​สร้าง​สี​ด้วย​หมึก​สี่​สี​บน​กระดาษ ค่า CMYK จึง​บอก​เพียง​ปริมาณ​หมึก และ​สี​ที่​ได้​ขึ้น​กับ​หมึก กระดาษ และ​เครื่องพิมพ์ ระบบ​สี​ไทย​โทน​ทั้ง 10 หมู่​อธิบาย​ไว้​ในสี​ไทย​โทน​คือ​อะไร 168 สี​ไทย​ใน 10 หมู่

แปลง​ค่า CMYK เป็น HEX ด้วย​สูตร​คำนวณ​เอง​ได้​ไหม

ได้ แต่​ผล​เป็น​ค่า​ประมาณ​ที่​อาจ​คลาด​เคลื่อน​มาก CSS Color Module Level 5 ของ W3C ฉบับ​ร่าง 13 กันยายน 2569 หัวข้อ 6.1 ให้​สูตร​ตรง คือ​ค่า​แดง​เท่ากับ 1 ลบ​ผล​รวม​ของ​หมึก​ฟ้า​กับ​หมึก​ดำ และ​ใช้​หลัก​เดียวกัน​กับ​เขียว​และ​น้ำเงิน สูตร​นี้​ใช้​เมื่อ​หน้า​เว็บ​ไม่​ได้​ระบุ​โปรไฟล์​สี และ​สเปก​เขียน​ไว้​เอง​ว่า​เป็น​ค่า​ประมาณ เพราะ​ไม่รู้​ค่า​สี​จริง​ของ​หมึก การ​กิน​หมึก​ของ​กระดาษ และ​ค่า​สี​ของ​จอ

ต่าง​กัน​มาก​พอ​จะ​เป็น​คนละ​สี​ใน​สี​ไทย​ส่วน​ใหญ่ ฟิจิ⁠ทัล​แปลง​ค่า CMYK ทั้ง 168 สี​เป็น​ค่า​บน​จอ​ด้วย​สอง​วิธี วิธี​แรก​คือ​สูตร​ตรง​ของ CSS Color 5 วิธี​ที่​สอง​คือ​โปรไฟล์ Coated FOGRA39 ซึ่ง​เป็น​ชุด​ข้อมูล​การ​พิมพ์​ออฟ​เซ็​ตบ​นก​ระ​ดาษ​เคลือบ แล้ว​วัด​ความ​ต่าง​ของ​สอง​ค่า​ด้วย ΔE2000

การ​คำนวณ​ใช้​ไลบรารี LittleCMS ผ่าน Pillow แปลง​แบบ Relative Colorimetric พร้อม​ชดเชย​จุด​ดำ ปลาย​ทาง​เป็น sRGB ตัวเลข​ทั้งหมด​เป็น​ค่าที่​คำนวณ ไม่​ได้​วัด​จาก​งาน​พิมพ์​จริง ผล​รวม​มี​ดังนี้

• ค่า​มัธยฐาน​ของ​ความ​ต่าง​อยู่​ที่ ΔE2000 8.6 และ​ค่า​สูงสุด​อยู่​ที่ 27.1
• 129 จาก 168 สี​ต่าง​กัน​ตั้งแต่ 5 ขึ้น​ไป CSS Color 5 ระบุ​ว่า ΔE2000 ตั้งแต่ 1 เริ่ม​มอง​เห็น​ความ​ต่าง และ​ตั้งแต่ 5 เป็น​คนละ​สี​ไป​แล้ว
• มี​เพียง​สี​ดำ​เขม่า (T9010) ที่​ได้​ค่า​เท่า​กัน​พอดี เพราะ​ทั้ง​สอง​วิธี​ให้ #000000

เขียว​ขี้​ทองใน​ตาราง​ใช้​ค่า​เดียว​กับ​เขียว​ตั้ง​แซ​ซึ่ง​เป็น​สี​ประจำ​มหาวิทยาลัย​ศิลปากร ถ้า​ทีม​เว็บ​แปลง​ด้วย​สูตร​ตรง หน้า​เว็บ​จะ​ได้​เขียว​ใบไม้​สด (#00A352) ขณะ​ที่​ป้าย​และ​เอกสาร​เป็น​เขียว​หัว​เป็ด​เข้ม (#007469)

ทำไม​สี​เขียว​ไทย​เพี้ยน​มาก​ที่สุด​เมื่อ​แปลง​ด้วย​สูตร​ตรง

สูตร​ตรง​ถือว่า​หมึก​ฟ้า 100% ตัด​แสง​แดง​ออก​ได้​หมด จึง​ให้​เขียว​และ​เขียว​อม​ฟ้า​ที่​สดก​ว่าที่​หมึก​จริง​พิมพ์​ได้ หมู่​สี​เขียว 28 สี​มี​ค่า​มัธยฐาน​ของ​ความ​ต่าง​สูง​ถึง 12.9 เป็น​อันดับ​สอง​รอง​จาก​หมู่​สี​ม่วง​ที่ 14.3 ขณะ​ที่​หมู่​สี​เหลือง​และ​ทอง​มี​ค่า​มัธยฐาน​เพียง 3.7 สี​ไทย​ที่​ใช้​หมึก​ฟ้า​มาก​จึง​ต้อง​แปลง​ด้วย​โปรไฟล์​เสมอ ราย​ชื่อ​สี​เขียว​ไทย​ทั้ง​หมู่​อยู่​ในสี​เขียว​ไทย 28 สี ตั้ง​แช ใบแค และ​ชื่อ​ที่​เป็น​สี​เดียวกัน

โปรไฟล์​ของ​กระดาษ​เคลือบ​สอง​ชุด​ให้​ผล​ใกล้​กัน แต่​กระดาษ​เคลือบ​กับ​กระดาษ​ไม่​เคลือบ​ให้​ผล​ต่าง​กัน​ชัดเจน ฟิจิ⁠ทัล​แปลง​สี​ไทย​ทั้ง 168 สี​ด้วย​โปรไฟล์​อีก​สอง​ชุด​แล้ว​เทียบ​กับ FOGRA39

สอง​สี​ที่​ต่าง​เกิน 5 ระหว่าง​โปรไฟล์​กระดาษ​เคลือบ​คือ​กลาโหม (T5120) กับ​เขียว​นิล (T9120) ซึ่ง​เป็น​สี​ที่​มี​ค่า CMYK ขัด​กับ​คำ​บรรยาย​อยู่​แล้ว ดู​ราย​ละเอียด​ของ​กลาโหม​ได้​ในสีน้ำเงิน​ไทย​และ​ม่วง​ไทย 29 สี คราม ขาบ กรมท่า ลูก​หว้า ส่วน​ความ​ต่าง​ระหว่าง​กระดาษ​เคลือบ​กับ​กระดาษ​ไม่​เคลือบ เช่น ม่วง​เม็ด​มะปราง​ต่าง​กัน 6.4 เพราะ​กระดาษ​ไม่​เคลือบ​ดูด​หมึก​จน​สีห​ม่น​ลง

ควร​แปลง​สี​ไทย​เป็น​โค้ด​สี​ด้วย​โปรไฟล์​ไหน

ควร​ใช้​โปรไฟล์​ที่​ตรง​กับ​กระดาษ​และ​ระบบ​พิมพ์​ของ​งาน​หลัก​ของ​แบรนด์ ถ้า​งาน​หลัก​เป็นก​ล่อง​พิมพ์​ออฟ​เซ็​ตบ​นก​ระ​ดาษ​เคลือบ ให้​ถาม​โรง​พิมพ์​ว่า​ตั้ง​เครื่อง​ตาม​มาตรฐาน​ชุด​ใด แล้ว​แปลง​ด้วย​โปรไฟล์​ชุด​นั้น ถ้า​งาน​หลัก​เป็นก​ระ​ดาษ​ไม่​เคลือบ เช่น ถุง​กระดาษ​หรือ​ฉลาก​ครา​ฟต์ ให้​แปลง​ด้วย​โปรไฟล์​ของ​กระดาษ​ไม่​เคลือบ​แทน ข้อมูล​การ​พิมพ์​ที่​ขึ้น​ทะเบียน​กับ ICC อธิบาย​ไว้​ในRGB vs CMYK และ DPI สี​จอ​กับ​สี​พิมพ์​ต่าง​กัน​ตาม​ค่า​วัด​ของ ICC

ใช้ได้ 72 จาก 168 สี เมื่อ​แปลง​ด้วย​โปรไฟล์ FOGRA39 แล้ว​วัด​ความ​ต่าง​ความ​สว่าง​กับ​พื้น​ขาว WCAG 2.2 เกณฑ์ 1.4.3 กำหนด​ให้​ข้อความ​ทั่วไป​มี​อัตราส่วน​ความ​ต่าง​อย่าง​น้อย 4.5:1 และ​ข้อความ​ขนาด​ใหญ่​อย่าง​น้อย 3:1 ส่วน​เกณฑ์ 1.4.11 กำหนด​ให้​ส่วน​ประกอบ​ของ​หน้า​จอ เช่น ขอบ​ปุ่ม​หรือ​ไอคอน​ที่​ต้อง​มอง​เห็น มี​อัตราส่วน​อย่าง​น้อย 3:1

• ผ่าน 4.5:1 สำหรับ​ข้อความ​ทั่วไป 72 สี
• ผ่าน 3:1 สำหรับ​ข้อความ​ขนาด​ใหญ่​และ​ส่วน​ประกอบ​หน้า​จอ 99 สี
• ไม่​ผ่าน​แม้แต่ 3:1 69 สี ใน​จำนวน​นี้ 40 สีมา​จาก​สาม​หมู่ คือ​หมู่​สี​เหลือง​และ​ทอง 15 สี หมู่​สี​ขาว 13 สี และ​หมู่​สี​โลหะ 12 สี

ผล​แยก​ตาม​หมู่​แสดง​ว่า​หมู่​สี​แดง​ผ่าน 14 จาก 26 สี หมู่​สี​เขียว​ผ่าน 12 จาก 28 สี หมู่​สีน้ำเงิน​ผ่าน 11 จาก 16 สี ส่วน​หมู่​สี​เหลือง​และ​ทอง 15 สี​กับ​หมู่​สี​ขาว 13 สี​ไม่​ผ่าน​เลย สี​ที่​เฉียด​เกณฑ์​ที่สุด​คือ​ขน​คอ​นาง​นก​ยูง (T5110) ได้ 4.48:1 ต่ำ​กว่า​เกณฑ์​เพียง​เล็ก​น้อย จึง​ใช้​กับ​ข้อความ​ทั่วไป​ไม่​ได้

สี​เหลือง​ไทย​ใช้​เป็น​สี​ตัว​อักษร​บน​เว็บ​ได้​ไหม

ใช้บน​พื้น​ขาว​ไม่​ได้ แต่​ใช้บน​พื้น​เข้ม​ได้ หรดาล (T3020) แปลง​ด้วย FOGRA39 ได้ #FFDE16 มี​อัตราส่วน​กับ​พื้น​ขาว​เพียง 1.34:1 จำปา (T3060) ได้ 2.11:1 สี​เหลือง​และ​ทอง​ไทย​ทั้ง​หมู่​จึง​เหมาะ​กับ​พื้น​หลัง แถบ​ตกแต่ง หรือ​ตัว​อักษร​บน​พื้น​สี​เข้ม​อย่าง​คราม​หรือ​ดำ แบรนด์​ที่​อยาก​ได้​ตัว​อักษร​โทน​ทองบน​พื้น​ขาว​ต้อง​เลือก​เฉด​เข้ม​จาก​หมู่​สี​น้ำตาล​หรือ​โลหะ​แล้ว​วัด​อัตราส่วน​ใหม่

ค่าที่​แปลง​ได้​ยัง​ต้อง​ทดสอบ​ก่อน​ใช้ เพราะ​ค่าที่​คำนวณ​บอก​ได้​เพียง​สี​บน​จอ​มาตรฐาน ไม่​ได้​บอก​ว่า​ลูกค้า​เห็น​สี​บน​กล่อง​กับ​บน​โทรศัพท์​ของ​ตัว​เอง​ตรง​กัน​หรือ​ไม่ การ​ทดสอบ​ที่​ทำได้​ใน​หนึ่ง​วัน​มี​สี่​ขั้น

1. เตรียม​ค่า​ผู้​สมัคร​สอง​ถึง​สาม​ค่า​ต่อ​สี เช่น ค่า​จาก​โปรไฟล์​กระดาษ​เคลือบ ค่า​จาก​โปรไฟล์​กระดาษ​ไม่​เคลือบ และ​ค่าที่​ปรับ​ด้วย​ตา​เทียบ​กับ​ชิ้น​งาน​จริง
2. เปิด​ทุก​ค่า​บน​อุปกรณ์​ที่​ลูกค้า​ใช้ ทั้ง​โทรศัพท์​หลาย​รุ่น แท็บเล็ต และ​จอ​คอมพิวเตอร์ โดย​วาง​ชิ้น​งาน​พิมพ์​จริง​ไว้​ข้าง​จอ​ภาย​ใต้​แสง​ห้อง​ปกติ
3. ให้​ผู้​ใช้​จริง​เลือก​ค่าที่​ใกล้​ชิ้น​งาน​ที่สุด ถาม​ลูกค้า​หรือ​พนักงาน​หน้า​ร้าน​ที่​ไม่​ได้​อยู่​ใน​ทีม​ออกแบบ แล้ว​จด​ว่า​ค่า​ไหน​ถูก​เลือก​บน​อุปกรณ์​ไหน
4. วัด​อัตราส่วน​ความ​ต่าง​ของ​ค่าที่​ถูก​เลือก ถ้า​ใช้​เป็น​สี​ตัว​อักษร​หรือ​ปุ่ม ให้​ตรวจ​กับ​เกณฑ์ WCAG ทุก​คู่​สี ถ้า​ไม่​ผ่าน ให้​กำหนด​เฉด​เข้ม​แยก​ไว้​ใช้​กับ​ข้อความ

ต้อง​ทดสอบ​โค้ด​สี​บน​จอ​กี่​เครื่อง

ควร​ทดสอบ​อย่าง​น้อย​บน​อุปกรณ์​แต่ละ​ประเภท​ที่​ลูกค้า​ใช้​เข้า​เว็บ​จริง รายงาน​ประเภท​อุปกรณ์​ใน​ระบบ​วิเคราะห์​ผู้​เข้า​ชม​บอก​ได้​ว่า​ลูกค้า​ใช้​โทรศัพท์ แท็บเล็ต หรือ​คอมพิวเตอร์​ใน​สัดส่วน​เท่าไร ให้​เลือก​เครื่อง​ตาม​สัดส่วน​นั้น และ​มี​โทรศัพท์​ทั้ง​รุ่น​เก่า​กับ​รุ่น​ใหม่ เพราะ​จอ​แต่ละ​รุ่น​แสดง​สี​ต่าง​กัน ถ้า​ค่า​เดียวกัน​ดู​เพี้ยน​บน​เครื่อง​ใด​เครื่อง​หนึ่ง ให้​จด​ไว้​เป็น​ข้อ​จำกัด แต่​ไม่​ต้อง​ปรับ​ค่า​ตาม​จอ​ที่​เพี้ยน​เพียง​เครื่อง​เดียว

ทีม​เว็บ​ควร​ได้​ตาราง​สี​ที่​ตอบ​คำถาม​ทุก​ข้อ​โดย​ไม่​ต้อง​แปลง​เอง คู่มือ​แบรนด์​ที่​ใช้​สี​ไทย​ควร​มี​คอลัมน์​ต่อ​ไป​นี้​ใน​แถว​เดียวกัน​ทุก​สี

• ชื่อ​สี​ไทย​และ​รหัส T เช่น เขียว​ขี้​ทอง T4030 พร้อม​หมายเหตุ​ถ้า​แบรนด์​ใช้​ชื่อ​สะกด​ต่าง​จาก​แหล่ง
• ค่า CMYK และ​แหล่ง​อ้างอิง ระบุ​ว่า​มา​จาก​วิทยานิพนธ์ คู่มือ​ของ​องค์กร​อื่น หรือ​กำหนด​เอง
• ค่า HEX และ​ชื่อ​โปรไฟล์​ที่​ใช้​แปลง เช่น #007469 จาก Coated FOGRA39
• บทบาท​ของ​สี ใช้​เป็น​พื้น​หลัง ตัว​อักษร หรือ​ปุ่ม พร้อม​อัตราส่วน​ความ​ต่าง​กับ​พื้นที่​ใช้​คู่
• ผล​ทดสอบ​กับ​อุปกรณ์​และ​ผู้​ใช้ อุปกรณ์​ที่​ทดสอบ วัน​ที่ และ​ค่าที่​ผู้​ใช้​เลือก

ตาราง​แบบ​นี้​ทำให้​ทีม​ที่มา​ทีหลัง​รู้​ว่า​ค่า​บน​หน้า​เว็บ​มา​จาก​ไหน และ​ตรวจ​ย้อน​ได้​ทุก​ครั้ง​ที่​โรง​พิมพ์​หรือ​กระดาษ​เปลี่ยน

สี​ไทย​ทั้ง 168 สี​ใน​วิทยานิพนธ์​และ 15 สี​ใน​คู่มือ​ของ​มหาวิทยาลัย​ศิลปากร​มี​ค่า​ไว้​สำหรับ​งาน​พิมพ์​เท่านั้น ทีม​เว็บ​ต้อง​แปลง​เป็น​โค้ด​สี​เอง การ​แปลง​ด้วย​สูตร​ตรง​ของ CSS Color 5 ให้​ค่า​ต่าง​จาก​โปรไฟล์ Coated FOGRA39 จน​เป็น​คนละ​สี​ใน 129 สี โดย​หมู่​สี​เขียว​และ​ม่วง​เพี้ยน​มาก​ที่สุด โปรไฟล์​ต้อง​เลือก​ตาม​กระดาษ​ที่​พิมพ์​จริง และ​มี​เพียง 72 สี​ที่​ใช้​เป็น​สี​ตัว​อักษร​บน​พื้น​ขาว​ได้​ตาม​เกณฑ์ WCAG 2.2 ค่าที่​แปลง​ได้​จึง​ต้อง​ทดสอบ​บน​อุปกรณ์​และ​กับ​ผู้​ใช้​จริง​ก่อน​บันทึก​ลง​คู่มือ​พร้อม​ชื่อ​โปรไฟล์