OKLCH Color Converter: แปลงสีสำหรับ CSS Color Level 4

ถ้าคุณตามงาน frontend มาช่วงหลัง คงเคยเห็นโค้ดแบบ oklch(0.624 0.153 257) โผล่ใน design system หรือ CSS ของ framework ดัง ๆ อย่าง Tailwind CSS v4 นั่นแหละคือ OKLCH — color space ใหม่ใน CSS Color Level 4 ที่ browser ใหญ่ทุกตัว (Chrome, Safari, Firefox) รองรับแล้ว แต่ปัญหาคือเราคุ้นกับ HEX และ RGB มากกว่า จะเอา #3b82f6 ไปเขียนเป็น OKLCH ยังไง? คำตอบคือ OKLCH Color Converter เครื่องมือออนไลน์ฟรีที่แปลงระหว่าง OKLCH, OKLab และ HEX/RGB/HSL ได้ทุกทิศทาง พร้อม live preview และ gamut clamping ในตัว

เครื่องมือนี้ทำงาน client-side ทั้งหมด ไม่ต้องสมัครสมาชิก ไม่ต้องติดตั้งอะไร เปิดมาก็ใช้ได้เลย ลาก slider ปรับ Lightness, Chroma, Hue แล้วดูค่าทุก format อัปเดตแบบ real-time หรือจะพิมพ์ HEX code เข้าไปแล้วให้มันแปลงเป็น OKLCH ก็ได้เหมือนกัน

ในบทความนี้เราจะพาไปดูว่าเครื่องมือทำอะไรได้บ้าง ใช้ยังไง และที่สำคัญที่สุด — ทำไม OKLCH ถึงเป็นอนาคตของการทำงานกับสีใน CSS และควรใช้ตอนไหน

ทำไมต้องใช้ OKLCH Color Converter?

• แปลงได้ครบทุก format ในที่เดียว — OKLCH, OKLab, HEX, RGB และ HSL แสดงพร้อมกันทั้งหมด ไม่ต้องเปิดหลายเว็บเพื่อแปลงไปมา
• Live preview แบบ real-time — ลาก slider ปรับ L/C/H แล้วเห็นสีเปลี่ยนทันที พร้อมค่า output ทุก format อัปเดตตามไปด้วย ลดการเดาสีแบบเก่า ๆ
• Gamut clamping อัตโนมัติ — ถ้าสีที่คุณเลือกออกนอก sRGB gamut เครื่องมือจะ binary search หา chroma สูงสุดที่ยังอยู่ใน gamut (precision ระดับ 0.0001) แล้วเตือนคุณให้รู้ตัว ไม่ปล่อยให้ได้สีเพี้ยนโดยไม่รู้ตัว
• Perceptual color ที่คนออกแบบใช้จริง — OKLCH เป็น perceptually uniform color space ปรับ Lightness ขึ้นลงแล้วสีจะสว่าง/มืดลงแบบที่ตาเราเห็นจริง ไม่เหมือน HSL ที่ปรับ L แล้วบาง hue จะดูเตี้ยวหรือโดดไปมากกว่า hue อื่น
• Presets พร้อมใช้ — มี 10 preset swatches สไตล์ Tailwind palette (red, orange, yellow, green, cyan, blue, violet, pink, slate, dark navy) ให้เริ่มต้นเล่นได้เลย
• Copy คลิกเดียว — กดปุ่ม copy ที่ format ไหนก็ได้ค่านั้นไปวางใน CSS ทันที

ฟีเจอร์เด่น

จุดที่ต่างจาก color converter ทั่วไปคือความสัมพันธ์ระหว่าง OKLCH กับ OKLab — เครื่องมือแสดงทั้งสองแบบ เพราะ OKLCH คือ OKLab ในรูป cylindrical coordinates (เหมือน HSL เป็น cylindrical ของ RGB) เวลาทำ color math ลึก ๆ เช่น interpolation หรือ mixing บางที OKLab เอี่ยวกว่า ส่วนเวลาออกแบบพาเลตต์ OKLCH ใช้ง่ายกว่า

อีกจุดคือ default value oklch(0.624 0.153 257) ที่ตรงกับ #3b82f6 (สี blue-500 ของ Tailwind) — เป็นตัวอย่างที่ดีว่าสียอดนิยมใน design system สมัยใหม่ map ไปค่า OKLCH ยังไง ลองเลื่อน hue จาก 257 ไปทาง 220 หรือ 300 ดู จะเห็นว่าได้สีในโทนเดียวกันแต่ warm/cool ต่างกันแบบ predictable มาก

