เครื่องเลือกสี HEX
นักออกแบบและนักพัฒนาต้องใช้สีเดียวกันในรูปแบบการแสดงผลทั้งสี่แบบถึงร้อยครั้งต่อวัน เพียงคลิกที่ตำแหน่งใดก็ได้ในช่องความอิ่มตัว/ค่าความเข้มของสี ลากสไลด์โทนสี หรือวางค่าลงมา เครื่องมือเลือกสีนี้จะแสดงค่า HEX, RGB, HSL, HSV และ CMYK อยู่ข้างกัน โดยมีการตรวจสอบความคมชัดตามมาตรฐาน WCAG เมื่อเปรียบเทียบกับภาพขาวดำ เพื่อให้ทราบได้ทันทีว่าสีนั้นอ่านเข้าใจได้ง่ายหรือไม่
วิธีการเลือกสี
-
1
เลือกโทนสี
ลากสไลด์โทนสีในแนวตั้งไปตามช่วง 0–360° ทั้งหมด
-
2
ระดับการอิ่มตัวของพิกเกอร์และค่า
คลิกหรือลากภายในสี่เหลี่ยม 2 มิติ เพื่อกำหนดระดับความชัดเจนและความสว่างของสี
-
3
ปรับแต่งให้เหมาะสมโดยใช้ข้อมูลนำเข้า
กรุณาป้อนค่าที่ถูกต้องในรูปแบบ HEX, RGB, HSL, HSV หรือ CMYK — ทั้งห้าฟิลด์จะถูกซิงโครไนซ์กันอยู่เสมอ
-
4
ตรวจสอบความสะดวกในการเข้าถึงและสำเนาข้อมูล
อัตราส่วนคอนทราสต์เมื่อเปรียบเทียบกับภาพขาวดำจะแสดงอยู่ในรูปแบบตรง; เพียงคลิกเดียวคุณก็สามารถคัดลอกสัญลักษณ์ที่ต้องการได้
การใช้สัญลักษณ์สีในการปฏิบัติจริง
แบบจำลองสีแต่ละแบบตอบคำถามที่แตกต่างกันเล็กน้อย
ข้อมูลอ้างอิงเกี่ยวกับระบบการเขียนสัญลักษณ์
| สัญลักษณ์ | องค์ประกอบ | สถานที่ใช้งาน |
|---|---|---|
| HEX | #RRGGBB | CSS, เครื่องมือออกแบบ, คู่มือแบรนด์ |
| RGB | สีแดง 0–255, สีเขียว 0–255, สีน้ำเงิน 0–255 | CSS rgb(), เครื่องมือแก้ไขภาพ |
| HSL | สี (0–360°), ความอิ่มตัว (%), ความสว่าง (%), | CSS hsl(), ระบบการออกแบบ |
| HSV/HSB | สีในช่วง 0–360°, ระดับความอิ่มตัว (%), ค่าความสว่าง (%): Photoshop และเครื่องมือเลือกสีของ Figma | |
| CMYK | ไซยาน %, มาเจนตา %, เหลือง %, สีหลัก/ดำ % | การพิมพ์ และการเตรียมสิ่งพิมพ์ก่อนการผลิต |
| OKLCH | สัดส่วนความเบา (%), คอลลา, เฮว | พาเลทจากโมดูลสีของ CSS รุ่นใหม่ เวอร์ชัน 4 |
การปรับความเข้าใจง่ายสำหรับผู้ใช้ที่มีความบกพร่องทางสายตา
WCAG 2.2 กำหนดอัตราส่วนความต่างของคอนทราสต์ขั้นต่ำระหว่างข้อความกับพื้นหลังไว้ดังนี้:
- ค่า AA สำหรับข้อความปกติ: ≥ 4.5:1
- รูปแบบ AA สำหรับข้อความขนาดใหญ่ (ตัวหนาขนาด 18 หรือ 14 พิกเตอร์): อัตราส่วน ≥ 3:1
- ค่า AAA สำหรับข้อความปกติ: ≥ 7:1
ตัวเลือกจะคำนวณอัตราส่วนระหว่างสีขาวและสีดำแบบเรียลไทม์ หากคุณต้องการใช้สีพื้นหลังเฉพาะ ควรใช้เครื่องตรวจสอบความต่างของสีที่ออกแบบมาโดยเฉพาะสำหรับแต่ละคู่
คำแนะนำ
- HEX เป็นค่าเริ่มต้นในเครื่องมือออกแบบส่วนใหญ่ อย่างไรก็ตาม รูปแบบเลขฐานสิบหกสามหลักที่ย่อ (เช่น
#F60) มีความหมายเท่ากับ#FF6600ไม่ใช่#F06060HSL ช่วยให้การสร้างพาเลทง่ายขึ้น: สามารถล็อกค่าโทนสี และปรับระดับความสว่างของสีต่างๆ ได้อย่างแม่นยำ - CMYK และ RGB ไม่สามารถแปลงรูปแบบกันได้อย่างสมบูรณ์ — การพิมพ์ในรูปแบบ CMYK ขึ้นอยู่กับโปรไฟล์เครื่องพิมพ์ ควรทำการพิมพ์ต้นฉบับเพื่อตรวจสอบคุณภาพบนกระดาษจริงเสมอ
- หากคุณออกแบบสำหรับ CSS รูปแบบสมัยใหม่ ควรพิจารณาใช้ OKLCH เพื่อให้ระดับความสว่างมีความสม่ำเสมอในแง่การรับรู้
คำถามที่พบบ่อย
Photoshop จะใช้โปรไฟล์สี (โดยทั่วไปคือ sRGB สำหรับการแสดงผลบนหน้าจอ และมักแตกต่างกันสำหรับการพิมพ์) เบราว์เซอร์จะแปลงค่า HEX ที่ไม่มีแท็กให้เป็น sRGB หากเอกสารของคุณถูกตั้งค่าเป็น Adobe RGB หรือ ProPhoto ค่าพิกเซลจะเหมือนกัน แต่สีที่รับรู้ได้จะเปลี่ยนไป
ใช่ — ทั้งสองตัวอธิบายสีแดงเต็มรูปแบบ โดยค่าสีแดงอยู่ที่ 255 ส่วนสีเขียวและสีน้ำเงินอยู่ที่ 0 เท่านั้น HEX เป็นระบบการเขียนฐานสิบหกสองหลักสำหรับค่าแต่ละช่องของช่องสีในช่วง 0–255
เลือกสีหลักของคุณ เปลี่ยนไปใช้ระบบ HSL จากนั้นปรับระดับความสว่างทีละ 10% โดยคงค่าโทนและระดับความอิ่มตัวไว้ไม่เปลี่ยนแปลง จะได้ชุดโทนสีที่เป็นระบบและต่อเนื่องกัน ซึ่งอยู่บนโทนเดียวกัน
สีที่ใช้ล่าสุดจะถูกเก็บไว้ในพื้นที่จัดเก็บภายในของเบราว์เซอร์ ทำให้ยังคงแสดงผลได้แม้จะรีเฟรชหน้าจอ ไม่มีข้อมูลใดถูกส่งไปยังเซิร์ฟเวอร์ และคุณสามารถลบประวัติการใช้พาเลทได้ทุกเมื่อ