วิธีใช้งาน
- ป้อนสี เช่น #0f766e, rgb(15 118 110), hsl(175 77% 26%), oklch(…) หรือเลือกจากตัวเลือกสี
- คัดลอกรูปแบบที่ต้องการจากรายการ
- ตั้งสีพื้นหลังเพื่อดูอัตราคอนทราสต์และผล WCAG AA/AAA
- คลิกเฉดสีในชุดเพื่อใช้งาน
คำอธิบายตัวเลือก
- HEX / RGB
- สีหน้าจอเป็นแดง เขียว น้ำเงินตั้งแต่ 0–255 #rrggbbaa และ rgb(… / 50%) เพิ่มความโปร่งใส
- HSL / HSV
- เฉดสี ความอิ่มตัว และความสว่าง (หรือค่า) เหมาะสำหรับทำสีให้สว่างหรือเข้มขึ้นด้วยมือ
- OKLCH
- พื้นที่สีเชิงการรับรู้ใน CSS Color 4 การเปลี่ยนความสว่างจะคงเฉดสีและความสดที่รับรู้ไว้ จึงเหมาะกับพาเลตและธีมมืด
- CMYK
- การแปลงอย่างง่ายเพื่อใช้อ้างอิง สีพิมพ์จริงขึ้นกับโปรไฟล์สีของเครื่องพิมพ์ จึงควรขอค่าที่แน่นอนจากร้านพิมพ์
- อัตราคอนทราสต์
- WCAG 2.2 ต้องการ 4.5:1 สำหรับข้อความปกติและ 3:1 สำหรับข้อความใหญ่ (18pt หรือ 14pt ตัวหนา) ในระดับ AA และ 7:1 กับ 4.5:1 ในระดับ AAA
ตัวอย่าง
#0f766e คือ rgb(15 118 110), hsl(175 77% 26%) และ oklch(51.1% 0.086 186.4) บนพื้นหลังสีขาว อัตราคอนทราสต์ประมาณ 5.5:1 ซึ่งผ่าน WCAG AA สำหรับข้อความทุกขนาด
สีที่ใช้บ่อยในทุกรูปแบบ
สีที่มีชื่อใน CSS และค่าของสีเหล่านั้น CMYK ในที่นี้เป็นการแปลงทางคณิตศาสตร์อย่างง่าย สำหรับงานพิมพ์มืออาชีพ ให้ใช้ค่า CMYK จากโปรไฟล์สีของเครื่องพิมพ์
| ชื่อใน CSS | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| red | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0%, 100%, 100%, 0% |
| orange | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0%, 35%, 100%, 0% |
| gold | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0%, 16%, 100%, 0% |
| green | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100%, 0%, 100%, 50% |
| teal | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100%, 0%, 0%, 50% |
| blue | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100%, 100%, 0%, 0% |
| navy | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100%, 100%, 0%, 50% |
| purple | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0%, 100%, 0%, 50% |
| hotpink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0%, 59%, 29%, 0% |
| brown | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0%, 75%, 75%, 35% |
| gray | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0%, 0%, 0%, 50% |
ควรใช้รูปแบบไหน
HEX เป็นวิธีเขียนสีที่สั้นที่สุดใน CSS และเครื่องมือออกแบบ ใช้เลขฐานสิบหกสองหลักสำหรับแต่ละสีแดง เขียว และน้ำเงิน
RGB คือข้อมูลเดียวกันในรูปทศนิยม และ rgb(255 0 0 / 50%) เพิ่มความโปร่งใส
HSL อธิบายสี ความอิ่มตัว และความสว่าง ทำให้สร้างเฉดที่อ่อนหรือเข้มขึ้นของสีเดียวกันได้ง่ายโดยเปลี่ยนเฉพาะตัวเลขสุดท้าย
OKLCH เป็นรูปแบบ CSS ใหม่ที่ความสว่างเปลี่ยนไปเท่ากันในแต่ละขั้นจะดูต่างกันเท่ากันในสายตา มีประโยชน์สำหรับชุดสีที่เข้าถึงได้
คำถามที่พบบ่อย
อัตราคอนทราสต์ที่ดีสำหรับข้อความคือเท่าไร
อย่างน้อย 4.5:1 สำหรับข้อความเนื้อหา (WCAG AA) สีดำสนิทบนขาวคือ 21:1 ส่วนเทา #767676 บนขาวที่ใช้บ่อยคือ 4.54:1 ผ่านพอดี
ทำไมค่า CMYK ต่างจาก Photoshop
Photoshop แปลงผ่านโปรไฟล์สี ICC ของแท่นพิมพ์และกระดาษเฉพาะ เครื่องมือนี้ใช้สูตรคณิตศาสตร์ทั่วไป เหมาะกับการประมาณแต่ไม่ใช่การทำปรู๊ฟ
HSL กับ OKLCH ต่างกันอย่างไร
HSL เป็นการจัดเรียงค่า RGB ใหม่ สีเหลืองกับน้ำเงินที่มีความสว่างเท่ากันจึงดูสว่างไม่เท่ากัน OKLCH ออกแบบให้ความสว่างเท่ากันดูสว่างเท่ากัน
ใช้ OKLCH ใน CSS ตอนนี้ได้ไหม
ได้ oklch() ทำงานในเบราว์เซอร์หลักรุ่นปัจจุบันทั้งหมด
ความเป็นส่วนตัว
เครื่องมือนี้ทำงานในเบราว์เซอร์ของคุณทั้งหมด ไฟล์และข้อความของคุณได้รับการประมวลผลบนอุปกรณ์ของคุณ และจะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ของเรา