คำศัพท์สี

ลักษณะประจำตัวของสี — แดง, ส้ม, เหลือง, เขียว… กระจายตามมุมรอบวงล้อสี (0° คือแดง, 120° คือเขียว, 240° คือฟ้า) สิ่งที่คนหมายถึงเมื่อพูดว่า 'สีอะไร' คือเฉดสี

ระดับความสว่างหรือความมืดของสี ตั้งแต่สีดำบริสุทธิ์จนถึงสีขาวบริสุทธิ์ เฉดสีเดียวกัน สีขาวกว่าจะมีความสว่างมากกว่า สีดำกว่าจะมีความสว่างน้อยกว่า ความสว่างเป็นตัวกำหนดความสามารถในการอ่านและคอนทราสต์

ระดับความเข้มของสี — 0% คือสีเทา, 100% คือเฉดสีบริสุทธิ์ ความอิ่มตัวสูงจะดึงดูดสายตาแต่อาจทำให้เหนื่อยล้า อินเทอร์เฟซมักใช้ความอิ่มตัวสูงกับการดำเนินการหลักเท่านั้น

เฉดสีบริสุทธิ์ผสมกับสีขาวเรียกว่าทินต์, ผสมกับสีดำเรียกว่าเชด, ผสมกับสีเทาเรียกว่าโทน ชุดสีของแบรนด์คือลำดับทินต์/เชดที่ควบคุมได้

อุณหภูมิของแสงในหน่วยเคลวิน: ค่า K ต่ำจะเอียงไปทางสีส้ม (อบอุ่น), ค่า K สูงจะเอียงไปทางสีฟ้า (เย็น). โหมดอบอุ่นของหน้าจอจะลดอุณหภูมิของมันลงเท่านั้น

อัตราความสว่างระหว่างส่วนหน้าและพื้นหลัง, ตั้งแต่ 1:1 ถึง 21:1. WCAG กำหนดให้ต้องมีอย่างน้อย 4.5:1 สำหรับข้อความปกติ และอย่างน้อย 3:1 สำหรับข้อความขนาดใหญ่ — นี่คือเกณฑ์ขั้นต่ำสำหรับการเข้าถึง

อัลกอริทึมคอนทราสต์ที่เป็นตัวเลือกของ WCAG 3. มันพิจารณาขนาดตัวอักษร, น้ำหนัก และขั้ว และอ่านข้อความในโหมดมืดและข้อความที่มีคอนทราสต์ต่ำได้แม่นยำกว่า WCAG 2.1

ระบบพิกัดสำหรับสี. sRGB คือค่าเริ่มต้นสำหรับเว็บ, Display P3 ครอบคลุมสีได้มากกว่า, OKLCH จัดระเบียบสีตามการรับรู้ของมนุษย์

ช่วงสีทั้งหมดที่อุปกรณ์หรือพื้นที่สามารถแสดงได้. สีที่มีความอิ่มตัวสูงแบบนีออนมักอยู่นอกเหนือ sRGB — หน้าจอสามารถแสดงได้เพียงการประมาณที่ใกล้ที่สุดเท่านั้น

สัญกรณ์หกหลัก #RRGGBB; สี 24 บิต (ประมาณ 16.7 ล้านสี) คือพื้นที่สีของเว็บเอง

โมเดลสีเสริมแดง-เขียว-น้ำเงิน, แต่ละช่องมีค่าตั้งแต่ 0-255. วิธีที่หน้าจอปล่อยแสงทำให้ RGB เป็นโมเดลดั้งเดิมของโลกดิจิทัล

โมเดลสีลบไซยาน-แมเจนตา-เหลือง-ดำ, เป็นภาษาของงานพิมพ์. การแปลง RGB หน้าจอเป็น CMYK เป็นเพียงการประมาณทางทฤษฎีเท่านั้น — ไม่สามารถแทนที่ตัวอย่างสีทางกายภาพได้

ทรงกระบอกสีฮิว/ความอิ่มตัว/ความสว่าง ใช้งานง่ายกว่า RGB แต่มีข้อเสียคือไม่สม่ำเสมอ: ที่ความสว่าง 50% สีเหลืองจะดูสว่างกว่าสีน้ำเงินมาก

