ตัวแปลงสี OKLCH
ตัวแปลงสี OKLCH ออนไลน์ฟรี แปลงระหว่าง OKLCH, OKLab, HEX, RGB และ HSL สำหรับ CSS Color Level 4 สมัยใหม่ พรีวิวสดพร้อม gamut clamping ทำงานฝั่ง client 100%
Loading tool...
ตัวแปลงสี OKLCH คืออะไร?
ตัวแปลงสี OKLCH เป็นเครื่องมือออนไลน์ฟรีที่แปลงสีระหว่าง color space แบบรับรู้ OKLCH และ OKLab สมัยใหม่ (ที่กำหนดใน CSS Color Level 4) กับรูปแบบ sRGB แบบดั้งเดิมคือ HEX, RGB และ HSL OKLCH แยกสีออกเป็น lightness (L, 0-1), chroma (C) และ hue (H, 0-360) ในสเกลที่ uniform ตามการรับรู้ ทำให้ขั้นเลขที่เท่ากันดูต่างกันเท่า ๆ กันทั้งวงสี ปรับ channel ทั้งสามด้วย slider หรือช่องกรอกตัวเลข วาง hex code หรือใช้ color picker แล้วรูปแบบทั้งห้าจะอัปเดตสด สีที่อยู่นอก gamut sRGB จะถูก clamp อัตโนมัติโดยลด chroma ผ่าน binary search พร้อมคำเตือนชัดเจนเพื่อให้ swatch บนจอตรงกับสิ่งที่เบราว์เซอร์เรนเดอร์ได้ การแปลงทุกอย่างทำงานใน browser โดยไม่ส่งข้อมูลออกไป
ประโยชน์หลัก
- ออกแบบในพื้นที่ที่ uniform ตามการรับรู้ ที่ขั้นเท่ากันดูต่างกันเท่า ๆ กัน
- คัดลอก CSS string oklch() และ oklab() ที่วางได้ทันที รองรับเบราว์เซอร์สมัยใหม่ทุกตัว
- clamp gamut อัตโนมัติ ทำให้สี out-of-gamut แมปไปยัง swatch sRGB ที่ใกล้ที่สุดที่แสดงได้
- สองทิศทาง: นำเข้าจาก hex แล้วแก้ใน OKLCH หรือออกแบบใน OKLCH แล้วคัดลอก fallback sRGB
- ฝั่ง client 100% ไม่ต้องสมัครและรองรับออฟไลน์เต็มรูปแบบ
กรณีการใช้งาน
- •CSS สมัยใหม่: เขียนค่าสี oklch() และ oklab() สำหรับ stylesheet ของ CSS Color Level 4
- •Design system: สร้าง color ramp ที่ uniform ตามการรับรู้และ contrast scale ที่เข้าถึงได้
- •UI design: เลือกสีแบรนด์ที่ดูสม่ำเสมอในช่วง lightness และ chroma
- •Accessibility: สร้างพาเลต OKLCH ที่รักษา contrast ตามการรับรู้สำหรับการตรวจ WCAG
- •Color science: สำรวจพื้นที่ OKLab/OKLCH และแปลงเป็น fallback sRGB สำหรับเบราว์เซอร์เก่า
วิธีใช้ตัวแปลงสี OKLCH
- เลือกสีเริ่มต้น: กรอก hex code (เช่น #3b82f6) ใช้ color picker หรือคลิกสีตัวอย่าง ค่า OKLCH จะอัปเดตทันที
- ปรับค่า OKLCH: ใช้ slider Lightness, Chroma และ Hue หรือช่องกรอกตัวเลขเพื่อปรับสีให้ละเอียดในพื้นที่ OKLCH ที่รับรู้
- ตรวจสอบคำเตือน gamut: หากสีของคุณอยู่นอก gamut sRGB จะมีคำเตือนสีเหลือง พรีวิวและค่า HEX/RGB จะถูก clamp gamut ไปยัง swatch sRGB ที่ใกล้ที่สุด
- คัดลอกรูปแบบใดก็ได้: ใช้ปุ่มคัดลอกถัดจาก OKLCH, OKLab, HEX, RGB หรือ HSL เพื่อคัดลอก CSS string นั้นไปยังคลิปบอร์ด
คุณสมบัติหลัก
- slider OKLCH สำหรับ Lightness (0-1), Chroma (0-0.4) และ Hue (0-360) พร้อมช่องกรอกตัวเลขที่แม่นยำ
- คัดลอกคลิกเดียวสำหรับ OKLCH, OKLab, HEX, RGB และ HSL พร้อม feedback การคัดลอก
- color picker และช่อง hex แบบ native ช่วยให้นำเข้าสี sRGB ใด ๆ และแปลงเป็น OKLCH ได้ทันที
- clamp gamut sRGB อัตโนมัติผ่าน binary search พร้อมคำเตือน out-of-gamut ที่ชัดเจน
- แปลงสองทิศทาง: เริ่มจาก hex แล้วแก้ใน OKLCH หรือออกแบบใน OKLCH แล้วคัดลอก fallback sRGB
- แปลงฝั่ง client ล้วน ไม่มี network call ไม่ต้องสมัคร และรองรับออฟไลน์เต็มรูปแบบ