本文へスキップ
AZ Tools

カラー ミキサー

2 色と混合比(0-100%)を選択。選んだ色空間で補間 — RGB は最も単純な数学・HSL は色相保持ブレンド・CIELAB は知覚的均一な遷移 — 結果と 11 段階グラデーション ストリップを表示。中間アクセント色の選択・グラデーション カラーストップの生成・なぜ 2 色の中間が濁って見えるかの理解(通常 RGB の中点が知覚的に中間ではないため)に有用。

結果

#8033B3

11 段階ブレンド

0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

LAB が知覚的に最も均一なグラデーション。RGB・HSL は高速だが中間が不均一に見えることも。

使い方

  1. 色 A・B を設定(hex またはカラーピッカー)。
  2. RGB・HSL・LAB ブレンディングを選択。
  3. 比率をスライドまたは 11 段階ストリップを確認。

よくある質問

なぜ RGB ブレンドは中間が濁って見えるの?
RGB はチャンネル値を直接平均。彩度の高い赤から彩度の高い青へ移行する際、緑チャンネルが 0 のままなので中間が低彩度の紫がかった灰色。中間の彩度を保つには HSL または LAB を試して。
LAB はいつ使う?
LAB は知覚的均一 — 同じ数値ステップが同じ知覚ステップに見える。グラデーションの滑らかさが重要な時に最適。モダンブラウザの CSS `color-mix(in lab, …)` も同じ。
HSL で 2 色が反対色のとき色相は?
HSL は色相環の短い弧を選択。赤(0°)とシアン(180°)の混合は曖昧 — ツールがどちらかの方向を選ぶ;結果が予想外なら LAB を試して。
50% 混合が視覚的に正確に中間でない理由は?
LAB のみ知覚的中間結果を提供。RGB・HSL の中点は数学的中間 — しばしば 2 端点の暗い方に知覚的に近い。

関連ツール

CSS color-mix() プレビュー (補間空間の比較)

モダン CSS の color-mix() 関数が補間空間 (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) によって 2 色をどう異なる結果で混ぜるかを並べて比較 — ライブスウォッチ、計算済み hex、各空間のフルグラデーション、コピー可能な CSS 付き。

カラー 0 0

色の明るさ比較 (HSL vs Lab L* vs WCAG vs HSP)

HSL 明度・HSV 値・WCAG 相対輝度(LRV)・CIE Lab L*(知覚明度)・Rec. 709 ルーマ・HSP 知覚明度・素朴な (R+G+B)/3 など 7 種の明るさ指標を、1 色または 2 色について同時に比較。「より明るく見えるはず」の色がなぜ暗く感じられるか即座に把握できます。

カラー 0 0

CMYK ↔ RGB カラー変換ツール(印刷用色空間)

画面用RGB/hexと印刷用CMYKパーセントを相互変換します。Simple、GCR(グレーコンポーネント置換)、UCR(アンダーカラー除去)のブラック生成方式、チャンネル分版プレビュー、総インク被覆率表示に対応。

カラー 0 0

CSS グラデーションジェネレーター

線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。

カラー 0 0

カラー補間 / グラデーションステップ

2 つの 16 進カラーを選び、N の離散中間ステップを得る — sRGB、線形 RGB、OKLab または HSL で — オプションのイージング付き。

カラー 0 0

Conic Gradient ジェネレーター

CSS `conic-gradient()` のビジュアルビルダー — 回転角度·中心位置·カラーストップ·図形プレビュー。パイチャート·リングチャート·チェック柄·カラーホイールに便利。

カラー 0 0