OKLCH คืออะไร และทำไมต้องใช้?

OKLCH เป็น Color Space สมัยใหม่ใน CSS (L = ความสว่าง, C = ความเข้มของสี, H = โทนสี) อิงจากโมเดลการรับรู้ OKLab ต่างจาก HSL ที่ขั้นตัวเลขเท่ากันใน OKLCH จะดูเท่ากันต่อสายตามนุษย์ เหมาะสำหรับการสร้างชุดสีที่เข้าถึงได้และ Design Tokens

ทำไมบางสี HEX ถึงแสดงชื่อ CSS?

CSS มีชื่อสีมากกว่า 140 ชื่อ (เช่น 'red', 'navy', 'coral') เมื่อค่า HEX ที่แปลงได้ตรงกับชื่อสีเหล่านี้พอดี เครื่องมือจะแสดงเป็นรูปแบบเสริมที่คัดลอกได้

ความแม่นยำของการแปลง OKLCH เป็นอย่างไร?

การแปลงใช้ขั้นตอน sRGB → linear RGB → XYZ D65 → OKLab → OKLCH มาตรฐาน ผลลัพธ์มีความแม่นยำถึง 3 ตำแหน่งทศนิยม ซึ่งเพียงพอสำหรับการใช้งาน CSS และการออกแบบทั้งหมด

ป้อนสีแบบ HSV ได้ไหม?

ได้ พิมพ์ในรูปแบบ hsv(H, S%, V%) เช่น hsv(210, 75%, 90%) เครื่องมือจะแปลงและแสดงรูปแบบอื่นทั้งหมด โปรดทราบว่า HSV ไม่ใช่มาตรฐาน CSS ดังนั้น Color Picker ของเบราว์เซอร์จึงไม่รองรับโดยตรง

แปลงรหัสสี

แปลงสีระหว่างรูปแบบ HEX, RGB, HSL, HSV และ OKLCH ได้ทันที

นักพัฒนา

Share this tool

f 𝕏 L

ป้อนค่าสี (HEX, RGB, HSL, HSV หรือชื่อสี)

HEX

RGB

HSL

HSV

OKLCH

วิธีใช้งาน

1
พิมพ์หรือวางค่าสี (HEX เช่น #3b82f6, RGB เช่น rgb(59,130,246) หรือชื่อ CSS เช่น 'blue') ลงในช่องป้อนข้อมูล
2
หรือคลิกตัวเลือกสีทางขวาเพื่อเปิด Color Picker แบบกราฟิกและเลือกสีได้ตามต้องการ
3
ผลลัพธ์ทุกรูปแบบ (HEX, RGB, HSL, HSV, OKLCH และชื่อ CSS หากมี) จะแสดงทันทีในส่วนผลลัพธ์
4
คลิกปุ่ม คัดลอก ถัดจากรูปแบบใดก็ได้ เพื่อคัดลอกค่านั้นไปยัง Clipboard

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

ออกแบบเว็บและแอป

แปลงสีแบรนด์ในรูปแบบ HEX เป็น HSL สำหรับ Tailwind CSS custom properties หรือเป็น RGB สำหรับค่า rgba() ที่ต้องการความโปร่งใส

Design System Tokens

รับค่า OKLCH สำหรับ Design Tokens สมัยใหม่ใน CSS ที่ให้สเกลสีที่สม่ำเสมอตามการรับรู้ของสายตา

ส่งงานให้นักพัฒนา

นักออกแบบมักทำงานใน HSL ขณะที่นักพัฒนาต้องการ HEX หรือ RGB ในโค้ด — แปลงได้ทันทีเพื่อหลีกเลี่ยงข้อผิดพลาดจากการคำนวณเอง

ตรวจสอบสีด้าน Accessibility

ตรวจสอบค่า L (ความสว่าง) ใน HSL หรือ OKLCH เพื่อประเมินอย่างรวดเร็วว่าสีตัวอักษรและพื้นหลังมีคอนทราสต์เพียงพอ

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

Color Format Converter แปลงสีระหว่างรูปแบบ HEX, RGB, HSL, HSV และ OKLCH ได้ทันทีในเบราว์เซอร์ ไม่ต้องติดตั้งโปรแกรม เพียงวางค่าสีหรือใช้ตัวเลือกสี ทุกรูปแบบจะอัปเดตพร้อมกัน

ทั้งคู่ใช้ Hue และ Saturation แต่ต่างกันที่แกนที่สาม HSL ใช้ Lightness (0% = ดำ, 50% = สีบริสุทธิ์, 100% = ขาว) ส่วน HSV ใช้ Value/Brightness (0% = ดำ, 100% = ความสว่างเต็ม) HSL เข้าใจง่ายกว่าในการออกแบบ ส่วน HSV พบบ่อยในโปรแกรมแก้ไขรูปภาพ เช่น Photoshop