色の濃淡（シェード）ジェネレーター

色の濃淡（シェード）ジェネレーター: 用途

色を1つ選ぶと、色空間OKLCHで計算した、ほぼ白からほぼ黒までの11段階の濃淡を生成します。色相は変わらず、段階ごとに明度だけが変わります。ベースカラーは、明度が最も近い段階にそのまま入ります。

色をタップするとHEXをコピーでき、好きな名前を付けたすべてのCSS変数やtailwind.config用のオブジェクトもコピーできます。

使い方

1. セレクターでベースカラーを選ぶか、HEXを入力します。
2. 色に名前を付けます。
3. 色、CSS変数、またはTailwind用のスケールをコピーします。

使うタイミング

• サイトやデザインシステムのパレットを作る。
• 同じ色で、背景用の明るい色とテキスト用の暗い色をそろえる。
• Tailwindでブランドカラーを設定する。

よくある質問

濃淡はどのように計算されますか？

人の目の知覚に沿った色空間OKLCHで計算します。ベースカラーの色相は保ち、段階ごとに明度を変え、明るい色と暗い色が派手になりすぎないよう両端で彩度を下げます。

自分の色はスケールのどこに入りますか？

ベースカラーは明度が最も近い段階に置かれ、その段階にはあなたの色がそのまま使われます。その段階には印が付きます。

TailwindやCSSではどう使いますか？

CSS変数（--cor-50 から --cor-950）か、tailwind.config用のオブジェクトをコピーしてください。名前欄で色の名前を変更できます。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール