ตัวเลือกสี

WCAG (Web Content Accessibility Guidelines) กำหนดอัตราส่วนความต่างของสีขั้นต่ำระหว่างข้อความและพื้นหลังเพื่อให้แน่ใจว่าผู้อ่านที่มีสายตาเลือนรางหรือตาบอดสีสามารถอ่านได้ AA เป็นเกณฑ์ขั้นต่ำทางกฎหมายในพื้นที่ส่วนใหญ่: 4.5:1 สำหรับข้อความปกติ (ขนาดเล็กกว่า 18pt/14pt bold), 3:1 สำหรับข้อความขนาดใหญ่ AAA คือมาตรฐานที่ยกระดับขึ้น: 7:1 สำหรับข้อความปกติ, 4.5:1 สำหรับข้อความขนาดใหญ่ ประมาณ 8% ของผู้ชายและ 0.5% ของผู้หญิงมีความบกพร่องในการมองเห็นสีบางประเภท การปฏิบัติตามเกณฑ์ contrast จึงเป็นสิ่งสำคัญสำหรับผลิตภัณฑ์ที่เปิดสู่สาธารณะ เครื่องมือตรวจสอบที่นี่จะทดสอบทั้งสีข้อความและพื้นหลังพร้อมกัน และแสดงว่าการจับคู่ใดผ่านหรือไม่ผ่าน

ทั้งสองใช้ Hue (0-360 องศา) และ Saturation แต่ต่างกันในช่องที่สาม HSL (Lightness) กำหนดให้ 50% เป็นสีอิ่มตัวบริสุทธิ์, 0% เป็นสีดำ และ 100% เป็นสีขาว — ทำให้ใช้งานง่ายสำหรับ CSS และการออกแบบ HSV (Value/Brightness) กำหนดให้ 100% Value เป็นสีอิ่มตัวบริสุทธิ์และ 0% เป็นสีดำ — ไม่มีสีขาวบริสุทธิ์ใน HSV เว้นแต่ Saturation จะเป็น 0% Adobe Photoshop, Illustrator และเครื่องมือเลือกสีบน OS ส่วนใหญ่ใช้ HSV ส่วน CSS และเครื่องมือออกแบบเว็บมักจะใช้ HSL เครื่องมือนี้แปลงค่าระหว่างทั้งสองรูปแบบให้ทันที

ค่า CMYK ที่แสดงเป็นการคำนวณทางคณิตศาสตร์จาก RGB โดยใช้สูตรมาตรฐาน พวกมันเป็นค่าประมาณการที่มีประโยชน์สำหรับขั้นตอนการทำงานจากดิจิทัลไปสู่การพิมพ์ แต่สีที่พิมพ์ออกมาในโลกแห่งความเป็นจริงจะขึ้นอยู่กับเครื่องพิมพ์, หมึก, กระดาษ และ ICC color profile ที่ใช้งานอย่างมาก สำหรับงานพิมพ์ระดับมืออาชีพ ควรตรวจสอบสีสุดท้ายเทียบกับตัวอย่างจริงหรือปรึกษาสเปกสีของบริการพิมพ์เสมอ ค่า CMYK ในที่นี้ใช้ได้ดีสำหรับการตัดสินใจเลือกสีในขั้นตอนเริ่มต้นและการดูตัวอย่างก่อนพิมพ์

คลิกที่ส่วน Presets และเลือก Tailwind CSS หรือ Material Design พาเลตแต่ละอันจะแสดงสเกลสีทั้งหมด (เช่น Tailwind blue-50 จนถึง blue-950 หรือ Material red 100 จนถึง 900) คลิกที่ช่องสีใดก็ได้เพื่อโหลดสีนั้นเข้าสู่ตัวเลือกและรับค่า HEX, RGB, HSL และค่าอื่นๆ ได้ทันที สิ่งนี้มีประโยชน์เมื่อคุณสร้างงานภายใต้ระบบการออกแบบที่มีอยู่แล้ว — คุณสามารถคัดลอกรูปแบบที่คุณต้องการได้เป๊ะๆ (เช่น ค่า HSL ของ Tailwind blue-600) โดยไม่ต้องไปหาจากที่อื่น

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

ได้ คุณสามารถพิมพ์หรือวางรหัส HEX ลงในช่องป้อนข้อมูล HEX ได้โดยตรง (จะมีหรือไม่มีเครื่องหมาย # ก็ได้) และตัวเลือกสีรวมถึงช่องรูปแบบอื่นๆ ทั้งหมดจะอัปเดตทันที คุณยังสามารถปรับแถบเลื่อน Hue, Saturation และ Lightness ได้โดยตรงหากต้องการแก้ไขคุณสมบัติเฉพาะจุดโดยไม่เปลี่ยนค่าอื่นๆ สิ่งนี้มีประโยชน์เมื่อคุณมีรหัส hex จากไฟล์การออกแบบและต้องการตรวจสอบความต่างของสีหรือแปลงเป็นรูปแบบอื่น

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