カラー ミキサー
カラー
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 は高速だが中間が不均一に見えることも。
使い方
- 色 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 端点の暗い方に知覚的に近い。
関連ツール
色覚シミュレーター
8 種類の色覚異常（CVD）で画像がどう見えるかを再現。
カラー00
CSS Box Shadow ジェネレーター
複数レイヤーで CSS box-shadow を視覚的にデザイン — リアルタイムプレビュー + CSS / Tailwind 出力。
カラー00
カラーフォーマット変換
任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。
カラー00
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー00
カラーパレット ジェネレーター
基準色から 6 種類のスキームで調和の取れたパレットを作成。
カラー00
カラーコントラスト チェッカー
文字／背景のコントラストを WCAG AA・AAA 基準でチェック。
カラー00