色の混ぜ方：RGB、HSL、CMYK

なぜデジタルで色を混ぜるのか？

色の混合はデザイン、イラストレーション、ペインティング、ブランディング、UI 制作の基礎です。ソフトウェアで行うと高速・正確・可逆で、何百通りものバリエーションを数分で試せますし、気に入らなければ元に戻せます。また、デジタルなら正確な hex、RGB、HSL、CMYK 値を出力して下流のツールに渡せます。

主な体系は加法混色（RGB、画面用）と減法混色（CMYK、印刷用）で、振る舞いが異なるため、メディアに応じて適切なモデルを選ぶことが大切です。

よくある用途

• UI デザイン：ブランドパレットやコンポーネントのバリアント作成
• デジタルペインティング：肌、空、影のサンプリングと微調整
• 印刷準備：画面の色を CMYK に変換して印刷精度を確保
• ブランドアイデンティティ：基本色から一貫したカラーシステムを構築
• Web デザイン：1 つのベース色からホバー、フォーカス、無効状態を生成

方法 1：UtilBoxx の無料カラーミキサーを使う（推奨）

当社の カラーミキサー は、RGB、HSL、CMYK で 2 色以上をブレンドし、ライブプレビューします。手順は次のとおりです：

1. utilboxx.com/ja/tools/color/mixer にアクセス
2. 2 色以上のソース色を選ぶ
3. ブレンドモード（平均、乗算、スクリーン、加法、減法）を選択
4. スライダーで各色の重みを調整
5. 結果の hex、RGB、HSL、CMYK 値をコピー

この方法の長所：

• 入力調整に合わせてライブプレビュー
• 画面用と印刷用の複数ブレンドモデル
• 重みスライダーで繊細な制御
• デザインソフトにワンクリックでコピー
• 100% ブラウザ内動作、画像はアップロードされない

方法 2：Figma、Photoshop、Procreate で混ぜる

プロフェッショナル向けデザインツールには強力なカラーミキサーが内蔵されています。Figma ではカラーピッカーを開いてアルファスライダーで別のスウォッチとブレンドします。Photoshop ではブレンドモード付きレイヤーで描画色を混ぜます。Procreate ではキャンバス上で色を別の色の上にドロップしてミックスします。

イラストや複雑なブランディングには必須のツールです。

方法 3：数学的に色を混ぜる

簡単なケースでは RGB チャンネルを平均化します：

``` mixed = (color1 + color2) / 2 ```

より正確にはリニア RGB でブレンドするか、OKLCH のような知覚モデルを使います。Chroma.js や culori などのライブラリが JavaScript で実現します：

```javascript import { mix } from "culori"; mix("#ff0000", "#0000ff", 0.5); // 中間の紫 ```

よくある質問

RGB と CMYK の混色の違いは？

RGB は加法混色 — 光を混ぜます。赤と緑を混ぜると黄色。CMYK は減法混色 — 顔料を混ぜます。シアンと黄色を混ぜると緑。同じ数値でも 2 つの体系ではまったく違って見えます。

画面上で混ぜた色が濁って見えるのはなぜ？

通常、補色や離れた色相を混ぜているためです。近い色相をブレンドするか、OKLCH のような知覚色空間で試してみてください。

ブランド色を画面と印刷で一致させるには？

カラープロファイルを使って sRGB から CMYK に変換します。鮮やかな画面色には印刷に相当する色がなく、ずれる点に注意してください。最も正確には印刷所にプルーフを依頼しましょう。

カスタムパレットを保存できますか？

はい。UtilBoxx のカラーミキサー でトーンを生成し、Figma、Coolors、コードベースなどのデザインシステムに貼り付けてください。

結論

デジタルカラーミキシングはスピード、精度、再現性を提供します。色を視覚的にブレンドして値を出力する手軽な方法として、UtilBoxx のカラーミキサー は常に開いておく価値のあるツールです。