ข้ามไปยังเนื้อหา
EVOA Toolbox

สร้างจานสี

สร้างชุดสีที่เข้ากันจากสีหลัก ล็อกสีที่ชอบ ตรวจสอบคอนทราสต์ WCAG และส่งออกเป็น CSS, Tailwind, JSON หรือ PNG

ประมวลผลในเบราว์เซอร์ของคุณ ข้อความของคุณไม่ถูกอัปโหลด

กำลังโหลดเครื่องมือ…

เครื่องมือนี้ทำอะไรได้

เลือกสีหลักแล้วรับจานสีที่สร้างตามหลักทฤษฎีสีทันที ได้แก่ สีตรงข้าม (complementary) สีข้างเคียง (analogous) สามสีเท่ากัน (triadic) สี่สี (tetradic) split-complementary สีโทนเดียว (monochromatic) หรือชุดเฉดสีเข้มและอ่อน การคำนวณเฉดสีทำใน HSL และแต่ละช่องสีแสดงค่าเป็น HEX, RGB, HSL และ OKLCH เพื่อให้คุณคัดลอกแบบที่ใช้ในโปรเจกต์ได้

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

เมื่อพอใจแล้ว ส่งออกจานสีเป็น CSS custom properties, บล็อก @theme ของ Tailwind v4, ส่วนขยายคอนฟิก Tailwind v3, JSON หรือภาพสีตัวอย่าง PNG ทุกอย่างทำงานในเครื่องและไม่มีการส่งข้อมูลไปที่ใด

วิธีใช้งาน

  1. 1เลือกสีหลักด้วยตัวเลือกสี หรือพิมพ์ค่า hex เช่น #2f5bea
  2. 2เลือกชุดสีที่เข้ากัน ใช้แถบเลื่อนจำนวนสำหรับแบบโทนเดียว เฉดสีเข้ม และเฉดสีอ่อน
  3. 3กดสุ่มเพื่อสำรวจ และล็อกสีที่ต้องการเก็บไว้
  4. 4ตรวจสอบป้ายคอนทราสต์ในแต่ละช่องสีก่อนนำไปใช้กับข้อความหรือปุ่ม
  5. 5คัดลอกค่าของแต่ละสี หรือส่งออกทั้งจานสีในรูปแบบที่ต้องการ

รูปแบบที่รองรับ

อินพุต: สี HEX (#rgb หรือ #rrggbb) เอาต์พุต: ตัวแปร CSS, snippet Tailwind v3/v4, JSON และ PNG

ความเป็นส่วนตัว

เครื่องมือนี้ทำงานในเบราว์เซอร์ของคุณ ข้อมูลที่คุณป้อนจะถูกประมวลผลบนอุปกรณ์ของคุณและไม่ถูกส่งไปยังเซิร์ฟเวอร์ของเรา

ข้อจำกัด

  • ชุดสีที่เข้ากันเป็นข้อเสนอแนะเชิงคณิตศาสตร์ ไม่ใช่งานออกแบบที่เสร็จสมบูรณ์ ควรปรับด้วยสายตาและทดสอบในบริบทจริง
  • คอนทราสต์วัดเฉพาะสีของช่องสีเทียบกับสีขาวล้วนและสีดำล้วนเท่านั้น ควรตรวจสอบคู่สีข้อความและพื้นหลังจริงของคุณแยกต่างหาก
  • การแสดงสีต่างกันไปตามหน้าจอและโปรไฟล์สี ค่าที่แสดงเป็น sRGB
  • ค่า alpha/ความโปร่งใสไม่รวมอยู่ในจานสี

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

สีข้างเคียง (analogous) กับสามสีเท่ากัน (triadic) ต่างกันอย่างไร

สีข้างเคียงอยู่ติดกันบนวงล้อสี (ห่างกัน 30 องศา) ให้ความรู้สึกสงบและกลมกลืน ส่วนสามสีเท่ากันห่างกัน 120 องศา ให้ความหลากหลายและคอนทราสต์มากกว่า

AA และ AAA หมายถึงอะไร

เป็นระดับคอนทราสต์ของข้อความตาม WCAG 2 AA ต้องการ 4.5:1 สำหรับข้อความปกติ (3:1 สำหรับข้อความขนาดใหญ่) ส่วน AAA ต้องการ 7:1 สำหรับข้อความปกติ เครื่องมือนี้แสดงระดับสูงสุดที่แต่ละช่องสีทำได้เมื่อเทียบกับสีขาวและสีดำ

การล็อกทำงานอย่างไร

ช่องสีที่ล็อกจะคงสีเดิมไว้เมื่อคุณกดสุ่มหรือเปลี่ยนสีหลักหรือชุดสี คุณจึงสร้างจานสีรอบสีที่ชอบอยู่แล้วได้

ควรใช้การส่งออกแบบใดสำหรับ Tailwind

ใช้เอาต์พุต @theme ของ v4 กับ Tailwind 4 (คอนฟิกแบบ CSS-first) และใช้เอาต์พุตคอนฟิกของ v3 สำหรับโปรเจกต์ที่ยังใช้ tailwind.config.js

เครื่องมือที่เกี่ยวข้อง