メインコンテンツへスキップ
Toolars
探索
バグを報告

デザイン · ローカルユーティリティ

カラーミキサー

Color Mixer

2 色を sRGB で premultiplied alpha により、または重ね合わせで混色し、結果を HEX・RGBA・CSS として書き出す。

タスクの道筋 / 入力から結果へ

2 つのカラーを入力する

ローカルで実行 · アップロードなし

カラーミキサーの使い方、プライバシー、関連ツール

タスクの道筋 / 入力から結果へ

2 つのカラーを混ぜる方法

  1. 01

    2 つのカラーを入力する

    「1 つ目のカラー」と「2 つ目のカラー」に 16 進数値を入力します。#RGB、#RGBA、#RRGGBB、#RRGGBBAA のいずれも受け付けられるので、半透明の入力も問題ありません。ワークスペースは #6D5EF8 と #22C55E の組み合わせで開きます。

  2. 02

    計算方法

    「計算方法」を選びます。加重混色ではエンコード済み sRGB の各チャンネルをプリマルチプライドアルファで補間します。合成では 1 色目を 2 色目の上に重ねます。重ね順が重要で、このモードには重みスライダーがありません。

  3. 03

    カラーを混合する

    加重混色では 2 色目の重みを 0%(1 色目のみ)から 100%(2 色目のみ)に設定し、「色を混ぜる」を押します。合成では同じボタンでレイヤーを重ねます。色・方法・重みを変更すると前の結果は消えます。

  4. 04

    結果パネルを読む

    HEX・RGBA・CSS・プレビューは 8 ビットのチャンネルと alpha を共有します。透明部分はページ上に表示され、出力には alpha が残ります。

  5. 05

    サンプルのブレンドを試す

    「サンプルを読み込む」を押すと、#F97316 と #7C3AED が 35% の重みで混合されます。暖かいオレンジがバイオレットに寄っていく例で、全体の流れを確認できます。「リセット」でデフォルトの組み合わせの 50% に戻ります。

  6. 06

    結果をコピーまたはダウンロードする

    入力色、計算方法、sRGB 色空間、HEX、RGBA、CSS 宣言を含む toolars-color-mix.json をコピーまたはダウンロードします。secondColorWeight は重み付き混合のみです。すべて同じ 8 ビットの結果です。

ツールの概要

処理
ブラウザー内で完結
入力の外部送信
なし
保存
一切保存しません
価格
無料

入力はブラウザに留まります。

カラーミキサー は検証済みのローカル実行パスを使用し、隠れた入力・出力履歴を作成しません。

ローカル実行

現在のブラウザタブ内で実行されます。

隠れた処理なし

使用中のツールデータが Toolars のドキュメントレコードになることはありません。

アカウント不要

プロフィールを作成せずにコアワークフローを使えます。お気に入りはログイン後にアカウントへ同期されます。

即時リセット

タブを閉じれば、作業中のデータは消えます。

カラーミキサー が実際に行うこと

ブランドの紫と緑の中間色が必要なら、加重混色で 2 色目の割合を調整します。半透明のレイヤーを背景に重ねた結果を調べるなら、合成を選び、1 色目をレイヤー、2 色目を背景にします。JSON の書き出し前に、実際のページ背景でアルファとプレビューを確認してください。二つの計算は用途が異なります。

よくある質問

重みスライダーはどう機能しますか?
スライダーが表示されるのは加重混色だけです。0% では 1 色目、100% では 2 色目になります。中間ではエンコード済み sRGB のチャンネルをプリマルチプライドアルファで補間し、8 ビットに丸めます。合成では重みを使わず、1 色目を 2 色目の上に重ねます。
透明度も処理されますか?
対応しています。加重混合は乗算済みアルファで補間し、合成は最初の色を次の色に重ねます。使用する背景でアルファ値と重ね順を比較してください。
チャンネルはどう丸められますか?
HEX・RGBA・CSS・プレビューは 8 ビットのチャンネルと alpha を共有します。透明部分はページ上に表示され、出力には alpha が残ります。
結果パネルがクリアされたのはなぜですか?
どちらかの色、計算方法、重みを変更すると、以前の結果を現在の設定と取り違えないよう表示が消えます。新しい結果は「色を混ぜる」を押して計算してください。
エクスポートには正確には何が含まれますか?
入力色、計算方法、sRGB 色空間、HEX、RGBA、CSS 宣言を含む toolars-color-mix.json をコピーまたはダウンロードします。secondColorWeight は重み付き混合のみです。すべて同じ 8 ビットの結果です。
データはどこかに送信されますか?
いいえ。ブレンドはこのブラウザタブ内だけで計算され、入力と結果がこのタブの外に出ることはありません。アカウントも不要です。

あわせて読む

デザインを続ける

行き止まりではなく、関連タスクへ。

完全な索引に戻らずに、別のフォーカスされたワークスペースへ移動できます。

CSS ローダージェネレーター

CSS Loader Generator

軌道リングまたは 3 ドットのローディングスピナーをサイズ・線・速度・色でデザインし、reduced motion 対応の CSS をコピー。

作成

CSS チェックボックスジェネレーター

CSS Checkbox Generator

カスタムチェックボックスのサイズ・枠線・状態色を整え、キーボード操作できる本物の input を残す CSS をコピー。

作成

CSS スイッチジェネレーター

CSS Switch Generator

トラック・つまみ・2 状態の色を持つピュア CSS トグルスイッチをデザイン。フォーカスと reduced motion 処理済みのコードをコピー。

作成

CSS clip-path ジェネレーター

CSS Clip Path Generator

ドラッグ、キーボード、座標入力で多角形を編集。4 種類のプリセットから始め、clip-path 宣言や CSS をローカルでコピーできます。

作成