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