ทำอะไรได้
ตัวแปลงสีรับสีในรูปแบบ CSS ที่ใช้กันทั่วไป แล้วแสดงในรูปแบบอื่นทั้งหมดพร้อมกัน ได้แก่ HEX, RGB, HSL, HSV และ CMYK นอกจากนี้ยังแสดงแถบพรีวิวสี ชื่อสี CSS เมื่อมีชื่อที่ตรงกันพอดี และอัตราคอนทราสต์เทียบกับสีขาวและสีดำ เพื่อให้คุณตรวจความอ่านง่ายได้
วิธีใช้งาน
- พิมพ์หรือวางสีลงในช่อง สี หรือใช้ตัวเลือกสีที่อยู่ข้าง ๆ
- ทุกรูปแบบจะอัปเดตขณะที่คุณพิมพ์ คลิก คัดลอก ข้างรูปแบบที่ต้องการ
- เปิด HEX ตัวพิมพ์ใหญ่ หากสไตล์ไกด์ของคุณเขียน HEX เป็นตัวพิมพ์ใหญ่
- ตรวจแถวคอนทราสต์ก่อนนำสีไปใช้กับข้อความ: ป้ายสีเขียวหมายความว่าผ่าน WCAG AA
ตัวอย่าง
#1e90ff คือสี CSS dodgerblue แปลงได้เป็น:
- RGB:
rgb(30, 144, 255) - HSL:
hsl(210, 100%, 55.9%) - HSV:
hsv(210, 88.2%, 100%) - CMYK:
cmyk(88%, 44%, 0%, 0%)
คอนทราสต์บนพื้นขาวคือ 3.24:1 ซึ่งพอสำหรับหัวข้อขนาดใหญ่ แต่ไม่พอสำหรับข้อความเนื้อหา
โมเดลสีโดยย่อ
- HEX และ RGB บอกปริมาณแสงสีแดง เขียว และน้ำเงินที่หน้าจอเปล่งออกมา เป็นรูปแบบที่เบราว์เซอร์และเครื่องมือออกแบบใช้ภายใน
- HSL บอกเฉดสี (มุมบนวงล้อสี) ความอิ่มตัว และความสว่าง ทำให้สร้างเฉดที่อ่อนลงหรือเข้มขึ้นของสีเดียวกันได้ง่าย
- HSV (หรือ HSB) ใช้ในตัวเลือกสีของซอฟต์แวร์ออกแบบส่วนใหญ่
- CMYK บอกปริมาณหมึกสีฟ้า บานเย็น เหลือง และดำสำหรับงานพิมพ์
สีที่มีความโปร่งใส เช่น #1e90ff80 หรือ rgb(30 144 255 / 50%) จะแสดงพร้อมช่อง alpha ใน HEX, RGB และ HSL
คำถามที่พบบ่อย
› แปลง HEX เป็น RGB อย่างไร?
แบ่งเลขฐานสิบหกหกหลักออกเป็นสามคู่ แล้วอ่านแต่ละคู่เป็นตัวเลข 0 ถึง 255 สำหรับ #1e90ff จะได้ 1e = 30, 90 = 144 และ ff = 255 จึงเป็น rgb(30, 144, 255) เครื่องมือนี้คำนวณให้ทันทีขณะที่คุณพิมพ์
› วางรูปแบบใดได้บ้าง?
HEX ที่มีหรือไม่มี # (3, 4, 6 หรือ 8 หลัก), rgb() และ rgba(), hsl() และ hsla() ทั้งแบบคั่นด้วยจุลภาคและช่องว่าง, ค่าเปอร์เซ็นต์, หน่วยมุมอย่าง deg และ turn รวมถึงชื่อสี CSS ทั้ง 148 ชื่อ
› อัตราคอนทราสต์หมายถึงอะไร?
คือค่าคอนทราสต์ตาม WCAG 2 ระหว่างสีนั้นกับพื้นหลังสีขาวหรือสีดำ ข้อความเนื้อหาต้องมีอย่างน้อย 4.5:1 สำหรับระดับ AA ส่วนข้อความขนาดใหญ่ (ประมาณ 24px หรือ 19px ตัวหนา) ต้องมี 3:1
› ทำไม CMYK เป็นค่าโดยประมาณเท่านั้น?
เครื่องพิมพ์ใช้โปรไฟล์หมึกที่ขึ้นกับกระดาษและเครื่องพิมพ์ CMYK ที่แสดงที่นี่ใช้สูตรมาตรฐานที่ไม่ขึ้นกับอุปกรณ์ เหมาะเป็นจุดเริ่มต้น แต่ใช้แทนโปรไฟล์งานพิมพ์ไม่ได้