読みやすいデザイントークン
各段階に安定した役割とCSS変数名があります。ハイライト、ベース、影を手入力せず、検討段階からコンポーネントやデザインシステムへ移せます。
無料ブラウザカラーツール
明るい色とトゥーン影のカラーシェード生成ツール
1つのベース色から5・7・9段階のパレットを作成します。規則的なティントとシェード、表情のあるトゥーン配色を切り替え、アップロードなしで実装用の値をコピーできます。
2026年7月23日更新
カラーシェード生成ツール
このカラーシェード生成ツールで何が作れますか？
3桁または6桁の有効なHEXを、元の色を中央に正確に残した段階配色へ変換します。クラシックは白へ混ぜてティント、黒へ混ぜてシェードを作ります。トゥーンは色相・彩度・明度を同時に動かし、暖かいハイライトと冷たい影を作ります。各色にはHEX、RGB、HSB、白文字と黒文字のコントラスト、コピー操作、CSSカスタムプロパティ、ローカル生成PNGが付きます。
1つのベース色から得られる3つの成果
名前のない装飾的な色列ではなく、役割を持つ配色システムとして使えます。
見えるコントラスト確認
全色で白・黒との比率を表示します。通常文字AA、大きな文字AA、基準未満の表示により、完成画面を検証する前の候補を絞れます。
アニメ調の影
トゥーンでは明暗に合わせて色相を控えめに動かします。キャラクター、ゲームUI、バッジ、フラットなイラストの生きた色族を作る出発点になります。
HEX · RGB · HSB · WCAG
明るい色から影までの配色を生成
ベース色、方式、段階数を選ぶと、ブラウザ内ですぐに配色が更新されます。
ティント 3#D1EFF6
RGB 209, 239, 246
HSB 191°, 15%, 96%
- 白文字
- 1.21:1AA未満
- 黒文字
- 17.39:1通常文字AA
--toon-shade-01ティント 2#9FDEED
RGB 159, 222, 237
HSB 192°, 33%, 93%
- 白文字
- 1.48:1AA未満
- 黒文字
- 14.15:1通常文字AA
--toon-shade-02ティント 1#6ACCE3
RGB 106, 204, 227
HSB 191°, 53%, 89%
- 白文字
- 1.85:1AA未満
- 黒文字
- 11.36:1通常文字AA
--toon-shade-03ベース#2FB8D8
RGB 47, 184, 216
HSB 191°, 78%, 85%
- 白文字
- 2.34:1AA未満
- 黒文字
- 8.97:1通常文字AA
--toon-shade-04シェード 1#22869E
RGB 34, 134, 158
HSB 192°, 78%, 62%
- 白文字
- 4.22:1大文字AA
- 黒文字
- 4.97:1通常文字AA
--toon-shade-05シェード 2#175A6A
RGB 23, 90, 106
HSB 192°, 78%, 42%
- 白文字
- 7.76:1通常文字AA
- 黒文字
- 2.71:1AA未満
--toon-shade-06シェード 3#0C3038
RGB 12, 48, 56
HSB 191°, 79%, 22%
- 白文字
- 14.04:1通常文字AA
- 黒文字
- 1.50:1AA未満
--toon-shade-07:root {
--toon-shade-01: #D1EFF6;
--toon-shade-02: #9FDEED;
--toon-shade-03: #6ACCE3;
--toon-shade-04: #2FB8D8;
--toon-shade-05: #22869E;
--toon-shade-06: #175A6A;
--toon-shade-07: #0C3038;
--toon-shade-base: var(--toon-shade-04);
}使えるカラーシェードを作る方法
元の値、間隔、用途が明確なら配色は再利用できます。作成や修正のたびに同じ短い手順を使いましょう。
1. 根拠のあるHEXから始める
圧縮されたスクリーンショットを推測せず、デザインファイル、ブランドトークン、確認済みのサンプル値を使います。中央はそのHEXを正確に保つため、周辺色の由来も追跡できます。
2. 目的で方式を選ぶ
背景、境界線、グラフ、状態色には予測しやすいクラシックが向きます。トゥーンは光と影のための創作的な目安です。両方を比べ、色相変化が階層を改善しないなら単純な方式を選びます。
3. 実際の文脈で確認する
比率は候補を絞る初期チェックです。公開前に文字サイズ、太さ、周辺色、フォーカス、操作状態を確認します。1つの色が合格してもコンポーネント全体のアクセシビリティは保証されません。
クラシックとトゥーンの違い
どちらも中央のベース色を守りますが、想定する用途と変換方法が異なります。
| 方式 | 色の変化 | 向く用途 | 注意点 |
|---|---|---|---|
| クラシック | RGBを白または黒へ線形に混色 | UI面、境界線、グラフ、規則的なトークン | 中間色が灰色っぽく機械的に見える場合がある |
| トゥーン | HSBの明度曲線と小さな色相・彩度変化 | キャラクター、ゲームUI、ステッカー、平面イラスト | 創作の出発点であり公式ブランド仕様ではない |
| コントラスト | 純白・純黒とのWCAG相対輝度比 | 各色の前景文字を早く絞り込む | 実際の書体、サイズ、状態、部品で再確認する |
シェード計算の仕組み
奇数の段階数は中央を1つ作ります。5段階なら明るい色が2つ、元のベース、暗い色が2つです。7段階と9段階では両側の間隔が細かくなります。クラシックのティントはRGB各チャンネルを255へ近づけ、シェードは0へ近づけます。端を純白や純黒まで進めないため色の個性が残ります。ベースは再計算しないので、HEX、RGB、HSBは入力値と一致します。
トゥーンは別の曲線です。ハイライトは明度を上げ、彩度を少し下げ、暖色方向へ数度動かします。影は明度を下げ、彩度を少し上げ、反対方向へ動かします。中央から離れるほど変化は大きくなります。これは物理的な照明シミュレーションではなく、明示されたデザイン上の目安です。素材、環境光、反射色、構図によって適切な方向は変わるため、編集可能な下書きとして扱います。
規格、測定値、方式の根拠
再現できる計算と創作判断を分けています。次の一次資料が値の形式、用語、コントラスト基準を説明します。
- CSS Color Module Level 4は6桁HEXを3つの8ビットsRGBチャンネルとして定義します。各チャンネルは256値で、アルファを除き16,777,216通りのRGBを表せます。 W3C CSS Color Module Level 4
- WCAG 2.2のAAは通常文字に4.5:1、大きな文字に3:1を求め、強化基準は通常文字に7:1を用います。 W3C Web Content Accessibility Guidelines 2.2
- クラシックは再現可能なRGB補間です。トゥーンはToon Toneのデザイン目安であり、照明モデル、公式ブランド配色、アクセシビリティの証明ではありません。 W3C colour theory reference
WCAG 2.2の原文:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
この配色で次にできること
カラーシェード生成のFAQ
ティントとシェードの違いは？
白へ混ぜた色がティント、黒へ混ぜた色がシェードです。トーンは一般にグレーを加えます。このツールは正確なベースの前にティント、後ろにシェードを並べます。
元のHEXは保たれますか？
はい。3桁HEXは6桁へ展開され、正規化された値が5・7・9段階すべての中央にそのまま残ります。
UIデザインにはどちらが向きますか？
予測しやすい面、境界線、状態色はクラシックから始めます。ゲームやイラストで暖かい光と冷たい影が有効ならトゥーンも比較します。
WCAG表示だけでアクセシブルですか？
いいえ。純白・純黒との比率だけです。実際の前景、背景、文字サイズ、太さ、状態、コンポーネント全体を確認する必要があります。
色はアップロードまたは保存されますか？
アカウントもアップロードも不要です。生成、コピー、コントラスト計算、PNG描画はブラウザ内で行い、端末上でダウンロードを作ります。