こんな方におすすめ
- 配色トークンを整えるデザイナー
- ボタンや背景を実装する開発者
Developer Design Utility
カラーパレット生成ツール
1つの基準色からTailwindスタイルの50〜900カラーパレットを生成し、CSS変数・SCSS変数・JSON形式でデザインシステムに活用できます。
パレット自動生成
ブランドカラーを基準に明度別のカラーパレットを生成します。
HEX / RGBプレビュー
各カラーをカード形式で確認し、クリックしてコピーできます。
CSS・SCSS・JSON出力
プロジェクトにそのまま貼り付けられるコードを生成します。
パレット名
primary
基準色
#2563eb
生成段階
10段階
出力形式
CSS
Palette設定
ブランドカラー、パレット名、生成方式、出力形式を選択してください。
CSS変数名、SCSS変数名、JSONキー名に使用されます。
ブランドカラーやボタンのメインカラーを入力してください。
デザインシステムにはTailwind Style、簡易UIにはCompactがおすすめです。
プロジェクトのスタイル管理方法に合わせて選択してください。
カラーパレットプレビュー
カラーカードをクリックするとHEXコードをコピーできます。
基準色を入力して「パレット生成」ボタンを押してください。
生成結果
以下のコードをCSS、SCSS、テーマ設定ファイルで利用できます。
パレットを生成するとここにコードが表示されます。
1つのHEX色から明暗のパレットを作る
基準色の明るい色と暗い色を生成し、CSS変数・SCSS変数・JSONで出力できます。10段階、9段階、5段階から用途に合う配色トークンを準備します。
活用場面
- ブランド色の明暗をそろえる。
- 色の名前と値をコードに書き出す。
入力から結果の確認まで
- 1
パレット名と3桁または6桁のHEX色を入力します。
- 2
10段階、9段階、コンパクトな5段階から選びます。
- 3
生成して各色のHEX・RGB値を確認します。
- 4
CSS・SCSS・JSONを選び、再生成します。
- 5
実際の背景と文字色のコントラストを確認して適用します。
基準色を保持
- 入力
- #2563eb、10段階
- 結果
- 500は#2563ebのまま、合計10色を生成します。
番号はTailwind風ですが、公式パレットではありません。
5段階のCSS
- 入力
- primary、コンパクト、CSS
- 結果
- 100・300・500・700・900を出力し、ホバーは700を参照します。
選択した段階に存在する変数を使用します。
計算・処理の仕組み
500未満はRGB各成分を白に、500より上は#020617に混ぜます。500は基準色を保持します。名前は識別子用に正規化し、数字で始まる名前にはpalette-を付けます。
注意点と制限
- 補色や類似色を選ぶHSL調和ツールではありません。
- RGBの等間隔な混合は知覚上の均等な明るさを保証しません。
- サンプルの白いボタン文字は自動でコントラスト検査されません。
- CMYK、特色、アルファ付きHEXには対応しません。
データの取り扱い
色と名前はブラウザー内で処理され、win-jにアップロードされません。
参考資料
あわせて使えるツール
- ガラス風CSS生成ツール
模様のある背景にカードを重ねる。
- CSS Grid生成ツール
画面幅に応じたカード一覧を作る。
よくある質問
Tailwindの公式色ですか？
いいえ。見慣れた段階番号を使いますが、色は独自に混合します。
5段階に600は含まれますか？
含まれません。100・300・500・700・900で、ホバー例は700を使います。
不正なHEXが青になるのはなぜですか？
現在は#2563ebに置き換えます。コピー前に表示された基準色を確認してください。