Bir marka rengi girin, birincil / ikincil / başarı / uyarı / tehlike elde edin — Tailwind yapılandırması ve CSS değişkenleri olarak dışa aktarılır.
2F6FED · L 57%
Ana
Otomatik olarak türetilir, marka parlaklığı ve kroması korunur
İkincil
Otomatik olarak türetilir, marka parlaklığı ve kroması korunur
Başarı
Otomatik olarak türetilir, marka parlaklığı ve kroması korunur
Uyarı
Otomatik olarak türetilir, marka parlaklığı ve kroması korunur
Tehlike
Otomatik olarak türetilir, marka parlaklığı ve kroması korunur
Kodu dışa aktar
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
DEFAULT: "#010101",
light: "#010101",
dark: "#000101",
foreground: "#ffffff",
},
secondary: {
DEFAULT: "#010101",
light: "#010101",
dark: "#010101",
foreground: "#ffffff",
},
success: {
DEFAULT: "#000101",
light: "#010101",
dark: "#000100",
foreground: "#ffffff",
},
warning: {
DEFAULT: "#010100",
light: "#010101",
dark: "#010100",
foreground: "#ffffff",
},
danger: {
DEFAULT: "#010101",
light: "#010101",
dark: "#010000",
foreground: "#ffffff",
},
},
},
},
};Bir marka rengi girin, her arayüzün ihtiyaç duyduğu beş anlamsal seti kod olarak dışa aktarın.
Marka HEX kodunuzu yapıştırın; anlamsal renkler onun parlaklık ve krom karakterini devralır.
Başarı yeşil ton aralığında, Uyarı kehribar, Tehlike kırmızıdır - ton anlamsaldır, karakter markada kalır.
Tailwind config / CSS değişkenleri / JSON olarak kopyalayın, doğrudan tasarım sisteminize ekleyin.
Bir tasarım sistemine entegre ederken sık sorulan üç soru.
Panel düzenleyiciyi açın ve gerçek bir arayüz olarak kullanın.
Canlı önizleme ve oklch() / HEX / RGB çıktısı ile algısal olarak tekdüze OKLCH alanında L / C / H ayarlayın.
Herhangi bir rengi OKLCH'de algısal olarak düzgün, her adımda WCAG kontrastına sahip 11 adımlık bir tasarım sistemi ölçeğine dönüştürün, Tailwind/CSS/SCSS/JSON olarak dışa aktarın.
Herhangi bir ön plan ve arka plan rengi arasında WCAG 2.1 kontrast doğrulaması.
Bir sahneyi veya duyguyu tek bir satırda tanımlayın — gerekçesiyle beş rollü bir palet alın.