カラーシェードジェネレーター

1つの色から、Tailwind風の50–950スケールと、ティント、シェード、トーンを作ります。OKLCHとsRGBで計算し、CSS変数、Tailwind、JSONにエクスポートできます。

シェード設定

ベースカラー

#3b82f6rgb(59 130 246)hsl(217 91% 60%)oklch(62.3% 0.188 259.8)

ティント / シェード / トーンの段階数

エクスポート

形式

トークン名

50–950 スケールは入力色を 500 とし、ほかの段階では色相を保ったまま OKLCH の明度と彩度を調整します。

50–950 スケール

#eef5ff

oklch(96.8% 0.015 257.2)

#e1edff

oklch(94.3% 0.028 258.4)

#c9deff

oklch(89.6% 0.051 259.4)

#a3c6ff

oklch(82.2% 0.089 260)

#73a8ff

oklch(73.2% 0.139 259.9)

#3b82f6

oklch(62.3% 0.188 259.8)

#266ad8

oklch(54.6% 0.182 259.9)

#1554b8

oklch(47% 0.17 260)

#074095

oklch(39.5% 0.15 259.7)

#002d72

oklch(32% 0.128 259.6)

#012156

oklch(26.5% 0.103 259.7)

ティント・シェード・トーン

ティント（白と混色）

シェード（黒と混色）

トーン（グレー #808080 と混色）

color-mix(in srgb, …) と同じく sRGB で等間隔に混色します。色をクリックするとコピーできます。

エクスポートコード

:root {
  --brand-50: #eef5ff;
  --brand-100: #e1edff;
  --brand-200: #c9deff;
  --brand-300: #a3c6ff;
  --brand-400: #73a8ff;
  --brand-500: #3b82f6;
  --brand-600: #266ad8;
  --brand-700: #1554b8;
  --brand-800: #074095;
  --brand-900: #002d72;
  --brand-950: #012156;
}

カラーシェードジェネレーターとは？

1つの色を、Tailwindのパレットのような11段階の50–950スケールと、ティント（白と混色）、シェード（黒と混色）、トーン（グレーと混色）の行に展開します。すべての値は個別にコピーでき、CSS変数、SCSS、Tailwind v3/v4、JSONとしてエクスポートすることもできます。

カラーシェードジェネレーターの使い方

ベースカラーを入力します。
50–950スケールを確認します。入力した色は500の段階です。
混色の行の、ティント / シェード / トーンの段階数を設定します。
任意のスウォッチをクリックしてコピーします。
エクスポートの形式とトークン名を選び、スケールをコピーします。

例

入力

#3b82f6, CSS variables, token name brand

出力

:root {
  --brand-50: #eef5ff;
  --brand-100: #e1edff;
  --brand-200: #c9deff;
  --brand-300: #a3c6ff;
  --brand-400: #73a8ff;
  --brand-500: #3b82f6;
  --brand-600: #266ad8;
  --brand-700: #1554b8;
  --brand-800: #074095;
  --brand-900: #002d72;
  --brand-950: #012156;
}

カラーシェードジェネレーターを使うべき場面

1つのブランドカラーから、デザインシステムやTailwindテーマ向けの完全なカラーランプを作るときや、ホバー/アクティブ用のバリエーションが必要なときに使います。このスケールはアルゴリズムによる妥当な出発点です。本番のデザインシステムでは、個々の段階を微調整し、文字に使う場合はコントラストを確認することをおすすめします。

カラーシェードジェネレーターの仕組み

スケールでは、ベースカラーをOKLCHに変換し、500で変更せずに保ちます。明るい段階は、明度を0.985に向かって一定の割合（50〜400で95%、88%、75%、55%、30%）だけ動かし、クロマを下げます。暗い段階は0.2に向かって（600〜950で18%〜85%）、クロマをわずかに下げながら動かします。色相は保たれ、各段階はsRGBにガマットマッピングされます。ティント、シェード、トーンは、color-mix(in srgb, …) のように、ガンマエンコードされたsRGBでの混色で、1/(n+1)の等間隔で作られます。