เครื่องมือสร้างพาเลตสีและสีไล่ระดับ

สร้างชุดสีจากสีหลักหนึ่งสี สุ่มพาเลตต์ และสร้างสีไล่เฉดเพื่อคัดลอกเป็น CSS หรือบันทึกเป็นรูปภาพ PNG ใช้เลือกสีสำหรับงานออกแบบ งานนำเสนอ หรือหน้าเว็บ

วิธีใช้

1. ในแท็บ "พาเลตต์" เลือก "สีหลัก" และเลือก "ชุดสี" หากชอบ ให้กด "ใช้ชุดสีนี้เป็นพาเลตต์"
2. กด "สุ่มสี (Space)" เพื่อได้สีใหม่ ล็อกสีที่ต้องการเก็บไว้แล้วสุ่มอีกครั้ง
3. นำสีไปใช้ด้วย "คัดลอกรายการ HEX" "คัดลอกตัวแปร CSS" หรือ "บันทึกเป็นรูปภาพ" และกด "เก็บพาเลตต์" เพื่อเก็บไว้ใช้ภายหลัง
4. ในแท็บ "ไล่เฉดสี" ตั้งค่า "ประเภท" "มุม" และ "จุดสี" แล้วคัดลอกโค้ด CSS หรือกด "บันทึก PNG"

หลักการทำงาน

• ชุดสีจะหมุนค่าเฉดสีบนวงล้อสี HSL: สีคู่ตรงข้าม 180°, สีข้างเคียง ±30°, สามสี 120°, สีคู่ตรงข้ามแยก 150° และ 210°, สี่เหลี่ยมจัตุรัส ทีละ 90°
• ระดับคอนทราสต์เป็นไปตาม WCAG 2.2: AA ต้องได้ 4.5:1, AAA ต้องได้ 7:1 และข้อความขนาดใหญ่ต้องได้ 3:1
• "จำลองการมองเห็นสี" เป็นการประมาณตาม Machado et al. (2009) เปลี่ยนเฉพาะสีที่แสดงบนหน้าจอ ไม่เปลี่ยนค่าที่คัดลอกหรือบันทึก
• พาเลตต์ที่เก็บไว้สูงสุด 40 ชุดจะบันทึกไว้ในเบราว์เซอร์นี้บนอุปกรณ์นี้

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

หาสีคู่ตรงข้ามได้อย่างไร

สีคู่ตรงข้ามคือสีที่อยู่ตรงข้ามกันบนวงล้อสี ห่างกัน 180° ตั้ง "ชุดสี" เป็น "สีคู่ตรงข้าม" เพื่อดูสีนั้น แล้วแตะช่องสีเพื่อคัดลอกค่า HEX

สร้างสีไล่เฉดแบบ CSS อย่างไร

ในแท็บ "ไล่เฉดสี" แตะแถบเพื่อเพิ่มจุดสี แล้วตั้งค่าสีและตำแหน่ง กล่อง CSS จะแสดงโค้ดที่พร้อมคัดลอก

ทำไมสีช่วงกลางของการไล่เฉดดูหม่น

ตั้ง "ปริภูมิสีที่ใช้ไล่เฉด" เป็น OKLCH สีช่วงกลางจะสดกว่า และ CSS จะมีบรรทัดสำรองสำหรับเบราว์เซอร์รุ่นเก่าด้วย

รู้ได้อย่างไรว่าข้อความบนสีนี้จะอ่านง่าย

แต่ละสีจะแสดงอัตราส่วนคอนทราสต์และระดับของสีข้อความที่อ่านง่ายกว่า คือสีขาวหรือสีดำ อัตราส่วนคือ (L1 + 0.05) ÷ (L2 + 0.05) โดย L1 และ L2 คือความสว่างสัมพัทธ์ของสีที่อ่อนกว่าและสีที่เข้มกว่า