2つの色を混ぜる方法と結果の見方

2色の混色を確認する

2つの色を入力すると、指定した比率で混ぜた色を確認できます。入力には、#で始まる16進数表記、または3つの非負整数を含むrgb(...)形式の文字列を使えます。3桁の16進数表記も読み取られます。色の組み合わせを試したり、混色結果を16進数とRGBの両方で確認したりしたいときに便利です。

入力から計算までの手順

1. 1つ目と2つ目の色を、それぞれ入力します。たとえば#ff0000と#0000ffのように、#付きの6桁16進数を使います。#f00のような3桁表記や、rgb(255, 0, 0)のような文字列も利用できます。
2. 混ぜる割合を入力します。割合は0から1の範囲で扱われ、0なら1つ目の色から、1なら2つ目の色からの補間になります。数値として解釈できない割合は0.5として扱われ、範囲外の値は0から1の範囲に収められます。
3. 計算を実行し、混ぜた色を確認します。入力を省略した場合は、1つ目が#ff0000、2つ目が#0000ff、割合が0.5として扱われます。
4. 入力した2色が認識されれば、混合色に加えて、乗算とスクリーンの結果も確認します。色を認識できない場合は計算値ではなくエラー表示になります。

表示された結果の読み方

成功した場合は、混合色、乗算、スクリーンの3種類が小文字の6桁16進数で示され、混合色はRGB形式でも示されます。各チャンネルは指定した割合に応じて1つ目の色から2つ目の色へ補間され、出力時に丸められます。16進数のチャンネル値は0から255の範囲に収められます。

入力が認識されない場合は、色の計算結果ではなくエラーの扱いになります。#付きの文字列が16進数として不正な場合は、通常の認識エラーとは別に、変換時の問題になることがあります。対応範囲外の色名や任意の表記を前提にせず、対応する16進数またはrgb(...)形式で入力してください。

使用例

赤と青を同じ割合で混ぜたときに、3種類の16進数結果と混合色のRGB結果の項目を確認します。

1つ目に#ff0000、2つ目にrgb(0, 0, 255)、割合に0.5を入力して計算します。

混合色は小文字6桁の16進数とRGB形式で示され、乗算とスクリーンも小文字6桁の16進数で示されます。

制限事項

• 色名や任意の色表記は対応範囲として確認されていないため、入力には#付きの16進数または3つの非負整数を含むrgb(...)形式を使用します。不正な#付き16進数は、変換時の問題になる場合があります。

よくある間違い

• 色名や対応していない表記を入力すると認識されません。#付きの16進数、または3つの非負整数を含むrgb(...)形式に置き換えてください。

よくある質問

3桁の16進数カラーは使えますか？

はい。#f00のような3桁表記は6桁に展開されて処理されます。

混ぜる割合を省略したり範囲外にしたりするとどうなりますか？

割合を省略すると0.5として扱われます。数値に変換できない値も0.5に戻され、0から1の範囲外の値はその範囲に収められます。

色を認識できないときはどうなりますか？

どちらかの色を認識できないと、混合色などの計算値は返されず、エラーの扱いになります。不正な#付き16進数では、変換の段階で別の問題が起こる場合があります。