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.
Overview
Convert HEX color lists into reusable CSS custom properties, SCSS maps, and Tailwind theme snippets.
How to use
- Paste HEX values, CSS, JSON, or Tailwind configs.
- Rename tokens to semantic roles (primary, accent, etc.).
- Copy CSS/SCSS/Tailwind output for your design system.
Use cases
- Bridge brand palettes between design and code.
- Bootstrap Tailwind theme colors from style guides.
- Generate CSS variables for Storybook or component libraries.
Tips & knowledge
- Keep naming consistent across design tokens and codebases.
- Verify contrast for text/background combinations in each mode.
- Store snippets in version control to track palette changes.