วิธีใช้งาน

1. เปิด OKLCH Color Converter — เริ่มต้นด้วยสี #3b82f6 (Tailwind blue-500) อยู่แล้ว
2. ถ้ามีสีเป้าหมายอยู่แล้ว ให้พิมพ์ HEX code ลงในช่อง input (เช่น #ef4444) แล้วค่า OKLCH ทุกตัวจะอัปเดตทันที
3. ลองปรับ slider — Lightness คุมความสว่าง, Chroma คุมความอิ่มสี, Hue คุมตำแหน่งสีบนวงล้อ สังเกต preview swatch ที่เปลี่ยนตามแบบ real-time
4. ดูค่า output ทั้งหมด: oklch(0.624 0.153 257), oklab(...), HEX, rgb() และ HSL แล้วกดปุ่ม copy ที่ format ที่ต้องการ
5. ถ้าขึ้น warning เรื่อง out-of-gamut แสดงว่าค่า chroma สูงเกินที่ sRGB เก็บได้ — ค่าที่แสดงจะถูก gamut-clamp ให้อยู่ในขอบเขต ลด chroma ลงเล็กน้อยก็จะกลับมา in-gamut

เข้าใจ OKLCH และ Perceptual Color

OKLCH ประกอบด้วยสามค่า: L (Lightness, 0–1) คือความสว่างที่ตามนุษย์รับรู้, C (Chroma) คือความเข้ม/อิ่มของสี (0 = เทา, สูงขึ้น = สดขึ้น) และ H (Hue, องศา 0–360) คือตำแหน่งสีบนวงล้อสี

หัวใจอยู่ที่ OKLab — color space ที่ Björn Ottosson พัฒนาขึ้นในปี 2020 และกลายเป็นมาตรฐานใน CSS Color Level 4 จุดเด่นคือ perceptually uniform หมายความว่าระยะทางระหว่างสีสองสีใน color space สอดคล้องกับความต่างที่ตาเราเห็นจริง ๆ

ทำไมเรื่องนี้สำคัญ? ลองเทียบกับ HSL ที่เราใช้กันมานาน: สี hsl(60 100% 50%) (เหลืองสด) กับ hsl(240 100% 50%) (น้ำเงินสด) ให้ความสว่างตามตัวเลขเท่ากัน แต่ตาเรารับรู้ว่าเหลืองสว่างกว่าน้ำเงินเยอะมาก สร้างปัญหาตอนทำ palette ที่ต้องการ "สีชุดเดียวกัน ต่างกันแค่ความสว่าง" — ใน HSL ต้องมานั่งเก็บทีละ hue แต่ใน OKLCH แค่ fix C กับ H แล้วไล่ L เป็นช่วง ๆ ก็ได้ shade ที่ดูสม่ำเสมอทั้ง palette ทันที นี่คือเหตุผลที่ Tailwind CSS v4 ย้ายทั้ง palette มาใช้ OKLCH

ส่วน gamut clamping คือเรื่องที่คนเริ่มเล่น OKLCH พลาดบ่อยที่สุด — OKLCH ครอบคลุมสีที่กว้างกว่า sRGB ที่จอส่วนใหญ่แสดงได้ ถ้าคุณตั้ง chroma สูง ๆ ใน hue ที่ "แพง" อย่างเขียวอมเหลืองหรือฟ้าอมม่วง สีนั้นอาจอยู่นอก sRGB gamut browser จะทำการ clamp ให้เองตอน render แต่วิธี clamp ของแต่ละเบราว์เซอร์ไม่เหมือนกัน เครื่องมือนี้เลยทำ clamping ให้ดูก่อน ด้วย binary search 15 iterations หา chroma สูงสุดที่ยัง in-gamut แล้วแสดง warning ให้คุณตัดสินใจว่าจะลด chroma เองหรือยอมรับค่าที่ clamp แล้ว

ตัวอย่างการใช้งานจริง

สร้าง color palette ที่ consistent

กำหนด hue ที่ต้องการ (เช่น 257 สำหรับโทนฟ้า) fix chroma ที่ 0.15 แล้วไล่ L จาก 0.25, 0.40, 0.55, 0.70, 0.85 — ได้ shade 5 ระดับที่สว่างขึ้นสม่ำเสมอจริง ๆ ต่างจากการไล่ HSL lightness ที่บางระดับจะดูจางหรือโดด จากนั้น copy ค่าแต่ละระดับเป็น CSS custom properties เช่น --brand-50 ถึง --brand-900 ได้เลย

ย้าย legacy palette ไป CSS ยุคใหม่

มี design เก่าเป็น HEX อยู่แล้ว? พิมพ์แต่ละสีลงช่อง HEX จะได้ค่า OKLCH ของทุกสีทันที พอมองเป็นชุดแล้วจะเห็นทันทีว่าสีไหน lightness ไม่สอดคล้องกับชุด (ซึ่งแก้ยากมากถ้าดูจาก HEX เพียว ๆ) แล้วปรับ L ให้เข้ารูปแบบก่อนเขียนกลับเป็น oklch() ใน codebase

ออกแบบ dark mode ให้ contrast คงที่

Dark mode ที่ดีไม่ใช่แค่เอาสี light mode มาลดความสว่าง แต่ต้องรักษา perceptual contrast ของ accent ให้เหมาะกับพื้นหลังมืด ด้วย OKLCH คุณจะลด L ของพื้นหลังลง (เช่น 0.20) แล้วค่อย ๆ ปรับ L ของ text กับ accent ให้ห่างจากพื้นหลังอย่างน้อย 0.4–0.5 จะได้ contrast ที่อ่านสบายตาในทุก hue — ถ้าอยากเช็คจริงจัง ลองใช้ OKLCH Contrast Checker คู่กัน

หลีกเลี่ยงสี out-of-gamut ตอนเขียน production CSS

ตอนเขียน oklch(0.85 0.35 140) สด ๆ สีเขียวสดจ๋าแบบนี้มักอยู่นอก sRGB gamut แล้ว browser แต่ละตัว clamp ต่างกัน ทำให้สีที่ test ใน Chrome อาจเพี้ยนใน Safari ใช้ converter ตรวจก่อนว่า in-gamut หรือไม่ ถ้าไม่ก็ลด chroma จน warning หาย ค่อยเอาค่าไปใช้ ปลอดภัยกว่าเยอะ

Best Practices

• ปรับ hue ก่อน แล้วค่อยไล่ L และ C — จะได้ทิศทางของ palette ก่อน แล้วค่อยขัดเกลาความสว่างกับความอิ่ม
• Fix C และ H ตอนสร้าง shade ทั้งชุด — ไล่เฉพาะ L เพื่อให้ perceptual lightness สม่ำเสมอทั้ง scale
• อย่าตั้ง chroma สูงสุดเท่าที่ได้ — สีที่ C สูงมากมักออกนอก sRGB gamut และดูรุนแรงเกินจำเป็น ลองเริ่มราว 0.10–0.20 ก่อนแล้วค่อยขยับ
• เช็ค warning out-of-gamut ทุกครั้งก่อนเอาค่าไปใช้ — ถ้า warning ขึ้น แปลว่าค่าที่ copy ไปเป็นค่าที่ clamp แล้ว ควรลด chroma เพื่อให้ได้สีที่ตั้งใจจริง ๆ
• ใช้ custom properties เก็บค่า oklch() — เช่น --brand: oklch(0.624 0.153 257) แล้วอ้างผ่าน var() จะ tune palette ทีเดียวจบทั้งเว็บ
• ทดสอบบนจอหลายประเภท — ค่า perceptual ที่ตรงบนจอของคุณ อาจต่างเล็กน้อยบนจอระดับอื่น โดยเฉพาะงานที่ contrast สำคัญ

สรุปและเริ่มใช้งาน

OKLCH ไม่ใช่แค่ trend ใหม่ แต่คือการแก้ปัญหาจริงของการทำงานกับสีใน CSS — สร้าง palette ที่สม่ำเสมอ ออกแบบ dark mode ที่คุม contrast ได้ และพูดภาษาเดียวกับ browser ยุคใหม่ทั้งหมด ส่วน OKLCH Color Converter คือสะพานที่ทำให้คุณข้ามจากโลก HEX/RGB ไปสู่ OKLCH ได้แบบไม่ปวดหัว ลองเปิดมาเล่นสัก 5 นาที ลาก hue ไปรอบ ๆ ดู แล้วจะเข้าใจทันทีว่าทำไมทั้ง Tailwind, Chrome และ design system สมัยใหม่ถึงเลือก color space นี้

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

• OKLCH Contrast Checker — เช็ค contrast ของสี OKLCH เป็นคู่พื้นหลัง/ตัวอักษร
• Color Converter — แปลงสีข้าม format ทั่วไป HEX, RGB, HSL และอื่น ๆ
• Color Palette Generator — สร้าง palette อัตโนมัติสำหรับโปรเจกต์ถัดไป

ขอให้สนุกกับการเล่นสี!