การสร้างโทเคนของดีไซน์ซิสเต็ม
แปลงค่า HEX ของแบรนด์เป็น OKLCH เพื่อให้ทุกเฉดในแรมป์โทเคนของคุณมีระยะความสว่างเชิงการรับรู้เท่ากัน วางผลลัพธ์ OKLCH ลงใน CSS ของคุณได้โดยตรง — ไม่ต้องใช้ preprocessor
เครื่องมือเลือกและแปลงสี
เลือกด้วยสายตาหรือวางค่าใดก็ได้ — HEX, RGB, HSL, OKLCH และ OKLAB จะซิงก์กันอัตโนมัติ มาพร้อมตัวตรวจคอนทราสต์ WCAG 2.2 และตัวสร้างพาเลตต์บนพื้นฐาน OKLCH ทำงานในเบราว์เซอร์ของคุณทั้งหมด
เครื่องมือเลือกและแปลงสี — TL;DR
เลือกด้วยสายตาหรือวางค่าใดก็ได้ — HEX, RGB, HSL, OKLCH และ OKLAB จะซิงก์กันอัตโนมัติ มาพร้อมตัวตรวจคอนทราสต์ WCAG 2.2 และตัวสร้างพาเลตต์บนพื้นฐาน OKLCH ทำงานในเบราว์เซอร์ของคุณทั้งหมด
วางค่า hex ของคุณ (เช่น #ff5722) ในช่อง HEX — แถว RGB จะอัปเดตทันที เช่นเดียวกัน วาง rgb(255 87 34) ในช่อง RGB แล้ว HEX, HSL, OKLCH และ OKLAB จะซิงก์กันทั้งหมด การแปลงเป็นแบบสองทิศทางในทุกฟอร์แมตที่รองรับ
OKLCH เป็นพื้นที่สีใน CSS Color Module Level 4 ที่ใช้ความสว่างเชิงการรับรู้ (L), ความเข้มสี (C) และเฉดสี (h) — คล้าย HSL แต่สม่ำเสมอเชิงการรับรู้ สี OKLCH สองสีที่มีค่า L เท่ากันจะดูสว่างเท่ากัน แม้เฉดต่างกัน นั่นทำให้ดีไซน์โทเคน พาเลตต์ที่สร้างขึ้น และแรมป์สีที่เข้าถึงได้ คาดเดาง่ายกว่า HSL มาก เบราว์เซอร์ยุคใหม่ทุกตัว (Chrome 111+, Safari 15.4+, Firefox 113+) รองรับ
ค่าสีไม่เคยออกจากอุปกรณ์ของคุณ เปิด DevTools → Network แล้วคุณจะเห็นว่าไม่มีคำขอออกไปขณะแปลงสี เลือกสี สร้างพาเลตต์ หรือตรวจคอนทราสต์
HEX
RGB
HSL
OKLCH
OKLAB
ชื่อสี
พาเลตต์
คอนทราสต์ WCAG 2.2
ตัวอักษร
พื้นหลัง
—
ตัวอย่าง
ตัวอย่างหัวข้อขนาดใหญ่
ตัวอย่างเนื้อหา — สุนัขจิ้งจอกสีน้ำตาลกระโดดข้ามสุนัขขี้เกียจ
ออกแบบสำหรับการทำงานจริง
ตั้งแต่ดีไซน์ซิสเต็มไปจนถึงการตรวจสอบการเข้าถึง — ทุกฟอร์แมตและการตรวจสอบที่คุณต้องการ ในที่เดียว
หกพื้นที่สี
แปลงไปกลับระหว่าง HEX (3 / 4 / 6 / 8 หลัก), RGB(A), HSL(A), OKLCH, OKLAB และชื่อสีของ CSS สตริงที่ได้สอดคล้องกับไวยากรณ์ CSS Color Module Level 4 — วางลงในสไตล์ชีตของคุณได้ทันที
ตัวตรวจคอนทราสต์ WCAG 2.2
ดูอัตราคอนทราสต์ระหว่างสีสองสี พร้อมตราผ่าน/ไม่ผ่านในคลิกเดียวสำหรับ AA (4.5 : 1) และ AAA (7 : 1) ทั้งขนาดข้อความปกติและขนาดใหญ่ การคำนวณเป็นไปตามเอกสารอ้างอิงของ W3C: linearize sRGB, คำนวณค่าความสว่างสัมพัทธ์ จากนั้น (L1+0.05)/(L2+0.05)
EyeDropper — เลือกพิกเซลใดก็ได้
คลิก EyeDropper เพื่อเลือกสีใดก็ได้บนหน้าจอ — งานออกแบบ ภาพหน้าจอ ภาพถ่าย หรือแม้แต่แท็บอื่นในเบราว์เซอร์ ใช้ EyeDropper API ดั้งเดิมบนเบราว์เซอร์ตระกูล Chromium
พาเลตต์บนพื้นฐาน OKLCH
สร้างเฉดสีอ่อนและเข้ม 9 ระดับ พร้อมการประสานสีแบบคู่ตรงข้าม สามเหลี่ยม และข้างเคียง — สร้างใน OKLCH เพื่อให้แต่ละขั้นมีระยะห่างเชิงการรับรู้ที่สม่ำเสมอ (ต่างจาก HSL ที่ความสว่างแปรปรวน)
ออกแบบให้เป็นส่วนตัว
ทุกการแปลงทำงานด้วย JavaScript บนอุปกรณ์ของคุณ ไม่มีการอัปโหลด ไม่มีการบันทึก ไม่มีการส่งไปยังบุคคลที่สาม — เปิด DevTools → Network เพื่อยืนยันด้วยตัวคุณเองได้
สร้างมาเพื่อความเร็ว
JavaScript ล้วน ไม่มีรันไทม์ของเฟรมเวิร์ก โหลดครั้งแรกต่ำกว่า 50 KB หลัง gzip การแปลงและการสร้างพาเลตต์ทำเสร็จในไม่ถึงหนึ่งมิลลิวินาทีบนแล็ปท็อปอายุห้าปี
วิธีใช้เครื่องมือเลือกสี
เริ่มได้สี่วิธี ทุกฟอร์แมตซิงก์กัน
-
1
เลือกด้วยสายตา
ลากในกรอบความอิ่มสี/ความสว่างเพื่อเลือกเฉด เลื่อนแถบเฉดสีด้านล่างเพื่อเปลี่ยนสีพื้นฐาน และใช้ตัวเลื่อนอัลฟาสำหรับความโปร่งใส ทุกฟอร์แมตทางขวาจะอัปเดตทันที
-
2
วางค่าใดก็ได้
วาง HEX (
#4f46e5), RGB (rgb(79 70 229)), HSL (hsl(244 76% 59%)), OKLCH (oklch(53% 0.22 277)) หรือแม้แต่ชื่อสีของ CSS (tomato) ในช่องที่ตรงกัน — ตัวเลือกสีและฟอร์แมตอื่น ๆ จะซิงก์กันทั้งหมด -
3
เลือกด้วย EyeDropper
คลิกปุ่ม EyeDropper เพื่อเก็บพิกเซลใดก็ได้บนหน้าจอ — แท็บอื่น ภาพหน้าจอ ภาพถ่าย หรือไอคอน ใช้ EyeDropper API ดั้งเดิมบน Chrome, Edge และ Opera
-
4
คัดลอกหรือตรวจคอนทราสต์
คลิกไอคอนคัดลอกข้างฟอร์แมตใด ๆ เพื่อนำไปไว้ในคลิปบอร์ด หรือเลื่อนไปที่ส่วนคอนทราสต์ WCAG 2.2 เพื่อตรวจสอบว่าคู่สีพื้นหน้า/พื้นหลังของคุณผ่าน AA หรือ AAA ที่ขนาดข้อความปกติและขนาดใหญ่หรือไม่
สร้างมาเพื่อนักออกแบบ นักพัฒนา และผู้ตรวจสอบการเข้าถึง
เครื่องมือสีที่เหมาะกับสี่กระบวนการทำงานยอดนิยม
การตรวจสอบการเข้าถึงตาม WCAG
ใส่คู่สีพื้นหน้า/พื้นหลังแล้วอ่านอัตราคอนทราสต์พร้อมตรา AA / AAA จับคู่สีที่ไม่ผ่านก่อนปล่อยใช้งานจริง — ตรงตามเกณฑ์ของ W3C ที่ 4.5 : 1 ปกติ / 7 : 1 ระดับเข้ม
การแปลงสี CSS ฝั่งฟรอนต์เอนด์
มี HEX จากม็อกอัปของนักออกแบบ แต่ต้องใช้ HSL สำหรับการตั้งค่า Tailwind หรือ OKLCH สำหรับสไตล์ชีตสมัยใหม่? วางครั้งเดียว คัดลอกได้ในทุกฟอร์แมต สตริงที่ได้เป็นไวยากรณ์ CSS Color Module Level 4 ที่ถูกต้อง
การสำรวจพาเลตต์
เลือกสีพื้นฐานแล้วเห็นเฉดสีอ่อนและเข้มที่มีระยะเชิงการรับรู้สม่ำเสมอเก้าเฉด พร้อมการประสานแบบคู่ตรงข้าม สามเหลี่ยม และข้างเคียง — สร้างใน OKLCH เพื่อให้แต่ละขั้นดูสว่างเท่ากัน
ส่วนตัว 100% — ทำงานในเบราว์เซอร์ของคุณ
ค่าสีไม่เคยออกจากอุปกรณ์ของคุณ เปิด DevTools → Network แล้วคุณจะเห็นว่าไม่มีคำขอออกไปขณะแปลงสี เลือกสี สร้างพาเลตต์ หรือตรวจคอนทราสต์
- ทุกการแปลง (HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB) ทำงานเป็น JavaScript บนเครื่องของคุณ — สูตรคำนวณดูได้จากซอร์สโค้ดของหน้า
- EyeDropper API จะคืนเฉพาะสีที่คุณคลิกเองเท่านั้น เบราว์เซอร์เป็นผู้จัดการสิทธิ์ และไม่ยอมให้หน้าเว็บเห็นพิกเซลใดก็ได้ตามอำเภอใจ
- ไม่มีการล็อกอิน ไม่มี telemetry บนค่าสี ไม่มี API สีของบุคคลที่สาม เว็บไซต์สอดคล้องกับ GDPR ตั้งแต่เริ่มต้น
คู่มือที่เกี่ยวข้อง
บทเรียนที่คัดสรรสำหรับนักออกแบบ นักพัฒนา และทีมการเข้าถึง
-
OKLCH in CSS — A Practical Guide for 2026
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
-
WCAG 2.2 Contrast Ratios — How They're Calculated and What "AA" vs "AAA" Means
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
คำถามที่พบบ่อย
จะแปลง HEX เป็น RGB อย่างไร?
วางค่า hex ของคุณ (เช่น #ff5722) ในช่อง HEX — แถว RGB จะอัปเดตทันที เช่นเดียวกัน วาง rgb(255 87 34) ในช่อง RGB แล้ว HEX, HSL, OKLCH และ OKLAB จะซิงก์กันทั้งหมด การแปลงเป็นแบบสองทิศทางในทุกฟอร์แมตที่รองรับ
OKLCH คืออะไรและทำไมจึงควรใช้?
OKLCH เป็นพื้นที่สีใน CSS Color Module Level 4 ที่ใช้ความสว่างเชิงการรับรู้ (L), ความเข้มสี (C) และเฉดสี (h) — คล้าย HSL แต่สม่ำเสมอเชิงการรับรู้ สี OKLCH สองสีที่มีค่า L เท่ากันจะดูสว่างเท่ากัน แม้เฉดต่างกัน นั่นทำให้ดีไซน์โทเคน พาเลตต์ที่สร้างขึ้น และแรมป์สีที่เข้าถึงได้ คาดเดาง่ายกว่า HSL มาก เบราว์เซอร์ยุคใหม่ทุกตัว (Chrome 111+, Safari 15.4+, Firefox 113+) รองรับ
ผลลัพธ์คอนทราสต์ WCAG เชื่อถือได้ไหม?
ใช่ เราใช้อัลกอริทึมจาก WCAG 2.2 §1.4.3: linearize ช่อง sRGB แต่ละช่อง คำนวณความสว่างสัมพัทธ์ (0.2126·R + 0.7152·G + 0.0722·B) แล้ว (L_lighter + 0.05) / (L_darker + 0.05) AA ผ่านที่ 4.5 : 1 สำหรับข้อความปกติ และ 3 : 1 สำหรับข้อความขนาดใหญ่ (18 pt+ หรือ 14 pt+ ตัวหนา) AAA ผ่านที่ 7 : 1 และ 4.5 : 1 ตามลำดับ
เลือกสีจากภาพหรือแอปอื่นได้ไหม?
ได้ — คลิกปุ่ม EyeDropper เพื่อเรียก EyeDropper API ในตัวของเบราว์เซอร์ คุณสามารถเลือกพิกเซลใดก็ได้บนหน้าจอ: แท็บเบราว์เซอร์อื่น งานออกแบบ Figma เฟรมวิดีโอ หรือแม้แต่ภาพหน้าจอ ปัจจุบันรองรับบน Chrome, Edge และ Opera; Firefox และ Safari จะลดทอนอย่างนุ่มนวล (ปุ่มจะถูกปิดใช้งาน)
มีอะไรถูกส่งไปยังเซิร์ฟเวอร์ของคุณไหม?
ไม่มี ตัวเลือกสี การแปลงทุกครั้ง ตัวสร้างพาเลตต์ และตัวตรวจคอนทราสต์ ทำงานในเบราว์เซอร์ของคุณทั้งหมด ไม่มีค่าสี ตัวอย่างภาพ หรือข้อความใดถูกส่งออกไป คุณเปิด DevTools → Network เพื่อยืนยันได้ว่าไม่มีคำขอออกไปขณะใช้งาน