例: oklch(0.3 0.1 63)。L=明るさ(0..1), C=彩度(~0..0.40), H=色相(0..360)。
カスタム色をどのTailwind色名として展開するかを選択。
入力色の明るさLから 400/500/600/700 を中心に最適段を推定。極端な明度は 300/800/900 も考慮。
※ buildDefaultParams()で学習したパラメータを使用中
中庸(500)の明るさ。上げると全体が軽く・爽やかに、下げると濃密で重厚に。UI では 0.55–0.70 が目安。
中庸(500)の彩度。上げると発色が強くブランド色に、下げると落ち着きが出る。UI 向けは 0.16–0.26 程度が扱いやすい。
中庸(500)の色相(度)。赤=~25°付近。数度の微調整で橙(+)やマゼンタ(-)に寄せられる。
最明値(50)。上げるほど白に近づき、淡色の面や境界が軽くなる。0.965–0.990 が目安。
最暗値(950)。下げるほど黒に近づき白字コントラストが向上。UI では 0.24–0.27 が扱いやすい。
明度ラダーの曲率。上げると暗部(900→950)の段差が強くなる。1.1–1.6 を目安。
端(50/950)で彩度をどれだけ落とすか。上げるほど端が落ち着く。0.40–0.75 程度。
彩度減衰のカーブ。上げると中央を強調して端で素早く落ちる。0.9–1.6 が目安。
彩度ピークの位置。-1=明側(300–400)/+1=暗側(600–700)。赤は+寄りが相性良。
| 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
|---|---|---|---|---|---|---|---|---|---|---|
クリックで --color-amber-××× をコピー。基準段は amber-900 として扱えます。 一括コピーボタンで全てのCSS変数を`:root `形式でコピーできます。
| Color | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| slate | |||||||||||
| gray | |||||||||||
| zinc | |||||||||||
| neutral | |||||||||||
| stone | |||||||||||
| red | |||||||||||
| orange | |||||||||||
| amber | |||||||||||
| yellow | |||||||||||
| lime | |||||||||||
| green | |||||||||||
| emerald | |||||||||||
| teal | |||||||||||
| cyan | |||||||||||
| sky | |||||||||||
| blue | |||||||||||
| indigo | |||||||||||
| violet | |||||||||||
| purple | |||||||||||
| fuchsia | |||||||||||
| pink | |||||||||||
| rose |
入力色をベースに全てのTailwind色名でパレットを生成。個別クリックまたは一括コピーでCSS変数を取得できます。
| Color | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| slate | |||||||||||
| gray | |||||||||||
| zinc | |||||||||||
| neutral | |||||||||||
| stone | |||||||||||
| red | |||||||||||
| orange | |||||||||||
| amber | |||||||||||
| yellow | |||||||||||
| lime | |||||||||||
| green | |||||||||||
| emerald | |||||||||||
| teal | |||||||||||
| cyan | |||||||||||
| sky | |||||||||||
| blue | |||||||||||
| indigo | |||||||||||
| violet | |||||||||||
| purple | |||||||||||
| fuchsia | |||||||||||
| pink | |||||||||||
| rose |