एक ब्रांड रंग डालें, प्राइमरी / सेकेंडरी / सफलता / चेतावनी / खतरा प्राप्त करें — Tailwind कॉन्फ़िगरेशन और CSS वेरिएबल के रूप में निर्यात करें।
2F6FED · L 57%
प्राइमरी
स्वचालित रूप से व्युत्पन्न, ब्रांड की प्रकाशन और वर्णता बनी रहती है
सेकेंडरी
स्वचालित रूप से व्युत्पन्न, ब्रांड की प्रकाशन और वर्णता बनी रहती है
सफलता
स्वचालित रूप से व्युत्पन्न, ब्रांड की प्रकाशन और वर्णता बनी रहती है
चेतावनी
स्वचालित रूप से व्युत्पन्न, ब्रांड की प्रकाशन और वर्णता बनी रहती है
खतरा
स्वचालित रूप से व्युत्पन्न, ब्रांड की प्रकाशन और वर्णता बनी रहती है
कोड एक्सपोर्ट करें
// 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",
},
},
},
},
};एक ब्रांड रंग दर्ज करें, पांच शब्दार्थ सेट प्राप्त करें जिनकी हर इंटरफ़ेस को ज़रूरत होती है, कोड के रूप में निर्यात किए गए।
अपना ब्रांड HEX पेस्ट करें; शब्दार्थ रंग इसकी चमक और क्रोमा विशेषता को विरासत में लेते हैं।
सफलता हरे रंग की सीमा में आती है, चेतावनी एम्बर में, खतरा लाल में - रंग शब्दार्थ है, विशेषता ब्रांड पर बनी रहती है।
Tailwind कॉन्फ़िग / CSS वेरिएबल / JSON के रूप में कॉपी करें, सीधे अपने डिज़ाइन सिस्टम में।
डिज़ाइन सिस्टम में जोड़ते समय तीन अक्सर पूछे जाने वाले प्रश्न।
बोर्ड एडिटर खोलें और इसे वास्तविक इंटरफ़ेस के रूप में उपयोग करें।
लाइव प्रीव्यू और oklch() / HEX / RGB आउटपुट के साथ अवधारणात्मक रूप से एकसमान OKLCH स्पेस में L / C / H को ट्यून करें।
किसी भी रंग को 11-चरणीय डिज़ाइन-सिस्टम स्केल में बदलें, OKLCH में अवधारणात्मक रूप से समान, प्रत्येक चरण में WCAG कंट्रास्ट, Tailwind/CSS/SCSS/JSON में निर्यात करें।
WCAG 2.1 किसी भी अग्रभूमि और पृष्ठभूमि रंग के बीच कंट्रास्ट सत्यापन।
एक पंक्ति में किसी दृश्य या मूड का वर्णन करें - तर्क के साथ पांच-भूमिका वाला पैलेट प्राप्त करें।