เครื่องมือเลือกสีและสร้างพาเลตสี

สีทุกสีบนหน้าจอบรรยายได้สามแบบ และเครื่องมือนี้ทำให้ทั้งสามแบบตรงกันเสมอ HEX คือรูปแบบย่อที่ใช้ใน CSS และเครื่องมือออกแบบ RGB บอกว่าแสงสีแดง เขียว และน้ำเงินผสมกันมากน้อยเพียงใดจึงได้สีนั้น ส่วน HSL ซึ่งหมายถึงเฉดสี ความอิ่มตัว และความสว่าง บรรยายสีแบบที่คนเรานึกถึงจริง ๆ ว่าเป็นเฉดไหน สดแค่ไหน และสว่างหรือมืดเพียงใด จะลากช่องสีของระบบ พิมพ์รหัส HEX หรือปรับช่อง R/G/B หรือ H/S/L โดยตรงก็ได้ ช่องอื่น ๆ ทุกช่องจะอัปเดตทันที คุณจึงสลับไปมาตามวิธีคิดที่ถนัดได้โดยไม่ต้องคำนวณเอง

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

พาเลตสีที่ดีไม่ได้เริ่มจากทฤษฎีสีเสมอไป บางครั้งก็แค่อยากรู้ว่าจะได้อะไรออกมา ตัวสร้างพาเลตสีสุ่ม (กด Space หรือคลิกสร้าง) สร้างห้าสีพร้อมกัน โดยปรับเฉดและความสว่างเพื่อไม่ให้ได้สีขุ่นหรือพาสเทลจัดเกินไป คลิกไอคอนล็อกบนสีที่อยากเก็บไว้ แล้วสร้างอีกครั้ง เฉพาะสีที่ไม่ได้ล็อกเท่านั้นที่จะเปลี่ยน คุณจึงค่อย ๆ ประกอบพาเลตสีได้แบบเดียวกับเครื่องมืออย่าง Coolors คลิกสีใดก็ได้เพื่อคัดลอกรหัส HEX หรือใช้ปุ่มใต้พาเลตสีเพื่อคัดลอกทั้งชุดเป็น CSS custom properties, ตัวแปร SCSS, ส่วนคอนฟิก Tailwind หรืออาร์เรย์ JSON หรือส่งออกไฟล์สวอตช์ Adobe .ase สำหรับ Illustrator และ Photoshop ก็ได้ นอกจากนี้ยังดึงพาเลตสีจากรูปภาพใดก็ได้ (ประมวลผลในเครื่อง ไม่อัปโหลด) และบันทึกพาเลตสีที่ชอบไว้ในเบราว์เซอร์เพื่อใช้ภายหลัง

สีที่ดูสวยไม่ได้แปลว่าใช้งานได้จริงเสมอไป ข้อความที่มีสีใกล้เคียงกับพื้นหลังเกินไปอาจอ่านไม่ออก และแนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) กำหนดเกณฑ์ไว้ชัดเจน คืออัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความปกติจึงจะผ่านระดับ AA และ 7:1 สำหรับระดับ AAA ที่เข้มงวดกว่า เครื่องมือตรวจสอบคอนทราสต์คำนวณอัตราส่วนที่แน่นอนระหว่างสีที่คุณเลือกกับตัวอักษรสีขาวและสีดำ โดยใช้สูตรความสว่างสัมพัทธ์เดียวกับที่ WCAG กำหนด และบอกว่าแต่ละคู่สีผ่านหรือไม่ คุณจึงพบปุ่มหรือหัวข้อที่คอนทราสต์ต่ำได้ก่อนเผยแพร่ ไม่ใช่หลังจากนั้น