カラー → CSS変数

任意の色からCSS変数・シェード・トークンを生成。

ベースカラー

シェードスケール (50 → 900)

eff0fe

100

e0e0fc

200

c1c2f9

300

a1a3f7

400

8285f4

500

6366f1

600

4f52c1

700

3b3d91

800

282960

900

141430

HEX

#6366F1

RGB

rgb(99, 102, 241)

HSL

hsl(239, 84%, 67%)

生成されたCSS

:root {
  --color-50: #eff0fe;
  --color-100: #e0e0fc;
  --color-200: #c1c2f9;
  --color-300: #a1a3f7;
  --color-400: #8285f4;
  --color-500: #6366f1;
  --color-600: #4f52c1;
  --color-700: #3b3d91;
  --color-800: #282960;
  --color-900: #141430;
  --color: #6366f1;
}

使い方の仕組み

ベースとなる色を選びます。
そこからCSSカスタムプロパティ、明るい色（tint）、暗い色（shade）、トークンが生成されます。
濃淡のスケールをプレビューします。
CSS変数をスタイルシートにコピーします。

主な用途

デザインシステム用のカラースケールを構築する。
ブランドカラーからtintとshadeを生成する。
そのまま貼り付けられるCSSカスタムプロパティを用意する。

知っておくと便利

濃淡はアルゴリズムで生成されるため、知覚的な均一さを求める場合は、デザイナーが個々のステップを微調整することもあります。
生成されるのはカラートークンです。レイアウトや余白のトークンは対象外です。

よくある質問

一つの色から何が生成されますか？

一連のCSSカスタムプロパティに加え、tintとshade（カラースケール）が生成され、デザイントークンとしてそのままスタイルシートに組み込めます。

濃淡は知覚的に均一ですか？

一貫した明度アルゴリズムに従っており、力強い出発点になります。ブランドで正確な値が必要な場合は、個々のステップを微調整してください。

何かアップロードされますか？

いいえ。すべてブラウザ内でローカルに生成されます。

カラー → CSS変数

シェードスケール (50 → 900)

使い方の仕組み

主な用途

知っておくと便利

よくある質問

一つの色から何が生成されますか？

濃淡は知覚的に均一ですか？

何かアップロードされますか？

関連ツール

使い方の仕組み

主な用途

知っておくと便利

よくある質問

一つの色から何が生成されますか？

濃淡は知覚的に均一ですか？

何かアップロードされますか？