HEX → CSS टोकन
Build CSS variables and Tailwind tokens from HEX palettes.
Output
:root {
--brand-color-1: #0ea5e9;
--brand-color-2: #22d3ee;
--brand-color-3: #f97316;
--brand-color-4: #fde047;
--brand-color-5: #1e293b;
}Palette tokens
| Color | Token name | Recommended text | Variants |
|---|---|---|---|
#0EA5E9Swatch #1 | Slug: color-1 | Black text Contrast 7.58:1 vs text | Lighten #41BCF4Darken #0A75A6 |
#22D3EESwatch #2 | Slug: color-2 | Black text Contrast 11.62:1 vs text | Lighten #5BDEF2Darken #0EA4BA |
#F97316Swatch #3 | Slug: color-3 | Black text Contrast 7.49:1 vs text | Lighten #FB9752Darken #C35305 |
#FDE047Swatch #4 | Slug: color-4 | Black text Contrast 15.93:1 vs text | Lighten #FEEA84Darken #FAD203 |
#1E293BSwatch #5 | Slug: color-5 | White text Contrast 14.63:1 vs text | Lighten #334564Darken #06080C |
Tips
- Name tokens with semantic roles (primary, accent) instead of numbers.
- Verify contrast for states and modes before merging palettes.
- Store generated code in version control to track palette changes.
सारांश
HEX रंग सूची को CSS कस्टम प्रॉपर्टी, SCSS मैप और Tailwind थीम स्निपेट में बदलिए।
कैसे उपयोग करें
- HEX मान, CSS, JSON या Tailwind कॉन्फ़िग पेस्ट करें।
- टोकन नामों को primary, accent जैसी अर्थपूर्ण भूमिकाओं में बदलें।
- अपने डिज़ाइन सिस्टम के लिए CSS/SCSS/Tailwind आउटपुट कॉपी करें।
उपयोग के मामले
- डिज़ाइन और कोड के बीच ब्रांड पैलेट को जोड़ना।
- स्टाइल गाइड से Tailwind थीम रंग जल्दी सेटअप करना।
- Storybook या कॉम्पोनेंट लाइब्रेरी के लिए CSS वैरिएबल बनाना।
सुझाव और जानकारी
- नामकरण को डिज़ाइन टोकन और कोडबेस में समान रखें।
- हर मोड में टेक्स्ट/बैकग्राउंड संयोजनों का कंट्रास्ट जांचें।
- स्निपेट्स को संस्करण नियंत्रण में सहेजें ताकि पैलेट परिवर्तन ट्रैक हों।