カラーミキサー
2つの色を混ぜて、その間のすべてのステップをHEX、RGB、HSLで取得します。sRGB、Linear RGB、または知覚的OKLabミキシングを選択し、色ごとの不透明度を設定し、対応するCSSグラデーションをコピーします。
入力
色を選択するか、HEX値を直接入力します。
生成する中間色の数。2つの元の色は常に含まれます。
sRGBはほとんどのミキサーに対応; OKLabは明るさを均一に保ち、濁った中間色を回避します。
出力
2つの色を等分で混ぜたもの。
Your color palette will appear here.
計算されたすべてのストップが書き出されるため、Linear RGBまたはOKLabランプは通常のCSSで保持されます。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/color-mixer \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"startColor": "#2563eb",
"startOpacity": "100",
"endColor": "#f59e0b",
"endOpacity": "100",
"steps": "3",
"colorSpace": "srgb"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `color-mixer` tool (Color Mixer) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/color-mixer/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="カラーミキサー — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
このツールが行うこと
カラーミキサーは2つの色を混ぜて、その間のすべてを表示します。開始色と終了色を選択し、必要なステップ数を選択すると、50/50ミックス、HEX、RGB、HSLの中間色の完全なランプ、および同じストップを持つ貼り付け可能なCSSグラデーションが得られます。
これは2つの絵の具を混ぜるデジタル等価物です。ただし、すべての中間色を一度に見ることができ、クリック1つでコピーでき、2つの色がどのように平均化されるかを正確に制御できます。
使い方
- 開始色と終了色を設定します（色選択ツールを使用するか、HEX値を直接入力します）。
- ステップ数をドラッグして、必要な中間色の数を選択します。2つの元の色は常に含まれます。
- 半透明の色を混ぜるには、開始不透明度または終了不透明度を下げます。
- 50/50ミックスをコピーするか、任意のサンプルをクリックしてそのHEXをコピーするか、CSSグラデーションを取得します。
すべてブラウザで実行されます。アップロードなし、アカウントなし、制限なし。
ミキシング色空間の選択
ほとんどのカラーミキサーが提供しない設定で、結果に大きな影響を与えます。
- sRGB生のチャネル番号を平均します。これはほぼすべてのミキサーが行うことで、人々の期待と一致します。ただし、2つの飽和色を混ぜると、濁った暗い中間色になります。
- Linear RGB最初にsRGBのガンマカーブから変換され、実際の光を混ぜ、その後戻します。これは光が物理的に組み合わさる方法であるため、中間部分がより明るく保たれます。
- OKLab知覚的に均一な空間で混ぜます。明るさと色相は一定の視覚速度で移動するため、ランプは目に均等にスペースされて見えます。デザインシステムスケールとグラデーションに最適な選択です。
青から黄色は古典的なテストです。sRGBでは中点が灰色にずれますが、OKLabは実際の遷移のように見えます。
CSSグラデーションがすべてのストップをリストする理由は？
ブラウザが2ストップのlinear-gradient()を補間する場合、sRGBで実行されます。Linear RGBまたはOKLabで混ぜた場合、2ストップグラデーションはそれを破棄します。計算されたすべてのストップを書き出すことで、実際に選択したランプを固定し、すべてのブラウザで機能します。
8桁のHEX値は何を意味しますか？
混合色が半透明になると、ツールは#rrggbbaa（およびrgba() / hsla()）に切り替わります。最後のペアはアルファチャネルです。完全に不透明な色は、なじみのある6桁の形式のままです。不透明度は常に線形に混ぜられ、選択した色空間に関係なく。
2つの色の混合ではなく、1つの色の色合いが必要な場合はどうしますか？
Color Tint & Shade Generatorを使用します。単一のベースカラーを白と黒に向かって混ぜます。角度と位置を持つマルチストップグラデーションの場合は、CSS Gradient Generatorを試してください。既存の画像から色を抽出するには、Color Palette Extractorを使用します。