Web Utilitiesカラーティント＆シェードジェネレーター
任意のベースカラーからティント、シェード、トーンを生成。Tailwind形式の50〜950カラースケール、CSSカスタムプロパティのコピー、完全なデザインシステムパレットを即座に作成できます。
hsl(217, 91%, 60%)
210
ベースカラー
#3B82F6
CSSカスタムプロパティ
:root {
--tint-1: #DFEAFD;
--tint-2: #BED6FC;
--tint-3: #9EC1FA;
--tint-4: #7DADF9;
--tint-5: #5D98F7;
--color-base: #3B82F6;
--shade-1: #0B64F4;
--shade-2: #0950C3;
--shade-3: #073C92;
--shade-4: #052861;
--shade-5: #021431;
/* Tones */
--tone-1: #4C87E6;
--tone-2: #5B8BD7;
--tone-3: #6B8EC7;
--tone-4: #7A92B8;
--tone-5: #8A95A8;
}ティント
#DFEAFD
#BED6FC
#9EC1FA
#7DADF9
#5D98F7
シェード
Base#3B82F6
#0B64F4
#0950C3
#073C92
#052861
#021431
トーン
#4C87E6
#5B8BD7
#6B8EC7
#7A92B8
#8A95A8
スウォッチをクリックしてHEX値をコピー
関連ツール
カラーティント＆シェードジェネレーターについて
使い方
- カラーピッカーまたはHEX入力フィールドでベースカラーを入力または選択します。
- ステップ数（各側で生成するティントとシェードの数）を選択します。
- クラシックモード（ティント、シェード、トーン）とTailwindモード（50〜950ストップ）を切り替えます。
- スウォッチをクリックしてHEX値を即座にクリップボードにコピーします。
- 「すべてCSSとしてコピー」でパレット全体をCSSカスタムプロパティとして取得します。
主な用途
- UIフレームワーク向けのデザインシステムカラーパレットの構築。
- カスタムテーマ用のTailwind CSS互換カラースケールの生成。
- ブランドアイデンティティを維持したアクセシブルなカラーランプの作成。
- ブランドカラーがすべての明度レベルでどのように見えるかの探索。
- FigmaやStorybookのデザインハンドオフ用カラートークンの作成。
よくある質問
カラーティントとは何ですか？
ティントはベースカラーに白を加えることで作られ、明るくなり彩度が下がります。ティントは元の色相を保ちながら明度を上げ、背景や繊細なUIアクセントに最適なパステル調のバリエーションを生み出します。
カラーシェードとは何ですか？
シェードはベースカラーに黒を加えることで作られ、より暗くなります。シェードは元の色相を保ちながら明度を下げ、テキスト、ボーダー、プレス状態などに広く使われます。
カラートーンとは何ですか？
トーンはベースカラーにグレーを加えることで作られ、明度をほとんど変えずに彩度を下げます。トーンはより落ち着いた色のバリエーションを生み出し、ニュートラルなUIコンポーネントに適しています。
Tailwindスタイルパレットモードとは何ですか？
Tailwindモードは50、100、200、300、400、500、600、700、800、900、950の11ストップを生成し、Tailwind CSSの命名規則に対応しています。tailwind.config.jsに直接組み込めるカスタムカラーファミリーを簡単に作成できます。
生成されたCSS変数はどのように使いますか？
ツールは生成されたすべての色のCSSカスタムプロパティを含む:root { }ブロックを出力します。グローバルスタイルシートにコピーして、var(--tint-1)、var(--shade-3)、var(--color-500)などで参照できます。
何ステップ生成できますか？
クラシックモードではティントとシェードに2〜10ステップを選択できます。各ステップはベースカラーと純白（ティント）または純黒（シェード）の間の明度を均等に配分します。Tailwindモードは常に固定の11ストップスケールを生成します。
個別のカラー値をコピーできますか？
はい。任意のカラースウォッチをクリックするとHEX値が即座にクリップボードにコピーされます。緑のチェックマークで確認できます。「すべてCSSとしてコピー」ボタンでパレット全体をCSSカスタムプロパティとして一括コピーすることもできます。
どのカラー形式に対応していますか？
テキストフィールドに6桁のHEXカラー（例：#3B82F6）を入力するか、ブラウザのネイティブカラーピッカーを使用できます。ツールは正確な明度操作のために内部的にHSLに変換し、出力はHEX形式です。
生成されたパレットはアクセシブルですか？
ツールは知覚的に均等な色を生成しますが、WCAGのコントラスト適合性はテキストと背景色の組み合わせ方によって異なります。UIカラーアクセシビリティチェッカーツールでコントラスト比を確認してください。
デザインシステムにどう役立ちますか？
デザインシステムでは通常、各ブランドカラーに対してフルカラースケール（例：brand-50〜brand-950）が必要です。このツールはそのプロセスを自動化します。ブランドカラーを一度入力するだけで、FigmaトークンやStyle Dictionary、Tailwind設定ファイルに貼り付ける準備ができた完全なスケールが得られます。
このツールはカラーを保存しますか？
いいえ。すべてのカラー計算はJavaScriptを使用してブラウザ内で完全に行われます。サーバーにデータは送信されず、セッション間で何も保存されません。カラーは完全にプライベートです。
ティント/シェードとグラデーションの違いは何ですか？
グラデーションは画像やCSSプロパティで2つ以上の色の間を滑らかに視覚的に遷移します。ティントとシェードは単一の色相ファミリー内の離散した命名されたカラーストップで、デザイントークン内の個別のカラー値として使用され、連続した塗りとしてではありません。