วิธีใช้ตัวเลือกสี hex
- คลิกช่องสีขนาดใหญ่เพื่อเปิดตัวเลือกสีของระบบ หรือพิมพ์โค้ดสี hex เช่น
#1E90FFหรือชื่อสี เช่นtomato - คัดลอกรูปแบบที่ต้องการ: HEX, RGB, HSL, HSV หรือ CMYK และคลิกช่องสีอ่อน สีเข้ม หรือชุดสีใดก็ได้เพื่อคัดลอกโค้ด hex ของสีนั้น
- ดูช่องคอนทราสต์เพื่อตรวจว่าข้อความสีขาวหรือสีดำบนสีของคุณผ่านเกณฑ์ WCAG ระดับ AA หรือ AAA หรือไม่
โค้ดสี hex ทำงานอย่างไร
โค้ดสี hex เช่น #FF6347 ประกอบด้วย 3 ไบต์ ได้แก่ แดง (FF = 255) เขียว (63 = 99) และน้ำเงิน (47 = 71) แต่ละช่องสีมีค่าตั้งแต่ 00 ถึง FF จึงได้สีที่เป็นไปได้ทั้งหมด 256 × 256 × 256 = 16,777,216 สี ถ้าทั้งสามค่าเท่ากันจะได้สีเทา – #000000 คือสีดำ #808080 คือสีเทากลาง และ #FFFFFF คือสีขาว – และยิ่งค่าสูง สีก็ยิ่งสว่าง
เฉดสีอ่อน สีเข้ม และชุดสีที่เข้ากัน
Tint คือสีของคุณที่ผสมกับสีขาว ส่วน shade คือสีของคุณที่ผสมกับสีดำ เครื่องมือนี้แสดงทั้งสองแบบทีละ 10% ซึ่งสะดวกมากสำหรับสถานะ hover เส้นขอบ และพื้นหลังที่ต้องเข้ากับสีแบรนด์
ชุดสี (color harmony) ได้จากการหมุนค่า hue รอบวงล้อสี โดยคงค่า saturation และ lightness ไว้เท่าเดิม:
- สีคู่ตรงข้าม (180°) – สีที่อยู่ตรงข้ามกันบนวงล้อ ให้คอนทราสต์สูง เหมาะกับปุ่ม call to action
- สีข้างเคียง (±30°) – สีที่อยู่ติดกันบนวงล้อ ให้ชุดสีที่สบายตาและกลมกลืน
- สีสามเส้า (±120°) – สามสีที่ห่างกันเท่า ๆ กัน ให้งานออกแบบที่สดใสแต่สมดุล
คอนทราสต์ของสีและมาตรฐาน WCAG
แนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) กำหนดให้ข้อความปกติมีอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับระดับ AA และ 7:1 สำหรับระดับ AAA ส่วนข้อความขนาดใหญ่ – 18 pt หรือ 14 pt ตัวหนา – ต้องการเพียง 3:1 สำหรับระดับ AA อัตราส่วนนี้เปรียบเทียบความสว่างสัมพัทธ์ (relative luminance) ของสีข้อความกับสีพื้นหลัง โดยมีค่าตั้งแต่ 1:1 (สีเดียวกัน) ถึง 21:1 (ดำบนขาว)
คำถามที่พบบ่อย
โค้ดสี hex คืออะไร?
โค้ดสี hex คือการระบุสีด้วยเลขฐานสิบหก 6 หลัก: สองหลักสำหรับสีแดง สองหลักสำหรับสีเขียว และสองหลักสำหรับสีน้ำเงิน เช่น #FF6347 (tomato) ซึ่ง CSS, HTML, โปรแกรมออกแบบ และโปรแกรมแต่งภาพต่างก็รองรับทั้งหมด
โค้ดสี hex แสดงสีได้กี่สี?
256 × 256 × 256 = 16,777,216 สี และถ้าเพิ่มค่า alpha อีกหนึ่งคู่ (#RRGGBBAA) แต่ละสีก็จะมีระดับความโปร่งใสได้อีก 256 ระดับ
รองรับชื่อสี CSS อะไรบ้าง?
รองรับชื่อสีทั้ง 148 สีของ CSS Color Module ตั้งแต่ aliceblue ถึง yellowgreen รวมถึง rebeccapurple พิมพ์ชื่อสีลงในช่อง hex หรือกรองรายการใต้เครื่องมือ แล้วคลิกสีที่ต้องการเพื่อเลือก