บทความ

เครื่องมือจัดการสีสำหรับเว็บ: hex ชุดสี และการเข้าถึง

การเลือกสีให้เว็บไซต์ดูเหมือนเรื่องง่าย จนกระทั่งคุณต้องเจอกับโค้ด hex, ค่า RGB สามตัว และมุม HSL ที่ล้วนอธิบายสิ่งเดียวกันด้วยวิธีต่างกัน บทความนี้อธิบายว่ารูปแบบเหล่านี้เกี่ยวข้องกันอย่างไร วิธีเปลี่ยนสีแบรนด์เพียงสีเดียวให้กลายเป็นชุดสีที่ใช้ได้ และวิธีทำให้แน่ใจว่าผลลัพธ์ยังอ่านง่ายสำหรับคนที่มองเห็นสีต่างออกไป

เขียนโดย Bastien Sulyan · เผยแพร่เมื่อ 21 มิถุนายน 2569

hex, RGB และ HSL อธิบายสีเดียวกัน

สีบนหน้าจอเกิดจากการผสมแสงสีแดง เขียว และน้ำเงิน รูปแบบ hex เขียนสามช่องสัญญาณนี้เป็นโค้ดหกตัวอักษร เช่น #2563eb โดยอักษรแต่ละคู่คือหนึ่งช่องสัญญาณตั้งแต่ 00 ถึง ff ส่วน RGB เขียนตัวเลขสามค่าเดียวกันในระบบฐานสิบ ตั้งแต่ 0 ถึง 255 ซึ่งอ่านง่ายกว่าแต่ไม่ได้บอกอะไรเพิ่ม HSL มองอีกแบบหนึ่ง โดยอธิบายสีด้วยเฉดสี (ตำแหน่งบนวงล้อสีตั้งแต่ 0 ถึง 360 องศา) ความอิ่มตัว (สดแค่ไหน) และความสว่าง (ใกล้ขาวหรือดำเพียงใด) HSL คือรูปแบบที่นักออกแบบหยิบมาใช้เมื่ออยากปรับสีเล็กน้อย เพราะการเพิ่มความสว่างหรือเลื่อนเฉดสีเป็นการเปลี่ยนแปลงเดียวที่เข้าใจง่าย แทนที่จะเป็นตัวเลขสามค่าที่ผูกกัน ตัวแปลงช่วยให้คุณสลับไปมาระหว่างทั้งสามได้ คุณจึงอ่านค่าในรูปแบบหนึ่งแล้วนำไปใช้ในอีกรูปแบบหนึ่ง

สีอำพันเดียวกันเขียนได้สามแบบ คือ hex #E8A33D, rgb(232, 163, 61) และ hsl(36, 79%, 57%)

เปลี่ยนสีเดียวให้เป็นชุดสี

สีแบรนด์เพียงสีเดียวมักไม่พอ ชุดสีที่ใช้ได้จริงมักต้องมีสีหลัก สีเน้นหนึ่งหรือสองสี และชุดสีเทากลางสำหรับข้อความและพื้นหลัง ความสัมพันธ์ระหว่างสีเป็นไปตามกฎง่ายๆ บนวงล้อสี สีคู่ตรงข้ามอยู่ตรงข้ามกัน สีใกล้เคียงอยู่ติดกันเพื่อความรู้สึกสงบ และชุดสามสีกระจายสามสีอย่างสม่ำเสมอเพื่อให้เกิดความตัดกันโดยไม่ขัดกัน เครื่องมือจัดชุดสีนำกฎเหล่านี้ไปใช้กับสีตั้งต้นของคุณและให้โค้ด hex ที่เข้ากัน คุณจึงไม่ต้องคำนวณองศาด้วยมือ ถ้าคุณมีรูปภาพที่ชอบบรรยากาศอยู่แล้ว เครื่องมือดึงชุดสีจะอ่านสีหลักออกมาจากรูปนั้น ซึ่งเป็นวิธีรวดเร็วในการตั้งต้นเว็บไซต์จากภาพถ่ายหรือโลโก้

ความตัดกันและภาวะตาบอดสี

ชุดสีที่ดูดีบนจอของคุณก็ยังอาจใช้ไม่ได้กับผู้อ่าน ราวหนึ่งในสิบสองของผู้ชายและหนึ่งในสองร้อยของผู้หญิงมีภาวะการมองเห็นสีบกพร่องในรูปแบบใดรูปแบบหนึ่ง ที่พบบ่อยที่สุดคือแยกสีแดงจากสีเขียวได้ยาก ถ้าสัญญาณเดียวที่บอกข้อผิดพลาดคือข้อความสีแดงบนปุ่มสีเขียว ผู้อ่านเหล่านั้นก็จะมองไม่เห็น ทางแก้ไม่ใช่การเลี่ยงสี แต่คือการไม่พึ่งสีเพียงอย่างเดียว ให้จับคู่กับไอคอน ป้ายกำกับ หรือรูปทรง และคงความตัดกันของความสว่างระหว่างข้อความกับพื้นหลังให้พอ ตัวจำลองภาวะตาบอดสีจะแสดงให้เห็นว่าชุดสีของคุณดูเป็นอย่างไรภายใต้การมองเห็นสีแบบที่พบบ่อย คุณจึงจับปัญหาได้ก่อนเผยแพร่ แทนที่จะหลังจากมีคนร้องเรียน

