Herhangi bir rengi 11 adımlık bir tasarım sistemi ölçeğine dönüştürün (50→950): kaynak renk en yakın adımda sabitlenmiş olarak algısal olarak düzgün OKLCH enterpolasyonu, her adımda beyaza/siyah karşı WCAG kontrastı, Tailwind / CSS değişkenleri / SCSS / JSON'a tek tıklamayla dışa aktarım.
// 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",
},
},
},
},
};OKLCH'de algısal olarak tek tip, bir renkten 11 adımlık bir tasarım sistemi ölçeği oluşturun.
Bir HEX yapıştırın veya herhangi bir renk sayfasında "Ölçek Oluştur"a tıklayarak değeri getirin.
Renginiz en yakın adımına oturur; her adımın altında beyaza ve siyaha karşı WCAG kontrastı yazdırılır.
Tailwind / CSS değişkenleri / SCSS / JSON seçin ve doğrudan kodunuza kopyalayın.
İnsanların gölge oluşturma hakkında sorduğu dört soru.
Buradan devam edin ve renkleri işinize koyun.
Bir RAL, Pantone veya NCS kodu girin — veya herhangi bir HEX — ve CIEDE2000 ΔE ile tüm 10 standart sisteminde eşleştirin.
Herhangi bir ön plan ve arka plan rengi arasında WCAG 2.1 kontrast doğrulaması.
Rastgeleleştirmek için boşluk tuşu, kilitlemek, yeniden sıralamak için sürüklemek, URL ile paylaşmak — bir palet panelinin yapması gereken her şey.
Bir sahneyi veya duyguyu tek bir satırda tanımlayın — gerekçesiyle beş rollü bir palet alın.