カラー変換
HEX・RGB・HSL・OKLCH変換＋ピッカー・履歴。
▤
Tint / Shade / Tone 生成
ベース色からTint・Shade・ToneスケールとTailwind風50–950ランプを生成。
50
#f2f6fc
W 1.08:1 不適合B 19.36:1 AA
100
#e5edfa
W 1.18:1 不適合B 17.83:1 AA
200
#c1d5f6
W 1.49:1 不適合B 14.12:1 AA
300
#95b9f3
W 2:1 不適合B 10.51:1 AA
400
#5e96f3
W 2.94:1 不適合B 7.13:1 AA
500
#2473f5
W 4.33:1 AA近いB 4.85:1 AA
600
#1161e3
W 5.46:1 AAB 3.84:1 不適合
700
#1452b8
W 7.17:1 AAB 2.93:1 不適合
800
#154593
W 9.11:1 AAB 2.3:1 不適合
900
#143770
W 11.6:1 AAB 1.81:1 不適合
950
#0f2343
W 15.65:1 AAB 1.34:1 不適合
500 が入力した色に最も近い段です（明度が最も近い）。
:root {
--color-50: #f2f6fc;
--color-100: #e5edfa;
--color-200: #c1d5f6;
--color-300: #95b9f3;
--color-400: #5e96f3;
--color-500: #2473f5;
--color-600: #1161e3;
--color-700: #1452b8;
--color-800: #154593;
--color-900: #143770;
--color-950: #0f2343;
}ティント・シェード・トーンはsRGB上の単純な線形混色です。Tailwindランプは色相を保ったまま明度カーブを合わせ、両端はやや彩度を落としています。
Tint / Shade / Tone 生成について
Tint / Shade / Tone 生成とは、ベース色に白・黒・灰を混ぜて明度の異なる段階スケールを作る手法です。「ブランドカラーを1色決めたら、そこから50〜950の全段階を用意してほしい」というデザインシステム構築の実務的な要望に応えるのが本ツールの狙いで、色相環の理論だけでなく、そのままTailwindの設定に貼り付けられる出力まで用意しています。
Tint（ティント）はベース色に白を混ぜて明るくした段階、Shade（シェード）は黒を混ぜて暗くした段階、Tone（トーン）は中間グレー（#808080）を混ぜて彩度を落とした段階です。混色はsRGB上でチャンネルごとに単純に線形補間しており、「白を20%混ぜる」と聞いて誰もが想像する結果と一致するようにしています。5段階・10段階を選べ、いずれもベース色自体を起点（0%）として含みます。
Tailwindランプタブでは、入力したベース色の色相を保ったまま、Tailwindの標準パレットに近い明度カーブ（50が最も明るく、950が最も暗い）で11段を自動生成します。両端は彩度をわずかに落とし、不自然にネオン色っぽくならないよう調整しています。11段のうち、入力した色の明度に最も近い段には印が付き、「自分の色は600番相当に近い」といった判断がひと目でできます。CSS変数・Tailwindの `colors` 設定断片・HEX一覧の3形式でコピーでき、すべてブラウザ内で完結します。
使い方
- ベース色をHEX・RGB・HSLで入力（またはカラーピッカーで選択）
- Tailwindランプ、またはTint/Shade/Toneと段階数（5/10）を選ぶ
- 最も近い段の印を確認し、CSS/Tailwind/HEXをコピー
よくある質問（FAQ）
TintとShade、Toneの違いは何ですか？
Tintはベース色に白を混ぜて明るくした段階、Shadeは黒を混ぜて暗くした段階、Toneは中間グレー（#808080）を混ぜて彩度を落とした段階です。いずれもsRGB上でチャンネルごとに単純な線形補間をしています。
Tailwindランプはどう使えばいいですか？
入力したベース色をブランドカラーとみなし、そこから50（最も明るい）〜950（最も暗い）の11段を自動生成します。ハイライトされた段が入力色に最も近い明度なので、既存のTailwind設定でどの番号付近に置き換えればよいかの目安になります。Tailwindタブの出力はそのまま `theme.extend.colors` に貼り付けられます。
なぜ単純な線形混色を採用しているのですか？
OKLabなど知覚的に均等な色空間で混ぜる方式もありますが、「白を20%混ぜる」と聞いて誰もが想像する結果と一致させることを優先しました。単純で予測しやすい分、明度の変化が視覚的に均等でないことがあります。厳密な知覚均等性が必要な場合は最終的な目視確認を併用してください。
5段階と10段階はどう違いますか？
どちらもベース色自体を0%として含み、そこから均等割りした比率（5段階なら20%刻み、10段階なら10%刻み）で白・黒・灰へ近づけます。細かい調整をしたい場合は10段階を選んでください。
入力した色は外部に送信されますか？
いいえ。スケール生成・コード整形はすべてブラウザ内のJavaScriptで完結し、toco.toolsのサーバーへは送信されません。