เครื่องสร้างเฉดสี

แต่ละเฉดจะแสดงอัตราส่วน contrast เทียบกับสีขาวและสีดำ สำหรับการผ่าน WCAG AA ข้อความปกติต้องการ 4.5:1 ข้อความขนาดใหญ่ต้องการ 3:1 สำหรับ AAA: ข้อความปกติต้องการ 7:1 และข้อความขนาดใหญ่ต้องการ 4.5:1 เฉดอ่อน (50-300) มักผ่าน AA กับข้อความสีดำ ส่วนเฉดเข้ม (700-900) มักผ่าน AA กับข้อความสีขาว

คลิก Export Tailwind Config แล้วคัดลอก JavaScript object วางลงในส่วน "colors" ของไฟล์ tailwind.config.js Tailwind จะสร้าง utility class อย่าง bg-brand-500, text-brand-700, border-brand-200 โดยอัตโนมัติ

คลิก Export CSS Variables เพื่อรับการประกาศ CSS custom property (เช่น --color-500: #0ea5e9) วางลงใน :root block แล้วอ้างอิงด้วย var(--color-500) ใช้งานได้กับทุก CSS setup

Tint คือเวอร์ชันที่อ่อนกว่า (ผสมกับสีขาว Lightness สูงขึ้น) ส่วน shade คือเวอร์ชันที่เข้มกว่า (ผสมกับสีดำ Lightness ต่ำลง) จุด 50-400 คือ tints จุด 600-900 คือ shades และจุด 500 ใกล้เคียงกับสีต้นฉบับ

ข้อกำหนด WCAG contrast อธิบายเรื่องนี้ได้ชัดเจน: พื้นหลังอ่อน + ข้อความเข้มให้ contrast สูง พื้นหลังจุด 50-100 คู่กับข้อความจุด 700-900 มักผ่านเกณฑ์ WCAG AA พื้นหลังเข้ม (800-900) คู่กับข้อความสีขาวหรือจุด 50-100 ก็ใช้ได้ดีเช่นกัน

ได้ ป้อนสี HEX, RGB หรือ HSL ที่ถูกต้องใดก็ได้ เครื่องสร้างจะสร้างพาเลตแบบกำหนดเองจากสีพื้นฐานที่คุณระบุ เหมาะสำหรับสีแบรนด์ที่ไม่มีในพาเลต Tailwind ค่าเริ่มต้น

ไม่ การคำนวณสีทั้งหมดทำงานในเบราว์เซอร์ของคุณผ่าน JavaScript