RGB ยังไม่พอ: สัญกรณ์สี HSL, CMYK และ OKLCH

ในบทความที่แล้ว คอมพิวเตอร์สร้างสีได้อย่างไร: เรื่องของ RGB, HEX และเลขฐานสอง เราเห็นแล้วว่าสีหนึ่งสีคือตัวเลขสามตัว — แดง เขียว น้ำเงิน ค่า 0–255 หน้าจอทำงานกับตัวเลขเหล่านั้นได้ดี แต่ทันทีที่มนุษย์เริ่มทำงานกับสี RGB ก็กลายเป็นสิ่งที่ใช้งานยากในทันที

RGB สะดวก แต่ไม่ตรงกับสัญชาตญาณ

“แดงสว่างขึ้นนิดหน่อย” จะทำแบบ RGB ได้อย่างไร? ต้องปรับทั้งสามช่องพร้อมกัน “ลด saturation แค่นิดเดียว” ดู RGB อย่างเดียวก็ไม่รู้ต้องลดช่องไหน “พิมพ์สีนี้ลงกระดาษให้เหมือนหน้าจอ” — RGB ทำไม่ได้เลย

ระบบสีอื่นๆ ถูกสร้างขึ้นเพื่อแก้ปัญหาเหล่านี้

HSL — วิธีคิดแบบมนุษย์

HSL แบ่งสีออกเป็น เฉดสี · ความอิ่มตัว · ความสว่าง สามแกน hsl(14, 100%, 60%) คือสีเดียวกับ #FF5733 แต่ชัดเจนกว่าว่าแต่ละค่ามาจากไหน

ถ้า RGB คือภาษาของคอมพิวเตอร์ — HSL คือภาษาของนักออกแบบ สามารถจัดการสีเดียวกันได้จากมุมมอง อยากเปลี่ยนอะไร

Hue — เฉดสีเป็นวงกลม 360°

เฉดสีวนครบรอบเหมือนเข็มนาฬิกา จาก 0° ถึง 360° โดย 0° และ 360° คือสีแดงเดียวกัน

Saturation — ความอิ่มตัวคือความเข้มของสี

เฉดสีเดิม แต่ลด saturation ลง สีจะค่อยๆ กลายเป็นเทา

Lightness — ความสว่างจากดำถึงขาว

L 0% คือดำเสมอ, 100% คือขาวเสมอ และ 50% คือความสว่าง “ธรรมชาติ” ของสีนั้น

ประโยชน์จริงของ HSL — สร้าง palette

คงเฉดสี (Hue) ไว้แล้วเปลี่ยนแค่ L ก็ได้ชุดสีที่กลมกลืนกันทันที ทำแบบเดียวกันด้วย RGB ต้องคำนวณทีละช่องทั้ง 9 ช่อง แต่ HSL แค่เปลี่ยน L จาก 12% → 92% เป็นขั้นๆ ก็พอ

ทั้งสอง palette สร้างได้ด้วยโค้ดแค่ไม่กี่บรรทัด

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... เปลี่ยน L ทีละ 10 ก็จบ */
}

นี่คือจุดที่ HSL โดดเด่นที่สุดในการสร้าง design system

CMYK — ภาษาของหมึก

สีบนกระดาษต้องใช้ระบบต่างออกไปโดยสิ้นเชิง CMYK คือสัดส่วนหมึกสี่สีที่โรงพิมพ์ใช้

ทำไมดำถึงใช้ “K” ไม่ใช่ “B”? เพราะ B ซ้ำกับ Blue นั่นเอง และมาจากคำว่า “Key plate” ในศัพท์การพิมพ์ หมายถึงแม่พิมพ์อ้างอิงสำหรับจัดวางหมึกอื่น

แสงยิ่งรวมกันยิ่งสว่าง หมึกยิ่งผสมกันยิ่งเข้ม

ความต่างใหญ่ที่สุดระหว่าง RGB กับ CMYK คือ วิธีการผสม

หมึกแดงดูแดงเพราะมัน ดูดซับ แสงสีอื่นแล้วสะท้อนแค่แดงกลับมา หมึกทำงานโดยดูดซับแสง จึงยิ่งผสมมากยิ่งเข้มขึ้น ในทางทฤษฎีผสม CMY ครบสามสีควรได้ดำ แต่จริงๆ แล้วได้สีน้ำตาลขุ่น จึงต้องมีหมึกดำ (K) แยกต่างหาก

