Softonic

カラーブレンダー

ステップ 1 / 2
結果

2つのHEXカラーを入力し、必要なステップ数を選ぶと、開始色、終了色、その間に均等配置された色が表示されます。UIの色階調、グラデーションの計画、アイコン状態、CSSやデザインファイルへ移す前の正確なHEXストップ確認に便利です。

HEXブレンドの計算方法

  1. 1

    2つのHEXカラーを入力

    3桁または6桁のHEXを、#付きまたは#なしで使えます。例: #FF6B35、#1E3A8A、F60。

  2. 2

    2〜20ステップを選択

    最初のスウォッチは1つ目の色、最後のスウォッチは2つ目の色です。中央のスウォッチはその間で計算されます。

  3. 3

    RGBチャンネルを補間

    ツールはHEXを赤・緑・青のチャンネル値に変換し、各チャンネルを線形補間して、最も近い整数に丸めます。

  4. 4

    HEXストップを確認

    各スウォッチは、選択してデザインやスタイルシートで再利用できる6桁大文字のHEXコードとして表示されます。

このツールでできること

カラーブレンダーは標準的なHEXカラー表記だけを扱います。#F60 のような短縮HEXと、#FF6B35 のような完全なHEXを受け取り、内部で正規化して、結果をすべて6桁大文字のHEXコードで出力します。

ブレンドはRGB/sRGBチャンネルでのシンプルな線形補間です。

  1. 各HEXカラーを0〜255の R、G、B 値に変換します。
  2. 各ステップで t を 0 から 1 まで計算します。
  3. 各チャンネルで 開始 + (終了 - 開始) * t を使います。
  4. 各チャンネルを最も近い整数に丸め、結果をHEXに戻します。

両端の色が含まれるため、2ステップは「開始色と終了色だけ」を意味します。#FF6B35 から #1E3A8A まで7ステップにすると、出力は次のようになります。

ステップ 位置 HEX
1 0% #FF6B35
2 16.67% #DA6343
3 33.33% #B45B51
4 50% #8F5360
5 66.67% #694A6E
6 83.33% #44427C
7 100% #1E3A8A

向いている用途

  • UI状態の色階調: hover、active、selected、disabled用の中間色を作れます。
  • グラデーション設計: 別のツールでCSSグラデーションを書く前に、正確なHEXストップを決められます。
  • アイコンやイラストのバリエーション: 関連する少数の色を一貫させられます。
  • デザインQA: 目測ではなく、チャンネルごとに計算された中間点を確認できます。

注意点

このブレンダーは rgb()、hsl()、色名、alpha値、8桁HEXを受け付けません。RGB、HSL、LAB、LCH、CSSスニペット、コントラストチェック、アクセシビリティ評価も出力しません。必要な場合は、HEXストップを取得したあとに専用の変換ツール、コントラストチェッカー、グラデーションジェネレーターを使ってください。

よくある質問

HEXのみです。3桁または6桁で、先頭の#はあってもなくても構いません。rgb()、hsl()、alphaチャンネル、色名は読み取りません。

はい。最初のステップが1つ目の色、最後のステップが2つ目の色です。残りのステップは、その間で補間された色です。

ブレンドはRGB/sRGBでチャンネルごとに計算されます。予測しやすくコードで再利用しやすい一方、知覚ベースのLABやLCH補間とは異なります。

いいえ。表示するのはスウォッチとHEXコードだけです。生成されたHEX値をCSSで使うか、アクセシビリティ比率が重要な場合はコントラストチェッカーに渡してください。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

FPS カウンター

requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。

カラーパレットジェネレーター

基準のHEXカラーから、モノクロマティック、類似色、補色、トライアド、テトラードのパレットを生成し、コピーしやすいCSS変数として書き出します。

バイナリからASCIIへの変換ツール

バイナリ（スペース区切りのバイト、または長いビット列）を貼り付けると、それが表すASCIIテキストを8ビットずつ復号して取得できます。