カラーツール

カラーミキサー

2つのカラーコード(HEXまたはRGB)と混合比率を指定して、ブレンド色や乗算・スクリーンの結果を計算するオンラインツールです。

ツールを実行

カラーミキサーは、指定した2つの色を好みの比率でブレンドして新しい色を作成できるオンラインツールです。入力には16進数カラーコード(#fffや#ffffff)のほか、3つの整数を含むRGB形式(rgb(255, 0, 0)など)が利用可能です。比率は0から1の範囲で自由に調整でき、0に近づけると1つ目の色の割合が強くなり、1に近づけると2つ目の色が強く反映されます。色の指定がない場合は赤色と青色が自動で設定され、比率も中央値の0.5で計算されます。混色後のカラーコードに加え、乗算やスクリーンのブレンド結果も同時に算出されるため、Webデザインやイラスト制作の配色検討に役立ちます。

使い方

  1. 1つ目の色(色1)をHEX形式(#ff0000など)またはRGB形式で入力または選択します。
  2. 2つ目の色(色2)を同様にHEX形式(#0000ffなど)またはRGB形式で指定します。
  3. 混合比率を0.0から1.0の間で設定します(初期値は0.5です)。
  4. 計算を実行すると、結果表示エリアにブレンド色、乗算色、スクリーン色が表示されます。

使用例

  • #ff0000(赤)と#0000ff(青)を比率0.5で混ぜ合わせ、中間色である紫色(#800080)と乗算・スクリーンの各コードを取得する例
  • rgb(255, 255, 0)(黄)とrgb(0, 255, 255)(シアン)を比率0.3で指定し、黄寄りの緑系ブレンド色を算出する例

よくある質問

入力できる色の形式にはどのようなものがありますか?

先頭に「#」が付いた3桁または6桁の16進数コード(例: #fff、#ff0000)や、3つの非負整数を含むRGB表記(例: rgb(255, 0, 0))に対応しています。

混合比率の数値を変更するとどのように変化しますか?

比率は0から1の範囲で適用されます。0に近づくほど色1の成分が多くなり、1に近づくほど色2の成分が色濃く反映されます。

乗算やスクリーンとは何ですか?

グラフィック制作で一般的に使われるブレンドモードの計算結果です。乗算は重なり合って暗くなる効果、スクリーンは重なり合って明るくなる効果のカラーコードを出力します。

カラーコードの形式を誤って入力した場合はどうなりますか?

対応していない形式や解析できない文字列が渡された場合、混色計算は行われずエラー表示となります。

このツールを埋め込む

以下のコードを使って、SmartPlusLab のツールをウェブサイトに追加できます。