カラースケール
カラー濃淡ジェネレーター - 50〜900 の UI スケール
ひとつのベースカラーから 50〜900 の濃淡スケールを生成し、CSS 変数をコピー。ティント、シェード、UI 用のカラートークンをプレビューできます。
生成されたスケール
CSS 変数
--color-brand-50: #F4F6FB;
--color-brand-100: #E2EBF8;
--color-brand-200: #C2D5F5;
--color-brand-300: #90B6F4;
--color-brand-400: #5B96F5;
--color-brand-500: #2474F5;
--color-brand-600: #0D5BD9;
--color-brand-700: #0C47A6;
--color-brand-800: #0B3474;
--color-brand-900: #0A2247;使い方
ひとつのブランドカラーを実用的な UI スケールに変えます。明るいティントから暗いシェードまでを作成し、一般的なデザインシステムのようにラベルを付けて、プロダクト UI 用の CSS 変数を書き出します。
- 1 ベースカラーを入力します。
- 2 生成された 50〜900 のスケールを確認します。
- 3 個別の濃淡または CSS 変数ブロック全体をコピーします。
よくある質問
50〜900 のカラースケールとは？
とても明るい色からとても暗い色までにラベルを付けた段階で、UI システムやユーティリティ CSS フレームワークでよく使われます。
500 は常に元の色になりますか？
このジェネレーターはベースカラーの色相と彩度の方向を保ち、特定の段階を固定するのではなく、バランスのとれたスケールを作ります。
スケールを文字色に使えますか？
はい。ただし文字と背景のコントラストを確認してください。とても明るいティントは文字より背景に向いています。
書き出した変数の名前は？
--color-brand-500 のようにプロダクト固有の接頭辞を付けると、スケールをデザイントークンとして使えます。