Ubah warna apa pun menjadi skala sistem desain 11 langkah (50→950): interpolasi OKLCH yang merata secara persepsi dengan warna sumber yang tertambat pada langkah terdekat, kontras WCAG terhadap putih/hitam pada setiap langkah, ekspor satu klik ke Tailwind / Variabel CSS / SCSS / JSON.
// tailwind.config.js / @theme
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: "#fff5ff",
100: "#ffdffd",
200: "#ffc2fa",
300: "#ffa0f6",
400: "#ff75ed",
500: "#f438df",
600: "#e400d0",
700: "#cb00b9",
800: "#ae009f",
900: "#8d0081",
950: "#66005d",
},
},
},
},
};Buat skala sistem desain 11 langkah dari satu warna, seragam secara persepsi di OKLCH.
Tempel HEX, atau tekan "Build scale" di halaman warna mana pun untuk memasukkan nilainya.
Warna Anda menyesuaikan dengan langkah terdekat; kontras WCAG terhadap putih dan hitam ditampilkan di bawah setiap langkah.
Pilih Tailwind / CSS vars / SCSS / JSON dan salin langsung ke kode Anda.
Empat pertanyaan yang sering ditanyakan orang tentang pembuatan nuansa.
Lanjutkan dari sini dan gunakan warna-warna tersebut.
Masukkan kode RAL, Pantone, atau NCS — atau HEX apa pun — dan cocokkan di seluruh 10 sistem standar dengan CIEDE2000 ΔE.
Validasi kontras WCAG 2.1 antara warna latar depan dan latar belakang apa pun.
Spasi untuk acak, kunci, seret untuk mengatur ulang, bagikan melalui URL — semua yang seharusnya dilakukan papan palet.
Deskripsikan adegan atau suasana dalam satu kalimat — dapatkan palet lima peran dengan alasan.