カラーミキサー
色だけでなく計算方法も確認
カラーミキサーは結果の横に補間色空間を明記します。端点と比率を固定したまま方式だけを切り替えられるので、見た目の差が入力変更ではなく計算方法から生じたことを確認できます。デザインレビューや実装引き継ぎでも判断理由を短く説明できます。
2色 · 3色空間 · 7段階 · ブラウザ内処理
デジタル配色を正確に作るオンラインカラーミキサー
2つのHEXカラーを0〜100の正確な比率で混ぜ、3種類の補間色空間を同じ条件で比較できます。結果のHEX・RGB・HSBを確認し、そのまま使えるCSSのcolor-mix()もコピーできます。このカラーミキサーはすべての計算をブラウザ内で行い、パレット、UI、イラスト、キャラクター配色に採用する前に途中の色を見える形で示します。
更新日: 2026年8月11日
カラーミキサー
このカラーミキサーは何を計算する？
このカラーミキサーは、不透明な2つのsRGB端点色の間を数学的に補間します。各端点の割合を決め、一般的なWeb表現に近いsRGB、光の強度に沿うリニアsRGB、知覚的に整理された経路を得やすいOKLCHから方式を選びます。色空間ごとに平均する座標が違うため、同じ比率でも結果は変わります。
初期値の#FF5A5Fと#2F80EDを50対50で混ぜると、sRGBでは#976DA6、リニアsRGBでは#BE6FB8、OKLCHでは#C060D6になります。どれも選んだ計算方式に対して正しい答えです。カラーミキサーはさらに7つの等間隔スウォッチを作り、選択した色をHEX、RGB、HSBへ変換します。
カラーミキサー
複数の混色方式を比べる理由
1つの中間色だけを見ると、端点間をどの座標系で移動したかという重要な判断が隠れます。方式を並べて比較すれば、説明のない初期値ではなく、実際の視覚用途に合う結果を選べます。
カラーミキサー
実務で使える形式をまとめてコピー
各結果を大文字HEX、モダンRGB、丸めたHSB、CSS color-mix()として取得できます。カラーミキサーは状態色、グラフ、イラストの推移、パレット探索に使える7段階の色も表示するため、中間比率を手計算する必要がありません。
カラーミキサー
未公開の配色をブラウザ内に保持
端点、割合、計算結果、コピー値は現在のブラウザだけで扱われます。カラーミキサーは画像をアップロードせず、アカウントも要求しません。公開前のブランドカラー、クライアントのパレット、初期段階のキャラクター配色を検討するときにも使いやすい設計です。
カラーミキサー
インタラクティブカラーミキサー
2つのHEX端点と割合を設定し、同じ混色を3色空間で比較します。
混色結果#976DA6sRGB
カラーミキサー
結果の値
- HEX
- #976DA6
- RGB
- rgb(151 109 166)
- HSB
- hsb(284° 34% 65%)
CSS COLOR 5
CSS color-mix()
color-mix(in srgb, #FF5A5F 50%, #2F80ED 50%)対象ブラウザ方針で必要な場合は、計算済みHEXをフォールバックに使ってください。
カラーミキサー
7段階の混色
スウォッチを選ぶとHEXをコピーできます。
#FF5A5F#DC6077#BA678E#976DA6#7473BE#527AD5#2F80ED
プライバシー重視: すべての色はこのブラウザ内だけで混ぜられます。
カラーミキサー
再現できる3段階の混色手順
出力を偶然の見た目ではなく再現可能な判断として扱います。端点を固定し、色空間を比較し、最後に実際の背景と部品の中で検証してください。
カラーミキサー
1. 端点色と役割を固定する
3桁または6桁のHEXを入力するか、色入力を使います。単に左と右と呼ぶのではなく、背景、表面、アクセントなど意味のある役割を付けます。役割を固定しておけば、後から比率を変えた理由をチームで共有しやすくなり、同じ条件を再現できます。
カラーミキサー
2. 同じ比率を3色空間で比較する
まず50対50に設定し、sRGB、リニアsRGB、OKLCHを順に切り替えます。その後、比率を1ポイントずつ動かし、明るさ、鮮やかさ、色相を別々に観察します。カラーミキサーは比較中も2つの端点を保持するため、条件を混同しません。
カラーミキサー
3. 採用色を実際の文脈で試す
選んだ値を本番のコンポーネント、イラスト、グラフへコピーします。背景とのコントラスト、隣接色、ライトとダークの両テーマ、対象ブラウザを公開前に確認します。魅力的な中間色でも、読みやすい文字色や安全なデザイントークンとは限りません。
カラーミキサー
sRGB・リニアRGB・OKLCHの違い
端点と割合が同じでも、中間色ははっきり変わります。各方式が何を補間し、どの用途に向き、採用前に何を確認すべきかを整理します。
| 方式 | 補間する値 | 向いている用途 | 確認点 |
|---|---|---|---|
| sRGB | ガンマ符号化された赤・緑・青 | 従来のWeb挙動と慣れた簡易混色 | 中央が暗く灰色寄りに見える場合がある |
| リニアsRGB | 光強度に対して線形な赤・緑・青 | 光に近い合成と明るさを保つ推移 | 一般的なUI混色より明るく見える場合がある |
| OKLCH | 知覚明度・彩度・短い経路の色相 | 均一に見える段階と鮮やかな配色 | 高彩度色はsRGB変換時にクリップされ得る |
カラーミキサー
混色を公開する前のチェックリスト
生成色を本番値にする前に、入力、方式、表示条件、意味上の役割を確認します。見た目のよい実験が説明できないトークンになるのを防げます。
- カラーミキサー2つの6桁HEX端点と、それぞれの意味上の役割を記録する。
- 正確な割合を記録し、2つの重みの合計が100%か確認する。
- 補間色空間としてsRGB、リニアsRGB、OKLCHのどれかを明記する。
- 全段階を判断する前に0%、50%、100%の位置を確認する。
- 本番背景上で文字とUIのコントラストを検証する。
- 必要な環境ではCSS式と静的フォールバックの両方を試す。
- 絵具、インク、染料の判断なら物理サンプルを作る。
カラーミキサー
デジタル混色と顔料混色は別物
このカラーミキサーは画面上の色座標を補間します。実物の顔料は吸収、散乱、不透明度、媒体、濃度、下地で反応するため、2つの絵具からRGBやOKLCHの中間値とは違う色が生まれます。材料色は試し塗りやメーカーの測定データで判断してください。
カラーミキサー
標準仕様と再現できる測定例
このページの方式と用語は、Webプラットフォームで公開された色補間モデルに基づきます。数値例は画面に表示された初期端点から再現でき、方式選択を監査できます。
- 割合は0%から100%まで1ポイント刻みで操作できます。
- 比較する色空間はsRGB、リニアsRGB、OKLCHの3種類です。
- #FF5A5Fと#2F80EDの50対50は、sRGBで#976DA6になります。
- 同じ端点はリニアsRGBで#BE6FB8、OKLCHで#C060D6になります。
- 7段階は表示上0%、17%、33%、50%、67%、83%、100%です。
CSS Color Module Level 4の説明:
Mixing or otherwise combining colors has different results depending on the interpolation color space used.
カラーミキサー
次のカラーワークフローへ
カラーミキサー
カラーミキサーのよくある質問
カラーミキサー
色を混ぜるのに最適な色空間は？
万能な1種類はありません。従来のWeb挙動に合わせるならsRGB、光強度を反映したいならリニアsRGB、知覚的な均一さや鮮やかさを重視するならOKLCHを検討します。同じ端点を3方式で比較してから選んでください。
カラーミキサー
50対50でもモードごとに色が違うのはなぜ？
方式ごとに平均する座標が異なるためです。ガンマ符号化sRGB、リニア光RGB、OKLCHの明度・彩度・色相は同じ経路を表さないので、端点の重みが同じでも見える中間色は変わります。
カラーミキサー
HEXをアップロードなしで混ぜられる？
はい。3桁または6桁のHEXを入力してください。このカラーミキサーはブラウザ内で計算し、パレットをサーバーへ保存せず、画像アップロードやアカウントも必要ありません。
カラーミキサー
CSSのcolor-mix()は何をする？
対応ブラウザに補間色空間、2つの端点色、割合を伝えます。生成値をCSSの色プロパティへ入れ、対象ブラウザ方針で必要な場合は検証済みの静的色を先にフォールバックとして指定します。
カラーミキサー
7段階をそのままデザインスケールにできる？
出発点として使えますが、残す各段階に実際の役割を割り当て、コントラストと隣接状態を確認し、使わない値は削除してください。色空間上の等間隔だけでは、アクセシブルで保守しやすいトークン体系になりません。
カラーミキサー
このカラーミキサーで絵具の混色を予測できる？
できません。デジタル座標を補間するツールであり、顔料化学、分光反射、不透明度、下地をモデル化しません。最終出力が絵具、インク、染料などの場合は、実物を混ぜて校正してください。