カラー ミキサー
2 色と混合比(0-100%)を選択。選んだ色空間で補間 — RGB は最も単純な数学・HSL は色相保持ブレンド・CIELAB は知覚的均一な遷移 — 結果と 11 段階グラデーション ストリップを表示。中間アクセント色の選択・グラデーション カラーストップの生成・なぜ 2 色の中間が濁って見えるかの理解(通常 RGB の中点が知覚的に中間ではないため)に有用。
結果
#8033B3
11 段階ブレンド
LAB が知覚的に最も均一なグラデーション。RGB・HSL は高速だが中間が不均一に見えることも。
使い方
- 色 A・B を設定(hex またはカラーピッカー)。
- RGB・HSL・LAB ブレンディングを選択。
- 比率をスライドまたは 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 付き。
色の明るさ比較 (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 色について同時に比較。「より明るく見えるはず」の色がなぜ暗く感じられるか即座に把握できます。
CMYK ↔ RGB カラー変換ツール(印刷用色空間)
画面用RGB/hexと印刷用CMYKパーセントを相互変換します。Simple、GCR(グレーコンポーネント置換)、UCR(アンダーカラー除去)のブラック生成方式、チャンネル分版プレビュー、総インク被覆率表示に対応。
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー補間 / グラデーションステップ
2 つの 16 進カラーを選び、N の離散中間ステップを得る — sRGB、線形 RGB、OKLab または HSL で — オプションのイージング付き。
Conic Gradient ジェネレーター
CSS `conic-gradient()` のビジュアルビルダー — 回転角度·中心位置·カラーストップ·図形プレビュー。パイチャート·リングチャート·チェック柄·カラーホイールに便利。