Color Blender｜色を混ぜてパレットを作成
2色を混ぜて2〜30ステップのスムーズなグラデーションを生成。パレットをJSONまたはCSSでエクスポート。
Color Blender とは？
Color Blender は、2色を混合して滑らかな中間色のシリーズを生成する無料のオンラインツールです。開始色と終了色を選び、必要なステップ数（1〜30）を決めると、ツールが完全なトランジションパレットを即座にレンダリングします。Figma や Illustrator、インストールされたソフトウェアを使わずに、グラデーション・データビジュアライゼーションスケール・ブランドパレットの中間ストップを手動で計算するという一般的なデザイン問題を解決します。すべての計算はブラウザ内で実行され、サーバーにデータが送信されることはありません。
主な機能
- 2色をブレンド — テキストフィールドまたはネイティブカラーピッカーでHex値を入力；両方の入力が同期して更新されます。
- 1〜30ステップの調整 — スライダーでパレットの色数（両端を含む）を制御します。2ステップでは元のペアのみ、30では細かく段階的なトランジションが得られます。
- リアルタイムパレットプレビュー — スライダーを動かしたり色を変えたりすると、ライブグラデーションバーとクリック可能なスウォッチのグリッドが即座に更新されます。
- 個別または一括コピー — スウォッチをクリックするとHex値がクリップボードにコピーされます。「すべてコピー」ボタンで、カンマ区切りのHexコードリスト全体を一度にコピーできます。
- RGBおよびHSLユーティリティ付きHEX出力 — 各スウォッチラベルにHex値が表示され、ソースコードは共有color-utilsライブラリの
hexToRgb、rgbToHex、generateBlendedPaletteを使用しています。 - 入力用のビジュアルカラーピッカー — 各テキストフィールドの横にネイティブの
<input type="color">があり、視覚的に色を選んだり値を直接入力したりできます。 - パレットをJSONとしてエクスポート —
color1、color2、steps、完全なpalette配列を含むcolor-blend-palette.jsonファイルをダウンロードします。 - CSSカスタムプロパティとしてエクスポート（Premium） — PremiumExportButtonが名前付きカスタムプロパティの
color-blend-palette.cssファイルを生成します。
Color Blender の使い方
ステップ 1：2つのベースカラーを設定する
近日公開: Color Blenderツールを開きます。「Color 1」と「Color 2」とラベルされた2つのカラー入力が並んで表示されます。各入力にはカラーピッカー（左の正方形のスウォッチ）とHexテキストフィールドがあります。
Color 1のカラーピッカーをクリックしてブラウザのネイティブカラーチューザーを開くか、直接Hex値を入力します（例：鮮やかな赤の場合#E63946）。Color 2も同様に行います（スチールブルーの場合は#457B9Dを試してください）。各入力の下のプレビュー矩形に、選択した色とそのHexコードがコントラストのある文字色でオーバーレイされて表示されます（ツールが黒か白のテキストを自動的に選択して視認性を確保します）。
カラーを入れ替えボタンで2つの入力を即座に逆にしたり、ランダムをクリックしてランダムな2色を選んだりできます。
ステップ 2：ブレンドステップ数を調整する
カラー入力の下に「ブレンドステップ」スライダーがあります。最小のトランジションのためには左（1方向）に、細かいパレットのためには右（30方向）にドラッグします。ラベルには現在のステップ数が表示され、スライダーの下の線にパレットに表示される色の総数が示されます。
標準的なUIグラデーションには5〜7ステップが適しています。データビジュアライゼーションのカラースケールには、カテゴリを明確に区別するのに10〜12ステップが十分な範囲を提供します。
ステップ 3：ブレンドされたパレットを確認する
「ブレンドパレット」カードがスライダーの下に表示されます。上部には左から右へ色がトランジションする様子を示す連続したグラデーションバーがあります。その下に64×64ピクセルの正方形スウォッチのグリッドが各ステップを表示します。
スウォッチにカーソルを合わせると、小さなオーバーレイにHex値が表示されます。スウォッチをクリックするとクリップボードに値がコピーされます。トースト通知でコピーが確認されます。
スウォッチの下のリストビューに、各色のHexコードと小さなプレビュー正方形、個別のコピーボタンが表示されます。
ステップ 4：パレットをエクスポートする
3つのエクスポートオプションのいずれかを使用します：
- すべてコピー — パレット全体をカンマ区切りの文字列（例：
#E63946, #C25167, #9F6388, ...）としてコピーします。どこにでも貼り付けられます。 - JSONエクスポート — 構造
{ "color1": "#E63946", "color2": "#457B9D", "steps": 7, "palette": [...] }のcolor-blend-palette.jsonをダウンロードします。 - CSS（Premium） —
--blend-0から--blend-Nという名前のCSSカスタムプロパティを含むcolor-blend-palette.cssをダウンロードします。
実用的な使用例
ウェブサイトヘッダーのブランドグラデーション
スタートアップのランディングページを作成するデザイナーが、プライマリブランドカラー#6C3FF5（バイオレット）からセカンダリアクセント#00C2CB（ティール）へのグラデーションを必要としています。8ステップで生成されるのは：#6C3FF5、#5C53F2、#4C66EF、#3C7AEC、#2C8DE9、#1CA0E6、#0CB4E3、#00C2CBです。この中間セットは均等な間隔のCSSグラデーションストップに直接対応し、急激なジャンプが発生しません。
データビジュアライゼーションのカラースケール
コロプレスマップを作成する開発者が、人口密度を表すために白#FFFFFFから深緑#1A6B3Aへのスケールを必要としています。10ステップで10の知覚的に異なるシェードが得られます。エクスポートされたJSONはドメインカラー配列としてD3.jsやChart.jsの設定に直接インポートできます。
アクセシビリティコントラスト検証
UIチームがColor Blenderを使って、2つのブランドカラーの中間シェードのうち白いテキストに対してWCAG AAコントラストを維持するものを見つけます。#003566（ネイビー）から#FFC300（アンバー）を12ステップでブレンドし、各HexをContrastCheckerに貼り付けて安全な値の範囲を特定します。
ヒントとベストプラクティス
ランダムボタンでインスピレーションを得る。 パレットの方向性に行き詰まったとき、Randomizeをクリックすると2つのランダムなHex色が生成されます。ブレンドされた結果は、取っておく価値のある予想外の組み合わせを明らかにすることがよくあります。
スワップボタンで方向性を確認する。 グラデーションはColor 1からColor 2へ左から右に読まれるため、スワップすることでトランジションが反対方向の方が良く見えるかをすぐに確認できます。
お気に入りの組み合わせをプリセットとして保存する。 PresetsPanel（サポーター向けに利用可能）はcolor1、color2、stepsの値を一緒に保存するので、値を再入力せずに正確なパレット設定を呼び出せます。
履歴から以前のブレンドを復元する。 HistoryPanelは「すべてコピー」の各操作を記録します。履歴エントリを復元すると、ツールはコピーされたHexリストを再解析し、Color 1を最初の値に、Color 2を最後の値に、ステップを総数に設定します。
高いステップ数から始めて減らす。 何ステップ必要か不明な場合は20以上から始めて完全な粒度を確認し、トランジションが滑らかに見えるまで減らしていきます。ほとんどのグラデーションは5〜10ステップでよく見えます。
よくある問題とトラブルシューティング
手動入力した無効なHex値。 Hexテキストフィールドに無効な文字列（#ZZZZZZなど）を入力すると、hexToRgbがnullを返し、パレットが空の配列としてレンダリングされます。スウォッチエリアは空白になります。修正：Hexフィールドに#に続く正確に6つの有効な16進数文字が含まれていることを確認します。
パレットに1色か2色しか表示されない。 スライダーが最小値1または2にあるときに発生します。中間ステップを追加するには右にドラッグします。
すべてコピーが何も出力しない。 パレットが空の場合（無効な色による）、クリップボードへの書き込みは実行されますが空の文字列を送信します。コピーする前にカラー入力を修正し、グラデーションバーが表示されていることを確認します。
JSONエクスポートのダウンロードが開始しない。 一部のブラウザは特定のコンテキストからのプログラム的なリンククリックをブロックします。ダウンロードが開始しない場合は、ブラウザの設定でポップアップとダウンロードがサイトに許可されているか確認します。
CSSエクスポートにはPremiumが必要。 CSS変数のエクスポートはPremiumExportButtonコンポーネントでゲートされており、アクティブなサポーターアクティベーションが必要です。JSONエクスポートは無料ですべてのユーザーが利用できます。
プライバシーとセキュリティ
Color Blenderはブラウザ内で完全に動作します。色のデータ、パレット設定、エクスポートされたファイルはサーバーに送信されません。ツールはWeb Clipboard APIとBlob/URL APIのみを使用します（どちらもローカルのブラウザ操作です）。プリセットと履歴データはブラウザのIndexedDBデータベースに保存され、デバイスを離れることはありません。最初のページ読み込み後はオフラインでも動作します。
よくある質問
Color Blenderは無料ですか？
はい、Color Blenderはアカウント不要で完全に無料です。コア機能（色のブレンド、ステップの調整、Hex値のコピー、JSONエクスポート）はすべての訪問者が利用できます。CSS変数のエクスポートはPremiumサポーター機能で、Ko-fiへの5ドルの寄付で30日間のアクセスが得られます。
Color Blenderはオフラインで動作しますか？
はい。ページが読み込まれると、Color Blenderはインターネット接続なしで動作します。すべての色の計算はブラウザのJavaScriptで実行され、通常使用中はネットワークリクエストが行われません。これにより、インターネットアクセスが制限された環境でも安全に使用できます。
Color Blenderでデータは安全ですか？
完全に安全です。色の値、パレットデータ、エクスポートファイルはサーバーに送信されることはありません。すべての処理はブラウザ内でローカルに行われます（コピーにはWeb Clipboard API、ファイルダウンロードにはBlob APIを使用）。選択した色はすべてデバイス上に留まります。
ブレンドアルゴリズムはどのように機能しますか？
ツールはリニアRGB補間を使用します。両方のHex色をRGBコンポーネントに変換し、RGBカラースペースでそれらの間の直線上に均等に配置された中間値を計算します。OKLabなどの知覚カラースペースは一部の色のペアでより均一に見えるグラデーションを生成できますが、リニアRGB補間は計算がシンプルで予測可能な対称的な結果を生み出します。
ステップ数には中間のみが含まれますか、それとも端点も含まれますか？
ステップ数には両端点が含まれます。5ステップの設定では正確に5色が生成されます：開始色、3つの中間シェード、終了色。2の設定では2つの元の色のみで、ブレンドはありません。スライダーは1〜30の範囲です。
Hex以外の色を入力できますか？
テキスト入力フィールドはHex値のみを受け付けます。RGB値やHSL値から色をブレンドしたい場合は、まずColor ConverterでHex相当値を取得し、それをColor Blenderに貼り付けてください。
エクスポートされたJSONの形式は？
JSONファイルには4つのキーがあります：color1（開始Hex）、color2（終了Hex）、steps（スライダーの値）、palette（開始から終了までのHex文字列の配列）。#E63946から#457B9Dへの5ステップのブレンドでは、palette配列には正確に5つのHex値が含まれます。
2色以上をブレンドできますか？
Color Blenderは正確に2つの入力色に対応しています。複数のアンカーポイントを持つマルチストップグラデーションを作成するには、隣接する各色のペアを別々にブレンドして結果のパレットを組み合わせます。近日公開: Gradient Generatorは複数のカラーストップをネイティブにサポートしています。
CSSでパレットを使用するには？
JSONエクスポートの場合、palette配列を反復処理して各値をグラデーションストップまたはCSSカスタムプロパティに割り当てます。CSSエクスポート（Premium）の場合、ダウンロードされたファイルには--blend-0から--blend-Nという名前の変数が含まれており、任意のスタイルシートにインポートできます。
パレットには元の色が含まれますか？
はい。palette配列の最初の色は常にColor 1で、最後は常にColor 2です。その間のすべての値は計算された補間です。
関連ツール
- 近日公開: Color Mixer — フルパレットを生成せずに簡単な一回限りのミックスができる、単一の比率スライダーで2色をブレンド。
- 近日公開: Gradient Generator — 角度と位置を精密にコントロールしてマルチストップCSSグラデーションを作成。
- Color Picker — 画面上のどこからでも、またはアップロードした画像から色を選択。
- Color Converter — ブレンドする前にHEX、RGB、HSL、HSB、CMYK間で変換。
今すぐ Color Blender を試す: 近日公開: Glyph Widgets Color Blender