ตัวอย่างข้อความสองแบบบนการ์ดพื้นเข้ม ข้อความคอนทราสต์ต่ำที่ไม่ผ่าน WCAG AA ต่ำกว่า 4.5:1 และข้อความที่อ่านง่ายซึ่งผ่านที่ 4.5:1 ขึ้นไป

ทำทั้งหมดนี้ในเบราว์เซอร์

ขั้นตอนเหล่านี้ไม่มีขั้นใดต้องใช้เซิร์ฟเวอร์ การแปลงโค้ด hex การสร้างชุดสี การอ่านสีออกจากรูปภาพ และการจำลองภาวะตาบอดสี ล้วนเป็นการคำนวณเล็กๆ ที่เบราว์เซอร์จัดการได้ทันที นั่นสำคัญเมื่อรูปที่คุณดึงสีคืองานออกแบบที่ยังไม่เผยแพร่หรือโลโก้ของลูกค้า ด้วยเครื่องมือที่นี่ ไฟล์ยังอยู่บนอุปกรณ์ของคุณและไม่มีอะไรถูกอัปโหลด คุณได้ผลลัพธ์เดียวกับที่จะได้จากบริการออนไลน์ โดยไม่ต้องส่งมอบผลงาน ตัวแปลงสี ตัวสร้างชุดสี เครื่องมือดึงชุดสี และตัวจำลองภาวะตาบอดสีทำงานในเครื่องทั้งหมด และทำงานแบบเดียวกันแม้ออฟไลน์เมื่อหน้าโหลดเสร็จแล้ว

OKLCH และพื้นที่สีที่กว้างขึ้น

Hex, RGB และ HSL ล้วนอธิบายสีในกรอบ sRGB ที่หน้าจอใช้งานมาหลายปี จอแสดงผลรุ่นใหม่แสดงสีได้มากกว่านั้น และ CSS สามารถเข้าถึงสีเหล่านั้นได้ด้วยฟังก์ชัน color() และพื้นที่สี Display P3 ซึ่งเพิ่มสีเขียวและสีแดงที่สดกว่าที่ sRGB ไม่สามารถแสดงได้ การเปลี่ยนแปลงที่ใหญ่กว่าคือ OKLCH ซึ่งเป็นวิธีเขียนสีในรูปแบบของความสว่าง ความอิ่มตัว และโทนสี ที่สอดคล้องกับการรับรู้ความสว่างของตามนุษย์จริง ๆ ใน HSL สีเหลืองและสีน้ำเงินที่ความสว่าง 50% เท่ากันกลับดูต่างกันมาก: สีเหลืองดูสว่าง ส่วนสีน้ำเงินดูมืด ใน OKLCH การล็อกค่าความสว่างและเปลี่ยนเฉพาะโทนสีจะรักษาความสว่างที่รับรู้ได้ให้คงที่ ทำให้สามารถสร้างชุดสีที่ทุกเฉดสีมีค่าความเปรียบต่างเท่ากันได้ด้วยการล็อกตัวเลขเพียงตัวเดียว แทนที่จะต้องปรับแต่งสีทีละสี

เครื่องมือที่กล่าวถึงในบทความนี้

คำถามที่พบบ่อย

hex กับ RGB ต่างกันอย่างไร?

ทั้งสองเป็นสองวิธีในการเขียนสีเดียวกัน hex รวมช่องสัญญาณแดง เขียว และน้ำเงินไว้ในโค้ดหกตัวอักษรฐานสิบหก ส่วน RGB ระบุช่องสัญญาณสามช่องเดียวกันเป็นเลขฐานสิบตั้งแต่ 0 ถึง 255 ค่า #ff0000 และ rgb(255, 0, 0) เป็นสีแดงเดียวกันทุกประการ hex กระชับและพบได้ทั่วไปใน CSS และไฟล์งานออกแบบ ส่วน RGB อ่านได้ง่ายเมื่อมองผ่านๆ และการแปลงระหว่างทั้งสองไม่ได้เปลี่ยนตัวสีเองเลย

ฉันจะรู้ได้อย่างไรว่าสีของฉันอ่านง่ายสำหรับผู้ใช้ที่ตาบอดสี?

นำชุดสีของคุณผ่านตัวจำลองภาวะตาบอดสี ซึ่งจะวาดสีของคุณใหม่ตามที่คนที่มีการมองเห็นสีแต่ละแบบที่พบบ่อยจะเห็น คอยสังเกตคู่สีที่ยุบรวมเป็นเฉดเดียวกัน โดยเฉพาะสีแดงและสีเขียว นิสัยที่ปลอดภัยที่สุดคือไม่ใช้สีเป็นสัญญาณเดียว ให้หนุนด้วยข้อความ ไอคอน หรือลวดลาย และคงความต่างของความสว่างที่ชัดเจนระหว่างฉากหน้ากับพื้นหลัง เพื่อให้ความหมายยังคงอยู่แม้เฉดสีจะไม่ส่งผ่านก็ตาม