カラーミキサー — N 色を RGB / HSL / OKLCH / LAB で混色して並列比較
複数の色 (2〜8 色) を重み付きで混色し、結果を **4 つの色空間 (sRGB / HSL / OKLCH / LAB) 並列** で表示します。同じ青と黄色を混ぜても、sRGB では濁った緑、OKLCH では鮮やかな緑になる ── というカラーサイエンスの古典的な差異を視覚化。デザイントークンの中間色生成、ブランドカラーのチント/シェード作成、A/B 案の知覚的差を比較する用途に。各色の重み (0.0〜1.0) は自由調整、3 色以上のミックスもサポート。`color-blend` (2 色を N ステップで補間してパレット化) の補完ツールで、本ツールは **N 色 → 1 色 + 色空間比較** に特化。結果は HEX / CSS で個別コピー、色空間別 swatch をクリックでも瞬時にコピー。すべてブラウザ内で完結、外部送信なし。
使い方
入力カラーに色 (HEX) と重み (0.0〜1.0) を指定。最大 8 色まで追加可能。 混色結果が 4 つの色空間 (sRGB / HSL / OKLCH / LAB) で同時に計算されて並列表示されます。 各 swatch をクリックすると HEX をクリップボードへコピー。 サンプルボタンで「青+黄」「ブランド 3 色」「サンセット 4 色」など定番のミックスを試せます。
詳細解説
ブランドカラーの混色計算が外部ログに残るリスク
混色ツールを使う場面は、複数のブランドカラーを組み合わせて中間色を探したいとき、UI の hover 状態の色をベース色とサーフェス色から求めたいとき、デザインシステム内でグラデーションの中間点を計算したいときなどです。どの場面でも、入力する HEX の組み合わせはブランドの配色方針そのものを示します。
オンラインサービスで同じ計算を行うと、「どの色とどの色を、どの比率で混ぜたか」というログがサーバーに残ります。競合他社への情報露出というリスクは低く見られがちですが、未発表製品のカラーパレット検討中に外部サービスを使うことは、設計情報の意図しない開示につながりえます。
色空間によって「中間色」の答えが変わる理由
オンラインの混色サービスの多くは sRGB チャンネルの単純平均だけを返します。しかし知覚的に「中間に感じる色」は、sRGB の算術平均とは一致しないことがあります。青 (#0000FF) と黄 (#FFFF00) の sRGB 平均は灰色 (#808080) ですが、OKLCH 空間での混色は視覚的に中間と感じられる色を返します。
このような差を確認するためには、複数の色空間で同時に計算する必要があります。sRGB / HSL / OKLCH / LAB の 4 空間を並列表示することで、どの色空間が目的のユースケースに合うかを比較しながら選べます。これはブラウザ内の JavaScript で完結する純粋な算術処理であり、外部通信を必要としません。
ブラウザ内完結の色空間変換と重み付き平均
このツールは sRGB、HSL、OKLCH、LAB の 4 色空間それぞれで重み付き平均を計算します。HSL の色相平均は円環の折り返し問題があるため、各 hue を複素数 (cos, sin) に変換して加重平均を取り、atan2 で復元する標準的な手法を使います。OKLCH と LAB への変換は CIE 規格の行列演算とガンマ補正で実装されています。
これらの計算はすべてブラウザの JavaScript エンジン内で完結します。入力した HEX 値はページメモリに留まり、外部サーバーへは送信されません。DevTools の Network タブを確認することでリクエストゼロを目視確認できます。実装は GitHub で公開されており、変換式まで含めて監査が可能です。
混色結果を実務で使う前に確認したいこと
混色で求めた色をデザインに採用する前に、いくつかの確認を推奨します。求めた色が目的のコントラスト比を満たすか (color-contrast-checker)、色覚多様性のあるユーザーに対して識別可能か (color-blindness-sim)、そして実際の画面上で元の 2 色との調和が取れているかを確認してください。4 つの色空間で比較表示される結果のうち、どれが最も自然な中間色に見えるかは、最終的には目で判断する必要があります。混色結果の HEX をさらに別の色空間 (Oklab / Lab / HCL) で精査したい場合は color-converter で 1 色を 5 種類以上の表記に展開できます。
sRGB / HSL / OKLCH / LAB それぞれの計算式の中身
sRGB の混色は最も単純で、各チャンネルの 8-bit 値 (0-255) を重み付き平均するだけです。ただし sRGB はディスプレイのガンマカーブ (約 2.2 乗) に合わせた非線形色空間で、#000000 と #FFFFFF の中間 #808080 は知覚的には灰色の真ん中ではなく、もう少し明るい位置にあるべきです。この問題に対しては、リニア sRGB (ガンマ補正を解除した線形空間) で平均してから sRGB に戻す方法が知られていますが、本ツールは単純な sRGB 平均と OKLCH / LAB の知覚均等空間を並列に表示することで、用途に応じて選べるようにしています。
OKLCH は L (Lightness) / C (Chroma, 彩度) / H (Hue, 色相) の極座標表現を持つ Oklab 色空間 (Björn Ottosson, 2020) のバリアントで、知覚的に均等な距離を保証します。CIE LAB (1976) は L (明度) / a (緑-赤軸) / b (青-黄軸) の直交座標で、Munsell の知覚均等色空間を線形変換で近似したものです。両者とも CIE XYZ を経由した変換行列を持っており、本ツールでは Bradford 適応や Hunt-Pointer-Estevez の係数を使った標準的な実装を取っています。HSL は色相が円環なので、平均する際は単純な角度平均ではなく (cos H, sin H) ベクトル平均から atan2 で復元する手法 (Mardia の循環統計学) を使います。
CSS Color Module Level 4 と color-mix() 関数
CSS Color Module Level 4 (W3C Working Draft, 2024 年現在) は、ブラウザ標準で color-mix(in oklch, #ff0000 50%, #00ff00 50%) のような構文をサポートしています。色空間を in oklch / in lab / in srgb で明示的に指定でき、ブラウザが知覚均等な混色を実行してくれます。Chrome 111+ / Safari 16.2+ / Firefox 113+ で利用可能で、Tailwind v4 も内部的にこの仕組みを採用しています。
実務的な落とし穴として、color-mix(in srgb, ...) と color-mix(in oklch, ...) の結果は同じ入力でも見た目が異なるため、デザインシステムを実装する際は 色空間を統一する ことが重要です。Tailwind の opacity utility (bg-blue-500/50) も内部で OKLAB ベースの混色を行っており、rgba(59, 130, 246, 0.5) の sRGB 単純合成とは結果が違います。本ツールで 4 空間を並列確認しておくと、CSS の color-mix() を実装する前に、どの色空間が目的のデザイントーンに合うかを事前に判断できます。2 色間を「中間点 1 つ」ではなく「N 段階の補間スケール」として展開したい場合は color-blend が同じ色空間別補間を 11 段階以上で連続的に提示するので、本ツールの中間色判定と組み合わせるとパレット設計が一段速くなります。
よくある質問
- なぜ色空間によって結果が違う?
- 色の「平均値」の定義が空間によって違うためです。sRGB の RGB チャンネルを単純平均すると、知覚的に濁った中間色になることが多い (青 + 黄 → 暗いカーキ)。OKLCH や LAB は **知覚均一性** を考慮した空間なので、人間が「ちょうど中間」と感じる色を返します (青 + 黄 → 鮮やかなグレー)。
- color-blend との違いは?
- color-blend は **2 色を N ステップで補間** してパレットを作るツール (例: blue → green の 11 段階)。本ツールは **N 色を 1 色に混色** + 色空間比較に特化。「2 色を間で割って 1 色出したい」「3 色以上の重み付き平均が欲しい」「同じミックスを 4 つの空間で並べたい」用途は本ツール。
- OKLCH と LAB はどう違う?
- どちらも知覚均一空間ですが、OKLCH は 2020 年に Björn Ottosson が提案した新しい空間で、LAB の弱点 (青の色相シフト、彩度の歪み) を改善しています。CSS Color Module Level 4 で標準化され `oklch()` が使えます。LAB は CIE 1976 規格で、歴史的に長く使われてきました。実務では OKLCH を優先 → LAB は学術文脈やレガシー互換に。
- 重み付け (weight) の意味は?
- 各色の平均への寄与度です。重み 1.0 / 1.0 = 50% : 50% の単純平均、2.0 / 1.0 = 2:1 (片方が 2 倍寄与)。0 にすると実質除外。重みは内部で正規化されるので、合計が 1 になるよう自動調整されます。
- HSL の色相平均はどう計算してる?
- 色相は円環 (0〜360°) なので単純平均はバグります (例: 350° と 10° の平均は 180° になっちゃう)。本ツールは **複素数表現** で hue を sin/cos 分解 → 加重平均 → atan2 で復元する標準テクニックを使用。350° と 10° の平均は 0° (赤) になります。
- 「青 + 黄 = 緑」じゃないの?
- RGB の青 (#0000FF) と黄 (#FFFF00) を **加法混色** で平均すると `#808080` (グレー) になります。「青と黄を混ぜると緑になる」のは **減法混色** (絵具・印刷インク) の話で、RGB の加法混色とは別系統です。本ツールは光学的加法混色 (sRGB / OKLCH / LAB) で計算しています。
- データはサーバーに送信されますか?
- いいえ。すべてブラウザ内で計算されます。
「送らない」を確かめるには
このツールは入力データを外部に送信しません。仕組み・監査手順・運営方針は以下で詳しく説明しています。
類似のツール
色補間 — 2 色を N ステップで混ぜてパレット生成
2 色 (HEX または CSS 色名) を線形補間して N 段階のパレットを生成します。補間モードは RGB (素直な混色) と HSL (色相を最短距離で回す混色)。Tailwind 風の 11 階調を作る、デザイントークン用のシェード生成、グラデーション CSS の中間色サンプル、アクセシビリティのテキスト読み取り用カラーステップ作成、といった用途に。各 swatch は HEX をクリックでコピー、CSS `linear-gradient` 文字列もコピー可能。すべてブラウザ内で完結します。
カラー変換 — HEX / RGB / HSL / HSV を相互
HEX・RGB・HSL・HSV をリアルタイムに相互変換できるカラーピッカー付きツール。どの欄を編集しても他の 3 表記が即座に追従。すべてブラウザ内で動作し、入力した色情報は外部に送信されません。
CSS グラデーション生成 (linear / radial / conic)
linear-gradient / radial-gradient / conic-gradient の 3 種類を **Mode 切替** で組めるブラウザ完結ビルダー。色ストップを追加・削除しながらライブプレビュー、角度 (linear / conic) や形・サイズ (radial)、中心位置 (radial / conic) を調整、CSS 文字列を `background: ...` 形式または値だけで出力します。Tailwind の任意値クラス `bg-[linear-gradient(...)]` にもそのまま貼れる形式。プレビュー / 計算はすべてブラウザ内で完結し、サーバーへ送信しません。
画像カラーパレット抽出 (主要色・配色を取得)
画像をドロップすると、median cut 量子化で主要な色を抽出し、各色の HEX / RGB 値と占有率を一覧表示します。色数 (4〜16) を選べ、占有率バーで配色バランスも確認可能。各色クリックで HEX をコピー、パレット全体を HEX 一覧 / CSS 変数 / JSON でコピーできます。画像はブラウザ内でだけ解析され、外部に送信されません。