เกี่ยวกับเครื่องมือนี้

เครื่องมือสร้างชุดสีนี้สร้างชุดสี 5 สีจากสีหลักใดก็ได้ ตามหลักทฤษฎีสี ได้แก่ สีตรงข้าม (complementary) ไตรรงค์ (triadic) สีข้างเคียง (analogous) split-complementary สี่สี (tetradic) หรือโทนเดียว (monochromatic) และส่งออกเป็น CSS custom properties

วิธีใช้

  1. เลือกสีหลักด้วยตัวเลือกสี
  2. เลือกรูปแบบความกลมกลืนของสี เช่น สีตรงข้ามหรือไตรรงค์
  3. ดูตัวอย่างสีทั้งห้าที่สร้างขึ้น
  4. คลิก Copy as CSS Variables เพื่อนำชุดสีไปวางในสไตล์ชีตของคุณ

ข้อควรรู้

  • สีตรงข้ามอยู่ห่างกัน 180° บนวงล้อสี ส่วนสีไตรรงค์อยู่ห่างกัน 120°
  • ชุดสีข้างเคียงใช้เฉดที่อยู่ติดกัน (ห่างกันประมาณ 30°) และมักให้ความรู้สึกสงบและกลมกลืน
  • split-complementary จับคู่สีหลักกับสองเฉดที่อยู่ข้างสีตรงข้าม (±30°) ให้คอนทราสต์แต่ไม่ขัดกันมาก
  • ชุดสีโทนเดียวใช้เฉดเดียว และเปลี่ยนเฉพาะความอิ่มตัวและความสว่าง
  • เครื่องมือทำงานในระบบ HSL ซึ่งหมุนเฉดสีได้โดยไม่เปลี่ยนความสว่างของสี

ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ข้อมูลที่คุณป้อนจะไม่ถูกอัปโหลดหรือจัดเก็บ

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

ชุดสีตรงข้ามคืออะไร?

ชุดสีตรงข้ามจับคู่เฉดสีกับเฉดที่อยู่ตรงข้ามบนวงล้อสี (ห่างกัน 180°) เช่น น้ำเงินกับส้ม ให้คอนทราสต์สูงที่สุดในบรรดารูปแบบความกลมกลืนทั้งหมด

เว็บไซต์ควรมีกี่สีในชุดสี?

อินเทอร์เฟซส่วนใหญ่ใช้สีหลัก 1 สี สีเน้น 1-2 สี และกลุ่มสีกลาง ชุดสี 5 สีเป็นจุดเริ่มต้นที่ดี ซึ่งคุณตัดออกหรือเพิ่มด้วย tint และ shade ได้

ไตรรงค์ (triadic) กับสี่สี (tetradic) ต่างกันอย่างไร?

ไตรรงค์ใช้ 3 เฉดที่ห่างกันเท่าๆ กัน 120° ส่วน tetradic ใช้ 4 เฉดที่ห่างกัน 90° เป็นรูปสี่เหลี่ยมบนวงล้อ ซึ่งให้สีที่หลากหลายกว่าแต่จัดสมดุลยากกว่า

ใช้ชุดสีใน CSS หรือ Tailwind ได้ไหม?

ได้ คัดลอกชุดสีเป็น CSS custom properties แล้วเรียกใช้ด้วย var() หรือวางค่า hex ลงในสีของธีม Tailwind