OKLCH — สีที่เข้าใจสายตาคนมากกว่าที่เคย
ลองนึกภาพว่าคุณกำลังออกแบบปุ่มบนเว็บไซต์ และอยากให้แต่ละปุ่มมีสีต่างกัน แต่ยังคง “ความรู้สึก” ที่เหมือนกัน — ไม่ใช่บางปุ่มดูสว่างเกินไป บางปุ่มดูหม่น หรือบางปุ่มดูโดดเด่นเกินหน้าเพื่อน
นั่นคือปัญหาที่ OKLCH เข้ามาแก้ได้อย่างเฉียบขาด
OKLCH เป็นระบบสีใหม่ใน CSS ที่ออกแบบมาให้ “perceptually uniform” หรือก็คือ สีที่เปลี่ยนไปอย่างสม่ำเสมอตามการรับรู้ของสายตามนุษย์ ไม่ใช่แค่ตัวเลขในระบบ RGB หรือ HSL ที่บางครั้งเปลี่ยนแค่ 5 หน่วย แต่กลับทำให้สีดูเปลี่ยนไปมากเกินคาด
OKLCH ประกอบด้วย 3 ค่า:
- Lightness (L): ความสว่าง
- Chroma (C): ความเข้มของสี
- Hue (H): เฉดสี
เมื่อคุณเปลี่ยนเฉพาะ Hue โดยคงค่า L และ C ไว้ สีที่ได้จะมีความสว่างและความเข้มเท่ากัน ต่างกันแค่เฉด — ทำให้สร้างชุดสีที่ “รู้สึกเท่ากัน” ได้ง่ายมาก
นอกจากนี้ OKLCH ยังช่วยให้การสร้าง gradients ดูนุ่มนวลและเป็นธรรมชาติกว่า RGB เพราะมันคำนวณจากความสว่าง ความเข้ม และเฉด ไม่ใช่แค่ค่าของแดง เขียว น้ำเงิน
และที่สำคัญ OKLCH รองรับสีใน Display-P3 ซึ่งเป็นขอบเขตสีที่กว้างกว่าสำหรับหน้าจอสมัยใหม่ เช่น MacBook หรือ iPhone รุ่นใหม่ ทำให้สีดูสดและแม่นยำยิ่งขึ้น
สรุปเนื้อหาเป็นหัวข้อ
OKLCH เป็นระบบสีใหม่ใน CSS ที่ออกแบบมาให้ perceptually uniform
ประกอบด้วย 3 ค่า: Lightness, Chroma และ Hue
การเปลี่ยนเฉพาะ Hue โดยคงค่า L และ C จะได้ชุดสีที่มีความรู้สึกเท่ากัน
OKLCH ช่วยให้ gradients ดูนุ่มนวลและไม่เกิดสีแปลกกลางทาง
รองรับสีใน Display-P3 ซึ่งมีขอบเขตกว้างกว่าสี sRGB
OKLCH ถูกนำมาใช้ใน CSS Color Module Level 4 และรองรับในเบราว์เซอร์สมัยใหม่
สามารถใช้ @supports ใน CSS เพื่อ fallback ไปยัง sRGB หากเบราว์เซอร์ไม่รองรับ
มีเครื่องมือช่วยสร้างพาเลตสี OKLCH เช่น oklch.fyi
OKLCH ใช้พื้นฐานจาก OKLab ซึ่งเป็นโมเดลสีที่แม่นยำต่อการรับรู้ของมนุษย์
ข้อมูลเสริมจากภายนอก
OKLCH ถูกเสนอโดย Björn Ottosson ในปี 2020 เพื่อแก้ปัญหาความไม่สม่ำเสมอของสีในระบบเดิม
Display-P3 มีขอบเขตสีมากกว่า sRGB ถึง 50% โดยเฉพาะในเฉดแดงและเขียว
OKLCH สามารถกำหนดค่าที่อยู่นอกขอบเขตของหน้าจอจริงได้ แต่จะถูก “clip” ให้ใกล้เคียงที่สุด
การใช้ OKLCH ช่วยให้การออกแบบเว็บเข้าถึงผู้ใช้ที่มีความบกพร่องทางการมองเห็นได้ดีขึ้น
https://jakub.kr/components/oklch-colors
ลองนึกภาพว่าคุณกำลังออกแบบปุ่มบนเว็บไซต์ และอยากให้แต่ละปุ่มมีสีต่างกัน แต่ยังคง “ความรู้สึก” ที่เหมือนกัน — ไม่ใช่บางปุ่มดูสว่างเกินไป บางปุ่มดูหม่น หรือบางปุ่มดูโดดเด่นเกินหน้าเพื่อน
นั่นคือปัญหาที่ OKLCH เข้ามาแก้ได้อย่างเฉียบขาด
OKLCH เป็นระบบสีใหม่ใน CSS ที่ออกแบบมาให้ “perceptually uniform” หรือก็คือ สีที่เปลี่ยนไปอย่างสม่ำเสมอตามการรับรู้ของสายตามนุษย์ ไม่ใช่แค่ตัวเลขในระบบ RGB หรือ HSL ที่บางครั้งเปลี่ยนแค่ 5 หน่วย แต่กลับทำให้สีดูเปลี่ยนไปมากเกินคาด
OKLCH ประกอบด้วย 3 ค่า:
- Lightness (L): ความสว่าง
- Chroma (C): ความเข้มของสี
- Hue (H): เฉดสี
เมื่อคุณเปลี่ยนเฉพาะ Hue โดยคงค่า L และ C ไว้ สีที่ได้จะมีความสว่างและความเข้มเท่ากัน ต่างกันแค่เฉด — ทำให้สร้างชุดสีที่ “รู้สึกเท่ากัน” ได้ง่ายมาก
นอกจากนี้ OKLCH ยังช่วยให้การสร้าง gradients ดูนุ่มนวลและเป็นธรรมชาติกว่า RGB เพราะมันคำนวณจากความสว่าง ความเข้ม และเฉด ไม่ใช่แค่ค่าของแดง เขียว น้ำเงิน
และที่สำคัญ OKLCH รองรับสีใน Display-P3 ซึ่งเป็นขอบเขตสีที่กว้างกว่าสำหรับหน้าจอสมัยใหม่ เช่น MacBook หรือ iPhone รุ่นใหม่ ทำให้สีดูสดและแม่นยำยิ่งขึ้น
สรุปเนื้อหาเป็นหัวข้อ
OKLCH เป็นระบบสีใหม่ใน CSS ที่ออกแบบมาให้ perceptually uniform
ประกอบด้วย 3 ค่า: Lightness, Chroma และ Hue
การเปลี่ยนเฉพาะ Hue โดยคงค่า L และ C จะได้ชุดสีที่มีความรู้สึกเท่ากัน
OKLCH ช่วยให้ gradients ดูนุ่มนวลและไม่เกิดสีแปลกกลางทาง
รองรับสีใน Display-P3 ซึ่งมีขอบเขตกว้างกว่าสี sRGB
OKLCH ถูกนำมาใช้ใน CSS Color Module Level 4 และรองรับในเบราว์เซอร์สมัยใหม่
สามารถใช้ @supports ใน CSS เพื่อ fallback ไปยัง sRGB หากเบราว์เซอร์ไม่รองรับ
มีเครื่องมือช่วยสร้างพาเลตสี OKLCH เช่น oklch.fyi
OKLCH ใช้พื้นฐานจาก OKLab ซึ่งเป็นโมเดลสีที่แม่นยำต่อการรับรู้ของมนุษย์
ข้อมูลเสริมจากภายนอก
OKLCH ถูกเสนอโดย Björn Ottosson ในปี 2020 เพื่อแก้ปัญหาความไม่สม่ำเสมอของสีในระบบเดิม
Display-P3 มีขอบเขตสีมากกว่า sRGB ถึง 50% โดยเฉพาะในเฉดแดงและเขียว
OKLCH สามารถกำหนดค่าที่อยู่นอกขอบเขตของหน้าจอจริงได้ แต่จะถูก “clip” ให้ใกล้เคียงที่สุด
การใช้ OKLCH ช่วยให้การออกแบบเว็บเข้าถึงผู้ใช้ที่มีความบกพร่องทางการมองเห็นได้ดีขึ้น
https://jakub.kr/components/oklch-colors
🎙️ OKLCH — สีที่เข้าใจสายตาคนมากกว่าที่เคย
ลองนึกภาพว่าคุณกำลังออกแบบปุ่มบนเว็บไซต์ และอยากให้แต่ละปุ่มมีสีต่างกัน แต่ยังคง “ความรู้สึก” ที่เหมือนกัน — ไม่ใช่บางปุ่มดูสว่างเกินไป บางปุ่มดูหม่น หรือบางปุ่มดูโดดเด่นเกินหน้าเพื่อน
นั่นคือปัญหาที่ OKLCH เข้ามาแก้ได้อย่างเฉียบขาด
OKLCH เป็นระบบสีใหม่ใน CSS ที่ออกแบบมาให้ “perceptually uniform” หรือก็คือ สีที่เปลี่ยนไปอย่างสม่ำเสมอตามการรับรู้ของสายตามนุษย์ ไม่ใช่แค่ตัวเลขในระบบ RGB หรือ HSL ที่บางครั้งเปลี่ยนแค่ 5 หน่วย แต่กลับทำให้สีดูเปลี่ยนไปมากเกินคาด
OKLCH ประกอบด้วย 3 ค่า:
- Lightness (L): ความสว่าง
- Chroma (C): ความเข้มของสี
- Hue (H): เฉดสี
เมื่อคุณเปลี่ยนเฉพาะ Hue โดยคงค่า L และ C ไว้ สีที่ได้จะมีความสว่างและความเข้มเท่ากัน ต่างกันแค่เฉด — ทำให้สร้างชุดสีที่ “รู้สึกเท่ากัน” ได้ง่ายมาก
นอกจากนี้ OKLCH ยังช่วยให้การสร้าง gradients ดูนุ่มนวลและเป็นธรรมชาติกว่า RGB เพราะมันคำนวณจากความสว่าง ความเข้ม และเฉด ไม่ใช่แค่ค่าของแดง เขียว น้ำเงิน
และที่สำคัญ OKLCH รองรับสีใน Display-P3 ซึ่งเป็นขอบเขตสีที่กว้างกว่าสำหรับหน้าจอสมัยใหม่ เช่น MacBook หรือ iPhone รุ่นใหม่ ทำให้สีดูสดและแม่นยำยิ่งขึ้น
📌 สรุปเนื้อหาเป็นหัวข้อ
➡️ OKLCH เป็นระบบสีใหม่ใน CSS ที่ออกแบบมาให้ perceptually uniform
➡️ ประกอบด้วย 3 ค่า: Lightness, Chroma และ Hue
➡️ การเปลี่ยนเฉพาะ Hue โดยคงค่า L และ C จะได้ชุดสีที่มีความรู้สึกเท่ากัน
➡️ OKLCH ช่วยให้ gradients ดูนุ่มนวลและไม่เกิดสีแปลกกลางทาง
➡️ รองรับสีใน Display-P3 ซึ่งมีขอบเขตกว้างกว่าสี sRGB
➡️ OKLCH ถูกนำมาใช้ใน CSS Color Module Level 4 และรองรับในเบราว์เซอร์สมัยใหม่
➡️ สามารถใช้ @supports ใน CSS เพื่อ fallback ไปยัง sRGB หากเบราว์เซอร์ไม่รองรับ
➡️ มีเครื่องมือช่วยสร้างพาเลตสี OKLCH เช่น oklch.fyi
➡️ OKLCH ใช้พื้นฐานจาก OKLab ซึ่งเป็นโมเดลสีที่แม่นยำต่อการรับรู้ของมนุษย์
✅ ข้อมูลเสริมจากภายนอก
➡️ OKLCH ถูกเสนอโดย Björn Ottosson ในปี 2020 เพื่อแก้ปัญหาความไม่สม่ำเสมอของสีในระบบเดิม
➡️ Display-P3 มีขอบเขตสีมากกว่า sRGB ถึง 50% โดยเฉพาะในเฉดแดงและเขียว
➡️ OKLCH สามารถกำหนดค่าที่อยู่นอกขอบเขตของหน้าจอจริงได้ แต่จะถูก “clip” ให้ใกล้เคียงที่สุด
➡️ การใช้ OKLCH ช่วยให้การออกแบบเว็บเข้าถึงผู้ใช้ที่มีความบกพร่องทางการมองเห็นได้ดีขึ้น
https://jakub.kr/components/oklch-colors
0 ความคิดเห็น
0 การแบ่งปัน
47 มุมมอง
0 รีวิว