カラーミキサー - オンライン色混合ツール
RGBまたはHSL色空間で調整可能な比率で2つ以上の色を混合します。グラデーションプレビューと結果コピー — 100%クライアントサイド処理。
よくある質問
カラーミキサーとは何ですか？
カラーミキサーは、2つ以上の色を設定可能な比率で混合し、新しい中間色を生成するオンラインツールです。選択した色空間（RGBまたはHSLなど）で入力色間の数学的な補間を計算し、結果を複数のフォーマット（HEX、RGB、HSL）で出力します。
このツールの使い方は？
1. HEX入力フィールドまたはビジュアルカラーピッカーで2つの色を入力します。2. 混合比率スライダーを調整します。3. 必要に応じてRGBとHSLモードを切り替えます。4. HEX、RGB、HSL値と共に結果の色を確認します。5. 出力値をクリックしてクリップボードにコピーします。6. マルチカラー混合のために色を追加したり、グラデーションステッププレビューを使用できます。
色データは安全ですか？サーバーに送信されますか？
色データは100%安全で、ブラウザの外に出ることはありません。すべての色混合計算は、JavaScriptの数学演算を使用して完全にクライアントサイドで実行されます。サーバーにデータは送信されません。
RGB混合とHSL混合の違いは何ですか？
RGB混合は、赤、緑、青の各チャンネルを独立して補間します。シンプルで予測可能ですが、色相環で離れた色を混合すると、くすんだ中間色が生じることがあります。HSL混合は色相、彩度、明度を個別に補間し、360度の色相環の最短経路を辿るため、より鮮やかで直感的な結果を生み出します。
3つ以上の色を混合できますか？
はい。「色を追加」ボタンをクリックして、追加の色入力を追加できます（最大8つ）。各色にはウェイトコントロールがあり、結果はRGB空間でのすべての入力色の加重平均です。
混合比率はどのように計算されますか？
2色の場合、比率スライダーは0%から100%までの線形補間係数を制御します。0%では純粋な色1、50%では均等な混合、100%では純粋な色2になります。式：result = color1 × (1 - ratio/100) + color2 × (ratio/100)。
グラデーションステップとは何ですか？
グラデーションステッププレビューは、2つの入力色の間の中間色のストリップを表示します。3から10ステップの間で選択できます。各ステップをクリックしてその色の値をコピーできます。
コード例
// Color Mixer
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (!result) return null;
return {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
};
}
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(v => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, '0'))
.join('');
}
function mixColorsRgb(hex1, hex2, ratio = 0.5) {
const c1 = hexToRgb(hex1);
const c2 = hexToRgb(hex2);
if (!c1 || !c2) return null;
const t = Math.max(0, Math.min(1, ratio));
return rgbToHex(
c1.r * (1 - t) + c2.r * t,
c1.g * (1 - t) + c2.g * t,
c1.b * (1 - t) + c2.b * t,
);
}
function generateGradientSteps(hex1, hex2, steps = 5) {
const result = [];
for (let i = 0; i < steps; i++) {
const ratio = steps === 1 ? 0.5 : i / (steps - 1);
result.push(mixColorsRgb(hex1, hex2, ratio));
}
return result;
}
// Usage
const blue = '#3b82f6';
const red = '#ef4444';
console.log('50/50 mix:', mixColorsRgb(blue, red, 0.5));
console.log('Gradient:', generateGradientSteps(blue, red, 5));