カラーミキサーツール
2色を混ぜて中間色やグラデーションを作成。混合比率をスライダーで調整し、HEX/RGBで結果を表示します。
混合比率
50% / 50%
スライダーで2色の混ぜ具合を調整します。
HEX
#9A6F86
RGB
rgb(154, 111, 134)
グラデーション
5
使い方
1
2色を指定
カラー1とカラー2を、カラーピッカーまたはHEXコードで入力します。
2
混合比率を調整
スライダーを動かすと、2色を混ぜた中間色がリアルタイムでHEX/RGB表示されます。
3
グラデーションを取得
段階数を2〜10で選び、各色やCSSグラデーションをワンクリックでコピーできます。
カラーミキサーとは
2つの色を指定した比率で混ぜ合わせ、中間色やグラデーションを生成するWebツールです。色の混合はsRGB色空間での線形補間で計算します。すべての処理はブラウザ内で完結するため、入力した色情報がサーバーに送信されることはありません。
機能・特徴
- リアルタイム混色スライダーを動かすと中間色を即座に計算。HEXとRGBの両方で表示します。
- グラデーション生成2〜10段階の中間色を一括生成し、CSSやHEX一覧をまとめてコピーできます。
- ワンクリックコピー各色のスウォッチをクリックするだけでHEXコードをコピーできます。
- プライバシー保護すべての処理はブラウザ内で完結。色情報はサーバーに送信されません。
活用シーン
- 2色の中間色（ブランドカラーの調整）を求めたいとき
- UI/グラフ用の連続したカラーステップを作成するとき
- CSSのlinear-gradientコードをすぐに取得したいとき
- ライト・ダークの中間トーンを試作するとき
- イラスト・デザインの混色シミュレーション
よくある質問
カラーミキサーは無料で使えますか？
はい、完全無料でご利用いただけます。会員登録も不要で、ブラウザを開くだけですぐにお使いいただけます。
色はどのように混ぜられていますか？
sRGB色空間でR・G・Bの各チャンネルを線形補間して混合しています。混合比率50%なら2色のRGB値のちょうど中間値になります。絵の具のような減法混色ではなく、画面表示（加法的）に沿った計算です。
3桁のHEX（#abc）も使えますか？
はい。#abc のような3桁の短縮形も #aabbcc に自動展開して扱います。先頭の # は省略しても入力できます。
グラデーションの段階数は何段まで作れますか？
2段階から10段階まで選べます。両端のカラー1・カラー2を含めて等間隔に中間色を配置し、CSSのlinear-gradientコードとしてもコピーできます。
入力した色は保存・送信されますか？
いいえ。入力された色情報がサーバーに送信・保存されることはありません。すべての計算はお使いのブラウザ内だけで完結するため、安心してご利用いただけます。