คู่มือเรื่องสี
คู่มือสั้น ๆ ใช้งานได้จริงเรื่องสีบนหน้าจอ: รูปแบบสี คอนทราสต์ พาเลต โหมดมืด และ CSS ทุกตัวเลขคำนวณจริง ทุกตัวอย่างคัดลอกได้
- OKLCH คืออะไร: รูปแบบสีที่ตรงกับการมองเห็นของดวงตาจริง ๆOKLCH บอกสีด้วยสามอย่าง: สีนั้นดูสว่างแค่ไหน สดแค่ไหน และเป็นฮิวอะไร ต่างจาก HSL ตรงที่ค่าความสว่างเท่ากันจะดูสว่างเท่ากันจริงในทุกฮิว ทำให้การทำพาเลต สีตอน hover และคอนทราสต์ที่อ่านง่ายคาดเดาได้28 กันยายน 2569อ่าน 1 นาที
- APCA กับ WCAG 2: ควรเชื่อการตรวจคอนทราสต์แบบไหนอัตราส่วนคอนทราสต์ของ WCAG 2 คือสิ่งที่กฎหมายกำหนด ส่วน APCA เป็นโมเดลใหม่ที่คาดการณ์ความอ่านง่ายได้แม่นกว่ามาก โดยเฉพาะโหมดมืดและสีที่อิ่มตัวสูง ตรวจทั้งสองแบบจะได้ข้อความที่ทั้งผ่านมาตรฐานและอ่านง่ายจริง28 กันยายน 2569อ่าน 1 นาที
- ขอบเขตสี (gamut) คืออะไร: sRGB, Display P3 และสีที่อยู่นอกขอบเขตขอบเขตสี (gamut) คือชุดของสีที่หน้าจอหรือปริภูมิสีหนึ่งแสดงได้ เว็บถูกสร้างบน sRGB แต่ปัจจุบันมือถือส่วนใหญ่และแล็ปท็อปหลายรุ่นแสดง Display P3 ได้ ซึ่งมีแดง เขียว และส้มที่สดกว่าอย่างเห็นได้ชัด28 กันยายน 2569อ่าน 1 นาที
- รูปแบบรหัสสีทั้งหมด: HEX, RGB, HSL, OKLCH และอื่น ๆสีเดียวกันเขียนได้เป็นสิบแบบ บทความนี้อธิบายว่าแต่ละรูปแบบหมายถึงอะไร ควรใช้เมื่อไร และสีเดียวกันหน้าตาเป็นอย่างไรในทุกรูปแบบ28 กันยายน 2569อ่าน 1 นาที
- รหัสสี HEX คืออะไร: #RRGGBB ทำงานอย่างไรรหัสสี HEX อย่าง #1e90ff คือเลขฐานสิบหกสามคู่ บอกปริมาณแสงสีแดง เขียว และน้ำเงิน แต่ละคู่ตั้งแต่ 00 (ไม่มีเลย) ถึง ff (เต็มที่ คือ 255) เพิ่มคู่ที่สี่เพื่อกำหนดความทึบแสง: 80 คือประมาณ 50% ส่วน ff คือทึบเต็มที่28 กันยายน 2569อ่าน 3 นาที
- วิธีเลือกพาเลตสีสำหรับเว็บไซต์หรือแอปเริ่มจากสีแบรนด์สีเดียว สร้างสเกล 50 ถึง 950 จากสีนั้น เพิ่มสีเทาที่อมสีแบรนด์เล็กน้อยและสีสถานะอีกสี่สี จากนั้นทดสอบคอนทราสต์และภาวะตาบอดสีของทุกคู่ตัวอักษรกับพื้นหลัง เลือกระดับจากค่าความสว่าง OKLCH ไม่ใช่ด้วยสายตา บนพื้นขาว ตัวอักษรจะผ่าน WCAG AA เมื่อความสว่างลดลงเหลือราว 0.55 ไม่ว่าจะเป็นฮิวใดก็ตาม28 กันยายน 2569อ่าน 2 นาที
- สีสำหรับโหมดมืด: วิธีเลือกสีพื้นหลัง ตัวอักษร และสีเน้นใช้พื้นหลังสีเทาเข้ม เช่น #121212 แทนสีดำล้วน ใช้ตัวอักษรสีขาวนวล เช่น #e5e5e5 แทนสีขาวล้วน และใช้สีแบรนด์ในเวอร์ชันที่สว่างขึ้นและสดน้อยลง ตรวจตัวอักษรด้วย APCA ควบคู่กับ WCAG 2 เพราะ WCAG 2 ประเมินคอนทราสต์บนพื้นหลังสีเข้มสูงเกินจริง28 กันยายน 2569อ่าน 2 นาที
- การจับคู่สีตามทฤษฎีสี: สีคู่ตรงข้าม สีข้างเคียง สีสามเส้า และอื่น ๆการจับคู่สี (color harmony) คือการเลือกฮิวที่มุมคงที่บนวงล้อสี: ห่างกัน 180° สำหรับสีคู่ตรงข้าม ห่างกัน 30° สำหรับสีข้างเคียง ห่างกัน 120° สำหรับสีสามเส้า ถ้าหมุนฮิวใน OKLCH แทน HSL ทุกสีจะสว่างเท่ากัน จึงไม่มีสีไหนเด่นขึ้นมาโดยไม่ตั้งใจ28 กันยายน 2569อ่าน 2 นาที
- CSS color-mix() และ relative color: สีอ่อน สี hover และความโปร่งใสcolor-mix() ผสมสองสีในปริภูมิสีที่คุณเลือก ส่วน relative color syntax ให้คุณแก้ช่องสีเดียวของสีที่มีอยู่ เช่น oklch(from var(--brand) calc(l - 0.1) c h) ทั้งสองทำงานในเบราว์เซอร์ ใช้กับตัวแปร CSS ได้ และใช้แทนฟังก์ชันสีของ Sass ได้เกือบทั้งหมด ผสมใน oklab สำหรับสีอ่อนและสี hover และผสมใน srgb สำหรับความโปร่งใส28 กันยายน 2569อ่าน 3 นาที
- พาเลตสีสำหรับคนตาบอดสี: วิธีตรวจและแก้สีของคุณพาเลตสีที่เป็นมิตรกับคนตาบอดสีต้องทำให้ทุกคู่สียังแยกออกจากกันได้ ทั้งในภาวะ Protanopia, Deuteranopia, Tritanopia และในภาพโทนเทา วิธีแก้ที่ได้ผลที่สุดไม่ใช่ฮิวพิเศษ แต่คือช่องว่างของความสว่าง สีที่ความสว่าง OKLCH ต่างกันราว 0.2 ยังแยกออกจากกันได้ในทุกการจำลองที่เราทดสอบ ใช้ร่วมกับไอคอนหรือข้อความกำกับเสมอ เพราะการใช้สีเพียงอย่างเดียวจะมีคนที่มองไม่ออกเสมอ28 กันยายน 2569อ่าน 2 นาที
- สี Tailwind CSS: พาเลต OKLCH ของ v4 สีกำหนดเอง และระดับสีTailwind CSS v4 มาพร้อมสเกลสี 26 ชุด ชุดละ 11 ระดับ ตั้งแต่ 50 ถึง 950 รวมเป็น 286 สีที่กำหนดด้วย OKLCH เป็นตัวแปร CSS เช่น --color-blue-500 คุณเพิ่มสีของตัวเองได้ด้วย @theme { --color-brand-500: oklch(...) } เลขระดับเดียวกันไม่ได้แปลว่าความสว่างเท่ากัน blue-600 คือสีน้ำเงินที่สว่างที่สุดที่ผ่าน 4.5:1 บนพื้นขาว ขณะที่สีเหลืองต้องใช้ 70028 กันยายน 2569อ่าน 3 นาที