CMYK ใช้ที่ไหน?

ถ้าทำงานออกแบบหน้าจอแทบไม่ต้องสัมผัส CMYK เลย — ใช้เฉพาะงานพิมพ์กระดาษ

• ส่งไฟล์ให้โรงพิมพ์ — นามบัตร โปสเตอร์ หนังสือ แพ็กเกจ โรงพิมพ์รับ RGB แล้วแปลงเป็น CMYK เอง
• งานพิมพ์ใน Photoshop / Illustrator — ตั้งโหมดสีเป็น CMYK ตั้งแต่ต้น
• Brand guide — ระบุทั้ง HEX สำหรับหน้าจอและ CMYK สำหรับพิมพ์ เพื่อให้สีแบรนด์ดูใกล้เคียงกันในทั้งสองสื่อ

ทำไมสีหน้าจอกับสีพิมพ์ถึงต่างกัน — Gamut

ช่วงสีที่หน้าจอแสดงได้ (RGB gamut) กับช่วงสีที่หมึกแสดงได้ (CMYK gamut) ไม่เท่ากัน สีชมพูเรืองแสงบนหน้าจอพิมพ์ออกมาไม่ได้สีนั้น — เพราะหมึกทำสีนั้นไม่ได้

นักออกแบบงานพิมพ์จึงเลือกสีจาก ช่วงที่ CMYK รองรับ ตั้งแต่แรก ออกแบบใน RGB แล้วนำไปพิมพ์ตรงๆ มักทำให้สีดูจืดลง

การเขียนค่า CMYK

ระบุว่าจะใช้หมึกแต่ละสีกี่เปอร์เซ็นต์ 0% = ไม่ใช้เลย, 100% = เต็มที่

ดำด้วย K 100% เพียงอย่างเดียวจะได้ดำขุ่นใกล้เคียงเทา โรงพิมพ์จึงปูหมึก CMY ร่วมด้วยเพื่อให้ได้ดำที่ลึกขึ้น

OKLCH — พิกัดของมนุษย์

โมเดลสีที่เพิ่งเข้ามาจริงจังในยุค 2020s คำสำคัญมีคำเดียว — “ธรรมชาติต่อสายตามนุษย์”

สามพิกัดดูชื่อคล้าย HSL

• L — Lightness (ความสว่าง, 0–1)
• C — Chroma (ความอิ่มตัว, 0–ประมาณ 0.4)
• H — Hue (เฉดสี, 0–360°)

แต่ HSL มีปัญหาซ่อนอยู่ L = 50% เท่ากัน แต่แต่ละสีให้ความรู้สึกสว่างต่างกันโดยสิ้นเชิง ลองเปรียบเทียบดู

สรุปในหนึ่งบรรทัด — RGB และ HSL คือพิกัดของเครื่องจักร OKLCH คือพิกัดของมนุษย์

บทบาทของ L · C · H แต่ละตัว

ลองเปลี่ยนพิกัดเดียวโดยคงสีเดิมไว้ แล้วดูว่าเกิดอะไรขึ้น

ใช้ที่ไหนได้บ้าง

• palette ที่สว่างสม่ำเสมอ — เมื่ออยากให้สีหมวดหมู่ 8 สีมีความสว่างเท่ากันทุกสี
• สลับ dark/light mode อัตโนมัติ — invert ค่า L ก็ได้ dark theme ที่เป็นธรรมชาติ
• accessibility — คาดเดาความต่างความสว่างระหว่างข้อความกับพื้นหลังได้แม่นยำ
• gradient — ไหลลื่นโดยไม่มีแถบเทาขัดกลาง

นำเข้ามาใน CSS Color Level 4 อย่างเป็นทางการแล้ว และใช้ได้ในบราวเซอร์รุ่นใหม่ทันที

.btn { background: oklch(67% 0.18 30); }       /* ส้ม */
.btn:hover { background: oklch(60% 0.18 30); } /* ลด L แค่ 7 → เข้มขึ้นพอดีเท่านั้น */

จะใช้อะไรเมื่อไหร่?

สำหรับงานดิจิทัลส่วนใหญ่ RGB/HEX เพียงพอแล้ว นึกถึง HSL เมื่อต้องสร้าง palette และ OKLCH มีประโยชน์มากเมื่อออกแบบ dark/light mode

จัดการสีด้วย fns

