Tailwindカラースケール生成
基準色からTailwind風のカラースケールを作ります。
このツールについて
1つの基準色から50-950段階の実用的なカラースケールを作り、CSS変数をコピーできます。
プロトタイプ、社内ツール、ブランド検討、デザイントークンの初期案に向いています。
brand-50
#F4F7FE
brand-100
#E5ECFD
brand-200
#C2D3F9
brand-300
#96B4F5
brand-400
#628FF1
brand-500
#2563EB
brand-600
#2157CF
brand-700
#1B49AE
brand-800
#153988
brand-900
#102A63
brand-950
#0A1A3D
CSS変数
使い方
- 1
必要な値を入力するか、テキストを貼り付けます。
- 2
オプションや単位を目的に合わせて調整します。
- 3
表示された結果を確認し、必要な場所へコピーして使います。
機能
即時結果
値を入力するとブラウザ内で結果がすぐに更新されます。
ブラウザ内処理
入力値はサーバーへアップロードせず、端末内で処理されます。
シンプルな入力
繰り返し使いやすい入力欄と見やすい結果を用意しています。
無料で利用
登録やインストールなしでそのまま使えます。
主な用途
- ›Tailwind風のブランドパレット初稿を作ります。
- ›テーマファイルへ貼り付けるCSSカスタムプロパティをコピーします。
- ›ブランド色に十分な明暗の幅があるか確認します。