カラーグラデーション生成器

カラーグラデーションとは？

カラーグラデーションは 2 色以上の色の間の滑らかな移行で、赤・緑・青の各チャンネルを経路に沿って補間することで生成されます。Web デザイナーはグラデーションを使用して、平坦な単色塗りに頼ることなく、背景、ボタン、イラストに奥行き、方向、視覚的な魅力を加えます。最も一般的な形式は 2 色の線形グラデーションで、開始色が指定された数の中間ステップを経て終了色へとブレンドされます。各ステップは独立した色であり、その RGB 値は両端の間に比例して配置されます——例えば #0EA5E9（スカイブルー）と #86EFAC（ライトグリーン）の中間ステップは、くすんだティール色になります。

グラデーションは CSS の linear-gradient() と radial-gradient() 関数を通じて普及しましたが、その根底にある概念はブラウザがブレンドする色のリストにすぎません。本ツールはこのリストを生成するので、そのまま CSS グラデーションに貼り付けることも、カスタムパレット用に個々のステップを取捨選択することもできます。

グラデーションを生成する場面

グラデーションを事前に生成しておくと、多くのデザイン場面で使える完成した色リストを入手できます。一般的なシナリオは以下の通りです：

• CSS 背景。 開始色と終了色を linear-gradient(90deg, #0EA5E9, #86EFAC) に貼り付けて、ヒーローsection、カード、ボタンに使用します。
• データビジュアライゼーション。 連続する数値をグラデーションのステップにマッピングし、低い値に開始色、高い値に終了色を割り当てます。
• ブランドの移行。 2 つのブランドカラーをブレンドして、ヒーローバナー全体に認識可能な視覚的シグネチャーを作成します。
• イラストと UI。 影、ハイライト、プログレスバー用に、色調を推測するのではなく中間ステップを厳選します。
• アクセシビリティのプレビュー。 各ステップの HEX コードを調べて、グラデーションを適用する前にテキストとのコントラストを検証します。
• ツール間の一貫性。 同じステップリストを Figma、Sketch、Canva、コードに書き出し、すべてのツールで同一の色を使用します。

RGB 空間での補間は線形であるため、グラデーションは均一で予測可能に感じられます。これはほとんどの UI 用途で求められる性質です。

線形 RGB 補間の解説

開始色と終了色の間に N ステップを要求すると、本ツールは線形補間で各ステップの赤・緑・青チャンネルを計算します。N 個のうち i 番目のステップ（0 から数える）について、割合は t = i / (N - 1) で、各チャンネルは start + (end - start) * t となり、最も近い整数に丸められます。最初のステップは常に開始色、最後のステップは常に終了色で、中間のステップは均等に配置されます。

線形 RGB 補間は最もシンプルで広く使われている手法です。他の色空間（HSL、OKLab）は人間の目により均一に見えるグラデーションを生成できますが、ほとんどの UI 作業では違いは微妙であり、RGB 補間はブラウザが CSS グラデーションをブレンドする際に内部的に使用する手法です。

一般的なグラデーションの使用例

下表は異なるステップ数が異なるデザイン目標にどのように適しているかを示しています。

ステップ数	最適な用途
3	ミニマルなヒーローバナー、シンプルなボタン塗り
5	プログレスバー、控えめなブランドブレンド
8	ほとんどの UI グラデーションのデフォルト
12	滑らかな移行を持つデータビズ ヒートマップ
20	細粒度のパレット、写真風のブレンド

まだ滑らかに見える最小のステップ数を選んでください——余分なステップはデザインを改善することなく視覚的なノイズを増やすだけです。

グラデーションの生成方法

本ツールでグラデーションを生成するのは 1 秒かからず、すべてブラウザ内で完結します。アップロード、サインアップ、インストールは不要です。以下の手順で行います：

1. 端点を選ぶ。 2 つのカラーピッカーを使用して開始色と終了色を設定します。
2. ステップ数を設定。 ステップ数フィールドに 3 から 20 までの数値を入力します。
3. グラデーションを確認。 ストリップと色見本のグリッドがリアルタイムで更新され、それぞれ HEX コードが表示されます。
4. コードをコピー。「全 HEX をコピー」をクリックして各ステップの HEX 値をコピーし、CSS、デザインツール、コードに貼り付けます。

すべてのステップは JavaScript によりブラウザ内でローカルに実行されるため、色の選択がサーバーにアップロードされることはありません。これによりグラデーション生成は完全にプライベートかつ即時に行われます。