แปลงสีใด ๆ ให้เป็นสเกลระบบดีไซน์ 11 ขั้นตอน (50→950): การแทรกสีด้วย OKLCH ที่สม่ำเสมอตามการรับรู้ โดยยึดสีต้นฉบับไว้ที่ขั้นตอนที่ใกล้ที่สุด, แสดงป้ายความคมชัดตาม WCAG เมื่อเทียบกับขาว/ดำในทุกขั้นตอน, ส่งออกได้ด้วยคลิกเดียวไปยัง Tailwind / CSS variables / SCSS / JSON
// tailwind.config.js / @theme
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: "#fff5ff",
100: "#ffe0fd",
200: "#ffc2fb",
300: "#ffa0f6",
400: "#ff75ee",
500: "#f437e0",
600: "#e400d1",
700: "#cc00ba",
800: "#ae00a0",
900: "#8d0082",
950: "#66005e",
},
},
},
},
};ดึงสเกลระบบดีไซน์ 11 ขั้นตอนจากสีเดียว ที่มีความสม่ำเสมอทางการรับรู้ใน OKLCH
วาง HEX หรือกด "Build scale" ในหน้าสีใดๆ เพื่อนำค่าเข้ามา
สีของคุณจะเข้ากับขั้นตอนที่ใกล้ที่สุด คอนทราสต์ WCAG กับสีขาวและดำจะแสดงใต้ทุกขั้นตอน
เลือก Tailwind / CSS vars / SCSS / JSON แล้วคัดลอกไปใส่ในโค้ดของคุณทันที
คำถามสี่ข้อที่ผู้คนถามจริงเกี่ยวกับการสร้างเฉดสี
ดำเนินต่อไปจากที่นี่และนำสีไปใช้งาน
ป้อนรหัส RAL, Pantone หรือ NCS — หรือ HEX ใด ๆ — แล้วจับคู่กับทุกระบบมาตรฐานทั้ง 10 ด้วย CIEDE2000 ΔE
ตรวจสอบคอนทราสต์ตามมาตรฐาน WCAG 2.1 ระหว่างสีพื้นหน้าและพื้นหลังใดๆ
ใช้ Spacebar เพื่อสุ่ม ล็อก ลากเพื่อจัดเรียงใหม่ แชร์ผ่าน URL — ทุกอย่างที่แผงจานสีควรมี
อธิบายฉากหรืออารมณ์ในหนึ่งบรรทัด — รับจานสี 5 บทบาทพร้อมเหตุผล