タスクの道筋 / 入力から結果へ
2 つのカラーを混ぜる方法
- 01
2 つのカラーを入力する
「1 つ目のカラー」と「2 つ目のカラー」に 16 進数値を入力します。#RGB、#RGBA、#RRGGBB、#RRGGBBAA のいずれも受け付けられるので、半透明の入力も問題ありません。ワークスペースは #6D5EF8 と #22C55E の組み合わせで開きます。
- 02
計算方法
「計算方法」を選びます。加重混色ではエンコード済み sRGB の各チャンネルをプリマルチプライドアルファで補間します。合成では 1 色目を 2 色目の上に重ねます。重ね順が重要で、このモードには重みスライダーがありません。
- 03
カラーを混合する
加重混色では 2 色目の重みを 0%(1 色目のみ)から 100%(2 色目のみ)に設定し、「色を混ぜる」を押します。合成では同じボタンでレイヤーを重ねます。色・方法・重みを変更すると前の結果は消えます。
- 04
結果パネルを読む
HEX・RGBA・CSS・プレビューは 8 ビットのチャンネルと alpha を共有します。透明部分はページ上に表示され、出力には alpha が残ります。
- 05
サンプルのブレンドを試す
「サンプルを読み込む」を押すと、#F97316 と #7C3AED が 35% の重みで混合されます。暖かいオレンジがバイオレットに寄っていく例で、全体の流れを確認できます。「リセット」でデフォルトの組み合わせの 50% に戻ります。
- 06
結果をコピーまたはダウンロードする
入力色、計算方法、sRGB 色空間、HEX、RGBA、CSS 宣言を含む toolars-color-mix.json をコピーまたはダウンロードします。secondColorWeight は重み付き混合のみです。すべて同じ 8 ビットの結果です。