HEX → CSS Tokens
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.
Ringkasan
Konversi daftar warna HEX menjadi properti kustom CSS, peta SCSS, dan snippet tema Tailwind yang dapat digunakan ulang.
Cara pakai
- Tempel nilai HEX, CSS, JSON, atau konfigurasi Tailwind.
- Ganti nama token menjadi peran semantik (primary, accent, dll.).
- Salin output CSS/SCSS/Tailwind untuk design system Anda.
Contoh penggunaan
- Menjembatani palet brand antara desain dan kode.
- Menyiapkan warna tema Tailwind dari style guide.
- Menghasilkan variabel CSS untuk Storybook atau library komponen.
Tips & pengetahuan
- Pertahankan konsistensi penamaan antara design token dan codebase.
- Periksa kontras teks/latar untuk setiap kombinasi mode.
- Simpan snippet di version control untuk melacak perubahan palet.