データ変換
色の混色
2つの色を指定した割合で混ぜた色・間の色の並びを作ります。
入力内容はサーバーへ送信されませんインストール不要無料で使えます
入力例
結果
色A・色Bを入力して「混ぜる」を押してください。
このツールでできること
色の混色にまつわる主な機能です。
- 2つの色を指定した割合で混ぜた色を作れます
- 2色の間を等間隔に補間した色の並び(段階数2〜10)を作れます
- テキスト入力・カラーピッカーどちらからも色を指定できます
- 入力・表示はブラウザ内で処理し、サーバーへ送信しません
手順を見る
- 色A・色Bをテキストまたはカラーピッカーで指定します
- 割合・段階数・出力書式を選びます既定は50%・5段階です
- 「混ぜる」を押します
- 単一の結果と間の色の並びを確認し、コピーします
こんなときに使えます
こんな場面で色の混色が役立ちます。
利用シーンを見る
- 2色の中間色を知りたいとき
- 2色の間のグラデーション用の色の並びを作りたいとき
- カラーコード抽出ツールで見つけた2色を混ぜてみたいとき
混色の計算方法
詳しい解説を見る
計算方式
sRGBのRGB値を、指定した割合で単純に線形補間します。CSSのcolor-mix(in srgb, ...)に相当する考え方です。 ガンマ補正・絵の具のような混ざり方(減法混色)は行わないため、実際に絵の具を混ぜたときの色とは異なります。
丸め
四捨五入で0〜255の整数へ丸めます。割合0%は色Aと、100%は色Bと完全に一致します。
間の色の並び(段階数)
段階数は、両端(色Aと色B)を含む色の総数です。0%から100%まで等間隔に割った割合で、それぞれの色を計算します。
色を入れ替えたとき
色Aと色Bを入れ替えて割合を(100 − 割合)にすると、同じ色になります。
よくある質問
絵の具のように混ぜた色とは違うのですか?
はい、違います。この混色は画面の色の仕組み(sRGB)上での単純な計算であり、絵の具を混ぜたときの色(減法混色)とは異なります。
段階の数を増やすとどうなりますか?
色Aと色Bの間を、より細かい間隔で補間した色の並びになります(上限10段階)。
割合0%・100%の結果は何になりますか?
割合0%は色Aと完全に一致し、100%は色Bと完全に一致します。
色A・色Bを入れ替えると結果は変わりますか?
割合も(100 − 割合)に変えれば、同じ色になります。割合をそのままにして色だけ入れ替えると、結果は変わります。
入力した内容は外部に送信されますか?
いいえ。処理はすべてブラウザ内で完結しており、入力内容が外部やアクセス解析(GA4)へ送信されることはありません。