Color wheel
ค่าสี
คลิกที่ค่าเพื่อคัดลอก
Contrast (WCAG)
ตัวอย่างข้อความ
—
Color palette
จากสีหลัก + โทนเสริม
ประวัติ (session)
เก็บในเบราว์เซอร์ของคุณ
Color picker · hex to rgb · palette · WCAG contrast
คลิกที่ค่าเพื่อคัดลอก
—
จากสีหลัก + โทนเสริม
เก็บในเบราว์เซอร์ของคุณ
สีในงานดิจิทัลสามารถแสดงได้หลายรูปแบบ แต่ละรูปแบบเหมาะกับการใช้งานที่แตกต่างกัน ผู้ที่ทำงานด้าน Web Design หรือ UI/UX ควรเข้าใจความแตกต่างเพื่อเลือกใช้ได้ถูกต้องตามบริบท
HEX (#RRGGBB) เป็นรูปแบบที่นิยมที่สุดใน CSS เพราะกระทัดรัด เช่น #3b82f6 คือสีน้ำเงิน สำหรับสี semi-transparent จะมี 8 หลัก เช่น #3b82f680 RGB (Red, Green, Blue) ระบุค่า 0-255 สำหรับแต่ละช่อง ใช้งานง่ายเมื่อต้องการ JavaScript คำนวณสีหรือสร้าง gradient แบบ dynamic และสามารถเพิ่ม Alpha (opacity) เป็น RGBA ได้ HSL (Hue, Saturation, Lightness) เป็นรูปแบบที่เหมาะกับนักออกแบบมากที่สุด เพราะสอดคล้องกับการรับรู้ของมนุษย์ Hue คือสีในวงสี (0-360 องศา) Saturation คือความอิ่มตัว และ Lightness คือความสว่าง ทำให้ปรับ theme สีของเว็บได้ง่ายโดยแค่เปลี่ยน Lightness โดยไม่ต้องแก้ RGB ทั้งหมด
ตัวอย่าง palette สำหรับเว็บ SaaS ทั่วไปที่ผ่าน WCAG AA: Primary #3b82f6 (น้ำเงิน, สีปุ่มหลัก), Primary Dark #1d4ed8 (สำหรับ hover state), Background #ffffff หรือ #f8fafc, Text #1e293b (contrast ratio > 10:1 บนพื้นขาว), Muted Text #64748b (contrast ratio 4.7:1 ผ่าน AA), Success #22c55e, Error #ef4444 ทุกสีควรผ่าน WCAG AA (contrast ratio ≥ 4.5:1 สำหรับข้อความเล็ก)
HSL (Hue, Saturation, Lightness) และ HSB/HSV (Hue, Saturation, Brightness/Value) ต่างกันในวิธีคำนวณ ใน HSL สีขาวคือ L=100% ส่วนใน HSV สีขาวคือ S=0%, V=100% Figma ใช้ HSB เป็นค่า default สำหรับ Color Picker ส่วน CSS ใช้ HSL ดังนั้นค่าที่ copy จาก Figma อาจต้องแปลงก่อนนำไปใช้ใน CSS
WCAG 2.1 มี 2 ระดับสำหรับ contrast: Level AA กำหนด contrast ratio อย่างน้อย 4.5:1 สำหรับข้อความปกติ (3:1 สำหรับข้อความขนาดใหญ่ ≥18pt) Level AAA กำหนดสูงขึ้นที่ 7:1 (4.5:1 สำหรับข้อความขนาดใหญ่) ส่วนใหญ่เป้าหมายคือผ่าน AA เป็นขั้นต่ำ เว็บไซต์ราชการและบริการสาธารณะมักต้องผ่าน AA ทุกหน้า
จอแสดงผลใช้ระบบสี RGB (additive color) ซึ่งสร้างสีโดยการรวมแสง ส่วนการพิมพ์ใช้ระบบ CMYK (subtractive color) ซึ่งสร้างสีโดยการดูดซับแสง สีบางสีอยู่ใน gamut ของ RGB แต่ไม่สามารถสร้างได้ด้วยหมึกพิมพ์ โดยเฉพาะสีน้ำเงินสด และสีเขียวสด ควรใช้ซอฟต์แวร์อย่าง Adobe Illustrator ที่รองรับ CMYK สำหรับงานพิมพ์
HEX (#RRGGBB) เป็นรูปแบบที่นิยมใช้ใน CSS และ HTML เนื่องจากกระทัดรัด เช่น #3b82f6 คือสีน้ำเงิน RGB (Red, Green, Blue) ระบุค่าสี 0-255 ใช้งานง่ายเมื่อต้องการปรับแต่งทางโปรแกรม ส่วน HSL (Hue, Saturation, Lightness) เหมาะที่สุดสำหรับนักออกแบบ เพราะสามารถปรับความสว่างและความอิ่มตัวของสีได้โดยตรงโดยไม่ต้องคำนวณ RGB ใหม่ทั้งหมด
WCAG contrast ratio คือมาตรฐานสากลสำหรับความสามารถในการอ่านของเนื้อหาเว็บ กำหนดโดย W3C เพื่อให้ผู้พิการทางสายตาสามารถอ่านเนื้อหาได้ มาตรฐาน WCAG 2.1 ระดับ AA กำหนดว่าข้อความปกติต้องมี contrast ratio อย่างน้อย 4.5:1 และข้อความขนาดใหญ่ต้องมีอย่างน้อย 3:1 การไม่ผ่านเกณฑ์นี้อาจทำให้เว็บไซต์ไม่ผ่านการตรวจสอบด้าน accessibility ซึ่งสำคัญมากในยุคปัจจุบัน
หลักการเลือกสีที่เข้าคู่กันมีหลายรูปแบบ เช่น Complementary (สีตรงข้ามในวงสี) Analogous (สีใกล้เคียงกัน) และ Triadic (สามสีที่ห่างกัน 120°) สำหรับเว็บไซต์ทั่วไปแนะนำให้ใช้สีหลัก 1 สี สีเสริม 1-2 สี และสีกลางสำหรับพื้นหลัง เครื่องมือ Color Picker นี้สร้าง palette อัตโนมัติจากสีที่เลือก ทำให้ง่ายต่อการหาสีที่ harmonious โดยไม่ต้องมีความรู้ด้าน color theory ลึกซึ้ง
ผู้พิการทางสายตาตาบอดสี (Color Blindness) มีประมาณ 8% ในผู้ชายและ 0.5% ในผู้หญิงทั่วโลก ประเภทที่พบมากที่สุดคือการแยกแยะสีแดง-เขียวไม่ได้ ดังนั้นการออกแบบที่ดีควรไม่ใช้สีเพียงอย่างเดียวเพื่อสื่อสารข้อมูล ควรมีรูปแบบ ไอคอน หรือข้อความประกอบด้วย นอกจากนี้ควรทดสอบ contrast ratio ระหว่างสีข้อความและพื้นหลังให้ผ่าน WCAG เพื่อให้ผู้ที่มีสายตาอ่อนแออ่านได้ง่าย