カラーミキサー 2つの色を任意の比率で混合し、グラデーション全体を見てみましょう。

🎨

カラーミキサー

2つの色を任意の比率で混合し、グラデーション全体を見てみましょう。

2つの色を選択

混ぜたい2つの色を選択してください。

比率の調整

スライダーで混合比率（0-100%）を制御します。

結果のコピー

合成されたHEX色をコピーしてください。

Loading tool...

What Is カラーミキサー?

カラーミキサーは、2つの色を任意の比率で混合し、11ステップのグラデーションとともに正確な結果色を表示します。線形RGB補間によって生成される混合色は、塗料の色を混ぜたり、CSSカラートランジションを作成したりする効果を再現します。比率スライダーにより、最初の色100%から2番目の色100%まで滑らかに遷移できます。このツールでは、大きなプレビューで混合結果とグラデーションのストリップが表示されます。カラーミキシングは、グラデーション用の中間色を作成したり、デザインシステム用の中点色を見つけたり、アニメーション用のトランジションカラーを生成したり、ブランドカラー同士が重ねられたときにどのように相互作用するかを理解するために不可欠です。

Why Use カラーミキサー?

正確な混合を可能にするスムーズな比率スライダー（0-100%）
合成結果の大きなプレビュースウォッチ
11段階のグレーデーションで完全なブレンド範囲が表示される
HEXとRGB出力両方にコピーボタン付き
2つの色を組み合わせたときの効果がすぐに見える

Common Use Cases

中間点の見つけ方

スムーズな遷移のために、2つのブランドカラーの中間点カラーを見つける。

グレーデーションデザイン

CSSで実装する前に、2つの色がグレーデーションでどのように混ざるかをプレビューします。

カラートランジション

アニメーションのステップ間の2つの色状態の中間色を生成する。

パレットの拡張

既存のパレットカラーをさまざまな比率で混ぜて新しい色を作成します。

Technical Guide

ミキサーはRGBカラースペースで線形補間（lerp）を実行します: 結果 = 色1 × (1 - t) + 色2 × t、ここでtは0から1までの混合比率です。各チャンネル（R、G、B）は独立して補間されます。これは最も簡単なブレンド方法であり、CSSトランジションが色を補間する方法と一致します。他に高度なブレンド方法（知覚ラボスペース、oklab）がありますが、線形RGBは最も広く使用されており、ブラウザのレンダリングとも一致しています。11ステップのグラデーションは、10%間隔で補間全範囲を視覚化します。注: RGB線形補間では、中点に少し脱色した色が生成される場合があります。たとえば、純粋な赤と純粋な緑を混合すると、50%のときには明るい黄色ではなく、茶色がかかった黄色になります。これは、RGB補間が色輪に従わないためです。

Tips & Best Practices

1
50%の混合では、2つの色の中間点が正確に視覚化される
2
補足的な色を試してみてください - 中間点はしばしば興味深い中性グレーになることがあります
3
グレーデーションストリップを使用して、ブレンドが最も見栄えの良い比率を見つけましょう
4
白（tinting）または黒（shading）との混合はさまざまな比率でスムーズなスケールを作成する
5
RGB 混合では、加法的な混合による中間点が柔らかくなることがあります

Related Tools

カラーピッカー

HEX、RGB、HSL、CMYK形式の出力に対応したインタラクティブなカラーピッカー。

🎨 Color Tools

モノクロマティックパレットジェネレーター

任意のベースカラーからモノクロマティックな色彩パレットを生成します。

🎨 Color Tools

線形グラデーション生成ツール

カスタム色、角度、色の停止を使用したCSS線形グラデーションを作成します。

🎨 Color Tools

色のシャデーゲネレーター

任意の色を指定したステップ数で暗くすることができます。

🎨 Color Tools

カラーティントジェネレーター

任意の色を指定したステップ数で明るくするティントを生成します。

🎨 Color Tools

Frequently Asked Questions

Q 色の混合はどのように計算されるのですか？

色は RGB 空間で線形補間を使用して混合されます。各チャンネル（R、G、B）は独立してブレンドされます: 結果 = チャンネル1 × (1-比率) + チャンネル2 × 比率。

Q 赤と緑を混ぜると、なぜ黄色ではなく茶色になるのですか？

RGB 線形補間では、減衰した中間値を通るパスになります。本当の黄色はカラースペースの異なる位置にあります。色輪対応の混合には HSL 補間を使用してください。

Q これは加法的または減法的な混合ですか？

これは、RGB 空間での加法的（光ベース）混合であり、ディスプレイが色を見せる方法と一致しています。塗料のような減法的混合では異なる結果になります（例：青 + 黄 = 緑、RGB ではグレー）。

About This Tool

カラーミキサー is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.