พื้นที่สีใหม่ที่สม่ำเสมอตามการรับรู้: ค่าความสว่างเท่ากันหมายถึงความสว่างที่รับรู้เท่ากัน การแทรกสีจะไม่ทำให้สีเทา — มาตรฐานใหม่สำหรับสเกลระบบดีไซน์ รองรับใน CSS โดยตรง

การเปลี่ยนแปลงตัวเลขสัดส่วนกับการเปลี่ยนแปลงที่รับรู้ ในพื้นที่ที่สม่ำเสมอ ความแตกต่าง 10 จะดูแตกต่างกันเท่า ๆ กันทุกที่ — พื้นฐานของ CIEDE2000 และ OKLCH

สูตรความแตกต่างของสีของ CIE ΔE แสดงระยะทางที่รับรู้: น้อยกว่า 1 แทบมองไม่เห็น, น้อยกว่า 5 ถือว่า 'สีเดียวกัน', มากกว่า 10 แตกต่างกันอย่างชัดเจน

ระบบสีจุดระดับโลก เป็นภาษากลางของงานพิมพ์และแฟชั่น แต่ละรหัสมีสูตรหมึกเฉพาะ การแสดงผลบนหน้าจอเป็นการจำลองเท่านั้น

ระบบสีมาตรฐานระดับชาติของเยอรมัน เป็นเกณฑ์มาตรฐานสำหรับการเคลือบอุตสาหกรรมและการพ่นผง — เช่น RAL 3020 สีแดงจราจร

ระบบของสวีเดนที่อธิบายสีด้วยความดำ, ความอิ่มตัวและฮิว นิยมใช้ในงานสถาปัตยกรรมและตกแต่งภายใน

ระบบเก่าแก่ศตวรรษที่จัดระเบียบตามสี ความสว่าง และความอิ่มตัว ยังคงเป็นมาตรฐานอย่างเป็นทางการสำหรับการจัดระดับดินและการเกษตร

จานสีที่ผู้ใช้ที่มีความบกพร่องทางการมองเห็นสี (ประมาณ 8% ของผู้ชาย) สามารถใช้งานได้: อย่าเข้ารหัสด้วยสีเพียงอย่างเดียว รักษาความคมชัด ตรวจสอบด้วยการจำลอง

สีที่ตั้งชื่อตามวัตถุประสงค์ ไม่ใช่ตามสี: หลัก/สำเร็จ/เตือน/อันตราย ความหมายทำให้สามารถสร้างธีมและโหมดมืดได้

สีที่เป็นที่จดจำมากที่สุดของแบรนด์หรืออินเทอร์เฟซ รองรับการดำเนินการหลักและการเน้น ปกติจะใช้น้อยกว่า 10% ของพื้นผิว - การใช้มากเกินไปจะทำให้ความโดดเด่นลดลง

จุดความคมชัดนอกเหนือจากสีหลัก: การใช้งานน้อยมาก (<5%) ที่มีความขัดแย้งของสีหรือความอิ่มตัวสูงสุด - จุดแจ้งเตือน ปุ่ม CTA

มาตราส่วนสีเทา: พื้นหลัง ตัวแบ่ง ข้อความหลักและข้อความรองทั้งหมดอยู่บนนั้น ความอบอุ่นหรือความเย็นของสีกลางจะกำหนดลักษณะของอินเทอร์เฟซทั้งหมด

สีแบรนด์ที่ขยายด้วยความสว่างเป็น 11 ระดับ (50-950) ซึ่งเป็นหลักของระบบการออกแบบ - การโฮเวอร์ ขอบ และโหมดมืดล้วนใช้สีภายในตระกูลเดียวกัน

สีที่อยู่ห่างกัน 180° บนวงล้อสี (แดง-เขียว, น้ำเงิน-ส้ม) เมื่อรวมกันจะช่วยเพิ่มความเข้มให้แก่กัน — เหมาะสำหรับการเน้นสี แต่จะขัดแย้งกันเมื่อใช้ในสัดส่วน 1:1

โทนสีที่อยู่ติดกัน 2 ถึง 4 โทน (น้ำเงิน, น้ำเงิน-เขียว, เขียว) มีความกลมกลืนและปลอดภัย แต่จะดูแบน — การเพิ่มสีเสริมคอมพลีเมนท์หนึ่งสีจะช่วยทำลายความเงียบ