2色の中間色計算｜スライダーで混合比率を調整

このツールでできること

色Aと色B、色Bの混合比率を指定し、その割合に対応する1色を計算できます。計算ボタンはなく、色や比率を変更すると、結果の色見本、HEX、RGBが自動で更新されます。

使い方

1. 色Aをカラーピッカーで選ぶか、HEXで入力します。
2. 色Bを同じ方法で指定します。
3. スライダーまたは数値欄で色Bの割合を0〜100%から指定します。
4. 結果の色見本、HEX、RGBを確認します。
5. 必要に応じて「HEXをコピー」を押します。

0%は色A、50%は色Aと色Bが同じ割合、100%は色Bです。「初期値に戻す」を押すと、色Aは#FF0000、色Bは#0000FF、色Bの割合は50%へ戻ります。

入力例・出力例

初期値の色A#FF0000、色B#0000FF、色Bの割合50%では、#800080、rgb(128, 0, 128)になります。

色A#000000、色B#FFFFFF、色Bの割合50%では、各チャンネルの127.5を128へ丸め、#808080、rgb(128, 128, 128)になります。0%では#000000、100%では#FFFFFFをそのまま返します。

よくある利用場面

• UIの通常色と強調色の間にある1色を求めるとき
• 2色のどちらへどの程度寄せるか、割合を変えながら比較するとき
• 簡単なグラデーションの特定位置に置くHEXを確認するとき

RGBチャンネル補間の仕組み

赤、緑、青の各チャンネルについて、(色A × (100 - 色Bの割合) + 色B × 色Bの割合) ÷ 100を計算し、Math.round()で最も近い0〜255の整数へ丸めます。チャンネル値は負にならないため、小数部分がちょうど.5の場合は大きい側の整数になります。

たとえば色A#000000、色B#191919、色Bの割合58%では、各チャンネルが14.5となり、15へ丸めた#0F0F0Fになります。色Aと色Bを交換し、色Bの割合を42%に反転しても結果は同じです。

計算対象は、HEXが表す符号化済み8bit sRGBのチャンネル値です。線形光、HSL、知覚的に均等な色空間での補間や、絵の具・印刷インクの混色ではないため、見た目の明るさがちょうど中間になるとは限りません。画面のグラデーション帯は操作の補助であり、計算結果の正本は表示されるHEXとRGBです。

処理仕様

色Aと色Bは、#が任意の3桁または6桁HEXで指定します。小文字や#なしでも計算でき、入力欄からフォーカスを移すなどして値を確定したときに#付き6桁大文字へ統一します。入力中は、3桁の正常値でも6桁へ書き換えず、入力した文字列を維持します。

空入力、不正な桁数、16進数以外の文字、透明度付きHEX、CSS色名、CSS色関数、全角文字は使用できません。入力の前後や途中に空白、タブ、改行がある場合も、自動で取り除かずエラーにします。

混合比率は0〜100の半角整数だけを受け付けます。空入力、小数、符号、指数表記、全角数字、範囲外の値は使用できません。不正な色または比率の入力中はフォーカスを移動せず、結果を隠してコピーを無効にします。入力が正常になれば結果を再計算します。

入力データについて

入力した色と混合比率、計算結果は、お使いのブラウザ内だけで処理され、ToolRollのサーバーや外部サービスへ送信されません。外部ライブラリ、Cookie、ローカルストレージ、セッションストレージは使用せず、入力や結果の履歴も保存しません。コピー操作をした場合だけ、結果のHEXをブラウザのクリップボード機能へ渡します。