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