OKLCH คืออะไร: รูปแบบสีที่ตรงกับการมองเห็นของดวงตาจริง ๆ

OKLCH บอกสีด้วยสามอย่าง: สีนั้นดูสว่างแค่ไหน สดแค่ไหน และเป็นฮิวอะไร ต่างจาก HSL ตรงที่ค่าความสว่างเท่ากันจะดูสว่างเท่ากันจริงในทุกฮิว ทำให้การทำพาเลต สีตอน hover และคอนทราสต์ที่อ่านง่ายคาดเดาได้

อัปเดต 28 กันยายน 2569อ่าน 1 นาที

OKLCH คืออะไร

OKLCH คือรูปแบบพิกัดเชิงขั้วของ Oklab ปริภูมิสีตามการรับรู้ที่ Björn Ottosson เผยแพร่ในปี 2020 ประกอบด้วยตัวเลขสามค่า L คือความสว่างที่ตารับรู้ ตั้งแต่ 0 (ดำ) ถึง 1 หรือ 100% (ขาว) C คือความสด (chroma) หรือปริมาณสี ตั้งแต่ 0 (เทา) ถึงราว 0.37 สำหรับสีที่สดที่สุดที่หน้าจอแสดงได้ H คือมุมของฮิว ตั้งแต่ 0 ถึง 360 องศา

สีเดียวกันเขียนในรูปแบบต่าง ๆ ได้ดังนี้ ทุกค่าด้านล่าง PickShade คำนวณสด ๆ จึงคัดลอกไปใช้ได้ทันที

ตัวอย่าง: #ff5733

รูปแบบ	ค่า
HEX
RGB
HSL
OKLCH
OKLab

ทำไม OKLCH ถึงดีกว่า HSL

ความสว่างของ HSL เป็นแค่สูตรคำนวณ ไม่ใช่สิ่งที่ตาเห็น hsl(60 100% 50%) เป็นสีเหลืองสว่าง ส่วน hsl(240 100% 50%) เป็นสีน้ำเงินเข้ม แต่ทั้งคู่อ้างว่ามีความสว่าง 50% เท่ากัน ถ้าสร้างพาเลตจาก HSL ทุกฮิวต้องมานั่งปรับแก้เอง

ใน OKLCH สีที่มีค่า L เท่ากันจะดูสว่างเท่ากัน คงค่า L และ C ไว้แล้วหมุน H ก็จะได้ชุดฮิวที่ดูสมดุล หรือคงค่า H และ C ไว้แล้วไล่ค่า L ก็จะได้สเกลเฉดสีที่สะอาดตา นี่คือเหตุผลที่ Tailwind CSS v4 กำหนดพาเลตเริ่มต้นทั้งหมดด้วย OKLCH

ความสว่างยังช่วยคาดเดาคอนทราสต์ได้ด้วย ข้อความที่ค่า L ต่างจากพื้นหลังประมาณ 0.4 ขึ้นไปมักอ่านได้ชัด ทำให้เลือกสีที่เข้าถึงได้ง่ายขึ้นมาก

ไวยากรณ์ใน CSS

ความสว่างเขียนเป็นเปอร์เซ็นต์หรือตัวเลขตั้งแต่ 0 ถึง 1 ก็ได้ ความสดเป็นตัวเลข ฮิวเป็นมุมหน่วยองศา ส่วนความโปร่งใสใส่ไว้หลังเครื่องหมายทับ

CSS

color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);

การรองรับในเบราว์เซอร์

oklch() ใช้ได้ในเบราว์เซอร์ปัจจุบันทุกตัว: Safari ตั้งแต่ 15.4, Chrome และ Edge ตั้งแต่ 111, Firefox ตั้งแต่ 113 ครอบคลุมผู้ใช้เกิน 90% ไปมาก สำหรับเบราว์เซอร์ที่เก่ามาก ให้ใส่ค่า HEX สำรองไว้ในบรรทัดก่อนค่า OKLCH

CSS

color: #ff5733;
color: oklch(68% 0.21 33.7);

ขีดจำกัดของความสดและขอบเขตสี

OKLCH อธิบายสีที่ไม่มีหน้าจอไหนแสดงได้ด้วย ความสดสูงสุดขึ้นอยู่กับความสว่างและฮิว เช่น เหลืองสดจะมีได้เฉพาะตอนความสว่างสูง น้ำเงินสดจะมีได้เฉพาะตอนความสว่างต่ำ เมื่อค่าหลุดออกนอกขอบเขตสี sRGB หรือ Display P3 เบราว์เซอร์จะดึงกลับเข้ามา ซึ่งอาจทำให้สีเพี้ยนไป

PickShade จะทำเครื่องหมายสีที่อยู่นอก sRGB และให้สีที่ใกล้ที่สุดที่อยู่ในขอบเขต โดยลดความสดลงแต่คงความสว่างและฮิวไว้ ซึ่งเป็นวิธีเดียวกับที่ CSS Color 4 แนะนำ

วิธีแปลง HEX เป็น OKLCH

การแปลงมีหลายขั้น: HEX เป็น sRGB, sRGB เป็นแสงเชิงเส้น, sRGB เชิงเส้นเป็นปริภูมิเซลล์รูปกรวย LMS, ถอดรากที่สาม, คูณเมทริกซ์เป็น Oklab และสุดท้ายแปลง Oklab เป็นพิกัดเชิงขั้ว ถ้าคำนวณเองผิดพลาดได้ง่าย จึงแนะนำให้วางสีลงในตัวแปลงสีแล้วคัดลอกผลลัพธ์ไปใช้

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

OKLCH รองรับในทุกเบราว์เซอร์หรือไม่

รองรับในเบราว์เซอร์ปัจจุบันทุกตัว: Safari 15.4 ขึ้นไป, Chrome และ Edge 111 ขึ้นไป, Firefox 113 ขึ้นไป ถ้าจำเป็นต้องรองรับเบราว์เซอร์รุ่นเก่า ให้เพิ่มบรรทัด HEX ไว้ก่อนหน้า

OKLCH กับ LCH ต่างกันอย่างไร

ทั้งคู่อธิบายความสว่าง ความสด และฮิวเหมือนกัน แต่ lch() ใน CSS อิงกับ CIELAB ซึ่งสีน้ำเงินจะเพี้ยนไปทางม่วงเมื่อเปลี่ยนความสว่าง ส่วน OKLCH อิงกับ Oklab ที่ฮิวคงที่กว่า สเกลเฉดสีของน้ำเงินจึงยังเป็นน้ำเงิน

ทำไมสี OKLCH ที่ใส่ไปถึงดูไม่เหมือนที่พิมพ์

ความสดน่าจะสูงเกินกว่าที่หน้าจอแสดงได้ที่ความสว่างและฮิวนั้น เบราว์เซอร์จึงดึงสีกลับเข้ามาในขอบเขตสีของหน้าจอ ลองลดความสดลงจนกว่า PickShade จะไม่ขึ้นว่าอยู่นอกขอบเขตสี

ใช้ OKLCH กับ Tailwind CSS ได้ไหม

ได้ Tailwind CSS v4 ใช้ OKLCH กับพาเลตเริ่มต้นอยู่แล้ว และสีที่กำหนดเองใน @theme ก็เขียนเป็น OKLCH ได้โดยตรง