วิธีใช้งาน สร้างชุดสีและเช็กคอนทราสต์
- 1
เริ่มจากสีหนึ่งสี
พิมพ์หรือเลือกสีพื้นฐาน จากนั้นเลือกโทนสีที่เข้ากัน เช่น สีข้างเคียง สามเหลี่ยมสี หรือสีตรงข้ามแบบแยก หรือสุ่มพาเลทสุ่มขึ้นมา
- 2
ล็อกและปรับแต่ง
ล็อกสีที่ชอบก่อนสุ่มใหม่ แก้ไขสีใดก็ได้โดยตรง หรือดึงสีเด่นห้าสีออกมาจากรูปถ่าย
- 3
ตรวจความอ่านง่าย
เปิดแท็บคอนทราสต์เพื่อทดสอบข้อความบนพื้นหลังตามเกณฑ์ WCAG 2.2 ระดับ AA และ AAA ใช้คำแนะนำในการแก้ไข และดูตัวอย่างพาเลทสำหรับผู้ที่มีภาวะตาบอดสี
- 4
ส่งออก
คัดลอกตัวแปร CSS ธีม Tailwind v4 หรือคอนฟิก v3 SCSS หรือ JSON พร้อมเฉดสี 50–950 หรือดาวน์โหลดตัวอย่างสี PNG
ข้อจำกัดและ Pro
ใช้ได้ฟรีทั้งหมด: พาเลท 5 สี โทนสีที่เข้ากัน 6 แบบ สุ่มและส่งออกได้ไม่จำกัด รูปภาพสำหรับดึงสีขนาดไม่เกิน 50 MB และตัวอย่างสี PNG กว้าง 1600 พิกเซล
เกี่ยวกับ สร้างชุดสีและเช็กคอนทราสต์
ตัวสร้างพาเลทสีนี้สร้างชุดสีห้าสีพร้อมทุกอย่างที่ระบบดีไซน์ต้องใช้ โทนสีที่เข้ากันจะหมุนเฉดสีพื้นฐานบนวงล้อสี HSL โดยสีข้างเคียงห่างออกไปด้านละ 30° สีตรงข้ามเพิ่มเฉดที่อยู่ฝั่งตรงข้าม สีตรงข้ามแบบแยกใช้สองเฉดที่อยู่ข้างสีตรงข้าม สามเหลี่ยมสีวางสามเฉดห่างกัน 120° สี่เหลี่ยมสีใช้รูปสี่เหลี่ยมจัตุรัส 90° และสีเดียวคงเฉดเดียวไว้ในความสว่างห้าระดับ โหมดสุ่มจะเคารพสีที่ล็อกไว้ ส่วนตัวเลือกจากรูปภาพจะจัดกลุ่มพิกเซลของรูปถ่ายใน OKLab เพื่อหาห้าสีที่พบบ่อยและแตกต่างกันชัดเจน
ในแท็บเฉดสี แต่ละสีจะได้ชุด 50–950 จำนวน 11 ระดับใน OKLCH โดยระดับที่ใกล้สีของคุณที่สุดคือค่าที่ตรงกับสีนั้น หรือเลือกโทน 13 ระดับของระบบ HCT จาก Material 3 พร้อมพาเลทหลักห้าชุดที่ธีม Material จะสร้างขึ้น ตัวตรวจคอนทราสต์ใช้สูตรความส่องสว่างของ WCAG 2.2 ไม่ปัดอัตราส่วนขึ้น และแนะนำสีที่ผ่านเกณฑ์และใกล้เคียงที่สุดโดยปรับเฉพาะความสว่างและคงเฉดสีไว้ ตารางจะแสดงอัตราส่วนของทุกคู่สีในพาเลทเทียบกับสีขาวและสีดำ
การจำลองครอบคลุม Protanopia, Deuteranopia, Tritanopia และ Achromatopsia ด้วยเมทริกซ์ของ Machado และแจ้งเตือนสีที่ดูกลืนกัน การส่งออกตั้งชื่อสีตามเฉดและรองรับชื่อที่คุณกำหนดเอง เครื่องมือนี้ไม่ได้ตัดสินว่าสีเหมาะกับแบรนด์หรือไม่ และการจำลองเป็นเพียงการประมาณการมองเห็นของผู้ที่มีภาวะตาบอดสี จึงใช้แทนการทดสอบกับผู้ใช้จริงไม่ได้
ความเป็นส่วนตัว
การคำนวณสี การตรวจคอนทราสต์ และการวิเคราะห์รูปภาพทั้งหมดทำงานในแท็บนี้ รูปถ่ายที่ใช้ดึงสีจะถูกอ่านจากดิสก์ลงในแคนวาสขนาดเล็กและไม่ถูกอัปโหลด พาเลทอาจถูกเก็บไว้ในที่อยู่หน้าเว็บ เพื่อให้ลิงก์ที่คัดลอกเปิดพาเลทเดิมได้ โดยไม่มีสิ่งใดถูกบันทึกบนเซิร์ฟเวอร์
คุณสมบัติ
หกโทนสีและสีจากรูปภาพ
ตั้งแต่สีข้างเคียงถึงสี่เหลี่ยมสีจากสีพื้นฐานเดียว สุ่มพร้อมล็อกสี หรือดึงสีเด่นจากรูปถ่าย
คอนทราสต์ WCAG 2.2 พร้อมคำแนะนำ
AA และ AAA สำหรับข้อความปกติ ข้อความขนาดใหญ่ และกราฟิก UI พร้อมสีที่ผ่านเกณฑ์ใกล้เคียงที่สุดเพียงคลิกเดียว
ส่งออกพร้อมใช้สำหรับนักพัฒนา
ตัวแปร CSS, Tailwind v4 และ v3, SCSS และ JSON ในรูปแบบ HEX, RGB, HSL หรือ OKLCH พร้อมตัวอย่างสี PNG