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設定を貼り付け。
- トークン名をプライマリ・アクセントなどセマンティックな名前に編集。
- 生成されたCSS/SCSS/Tailwindコードをコピー。
活用例
- デザインとコードのパレットを一致させる。
- ブランドガイドからTailwindテーマ用カラーを素早く作成。
- Storybookやコンポーネントライブラリ用のCSS変数セットを生成。
ポイント・知識
- トークン名は数字よりも役割ベースで揃えると共有しやすい。
- 各色についてテキスト/背景組み合わせのコントラストを確認。
- 生成したスニペットはバージョン管理に保存し、パレットの変化を追跡。