เมื่อรู้แล้วว่าสีคือตัวเลข ขั้นต่อไปคือเก็บสีที่ใช้บ่อยไว้แค่ปลายนิ้ว fns รวมการดึง บันทึก และเรียกใช้สีไว้ที่คีย์เดียว

Eyedropper หยิบสีจากที่ไหนก็ได้ — ⌘+Shift+K

Eyedropper คือเครื่องมือดึงสีจากพิกเซลใดก็ได้บนหน้าจอ เหมือนเอา color picker ที่ใช้ได้แค่ใน Figma/Photoshop ออกมาใช้ได้ทั่วทั้งระบบ

กด ⌘+Shift+K แล้ว Eyedropper ของ fns จะปรากฏทุกที่บนหน้าจอ ไม่ว่าจะเป็นพิกเซลในไฟล์ดีไซน์ พื้นที่ในภาพถ่าย หรือสีพื้นหลังของแอปอื่น — เลื่อนเมาส์ไปคลิก ก็จับสีนั้นได้ทันที

• คลิกแต่ละครั้งบันทึกลง clipboard อัตโนมัติ ไม่ต้องกด “copy” แยก
• เลือกได้ว่าจะให้ clipboard รับสีในรูปแบบ RGB / HEX / HSL / CMYK / OKLCH
• แสดงตัวอย่างสีและ system color ที่ใกล้เคียงด้วย

Eyedropper → บันทึก clipboard อัตโนมัติ → ดึงจาก clipboard picker — ไม่มีขั้นตอนสะดุด ไม่ต้องเปิดหน้าต่างแยกเหมือน Digital Color Meter ของ Mac และไม่ต้องกดคีย์ลัด copy ซ้ำๆ

clipboard จดจำสีโดยอัตโนมัติ

ประวัติ clipboard ของ fns รู้จักอัตโนมัติว่าข้อความที่คัดลอกเป็นรหัสสีหรือเปล่า — ไม่ว่าจะเป็นรูปแบบใดก็ตาม

เมื่อเรียกสีจากประวัติ clipboard กลับมา แค่ดูข้อความก็จำไม่ออกว่าสีอะไร fns แสดง color chip เล็กๆ ข้างแต่ละรายการให้เห็นในทันที

กรองแสดงแค่สี

กดปุ่มเดียว กรองเฉพาะรหัสสี จากประวัติ clipboard ได้ ระหว่างทำงานออกแบบ ถ้าอยากดูแค่สีที่เพิ่งใช้ ก็ไม่ต้องคุ้ยระหว่างข้อความ URL และโค้ดให้เมื่อย

• ใช้ keyword filter เช่น color: ใน picker เดิม → แสดงเฉพาะรายการสี
• ค้นหาด้วยชื่อสี — ค้น “blue” หรือ “red” ได้แค่สีในกลุ่มนั้น
• เรียงรายการสีที่ใกล้เคียงกันไว้ด้วยกันด้วยภาพ

แปลงสีเดิมเป็นรูปแบบอื่น

เรียกสีกลับมาในรูปแบบอื่น ได้ ถ้าคัดลอก #FF5733 จาก Figma แล้วอยากวางใน CSS เป็น rgb(...) แค่เลือกรายการนั้นใน fns clipboard picker แล้วกดคีย์ลัดครั้งเดียวก็แปลงอัตโนมัติ

ไม่ต้องเปิดเว็บแปลงสีทุกครั้งที่สลับระหว่าง Figma (HSB) กับ CSS (HSL/HEX/OKLCH)

Text expansion และการมัดรวม

ลงทะเบียนสีแบรนด์ที่ใช้บ่อยเป็นคีย์ย่อข้อความ

คีย์ย่อเดิมทำงานได้ทุกที่ — ช่องกรอกสีใน CSS, Figma, ข้อความ Slack, code editor ไม่ต้องเปิด brand guide มาค้นและคัดลอกสีทุกครั้งอีกต่อไป

เวลาที่เสียไปกับการเปิดเว็บแปลงสีและย้ายรหัสสีระหว่างรูปแบบ ลองให้ fns จัดการแทนดู

อยากรู้ว่าตัวเลขเหล่านี้มาจากไหน — พื้นฐานของสามช่อง RGB, เลขฐานสอง และสัญกรณ์ HEX? เริ่มต้นได้ที่ คอมพิวเตอร์สร้างสีได้อย่างไร: เรื่องของ RGB, HEX และเลขฐานสอง