グラデーション配色

機能

• 180 種類。どれにもプレビューと一行でコピーできる CSS が付きます
• 名前で検索。大文字小文字は問わず、部分一致も可
• 色値から逆引き：色を貼り付けると、それを使っているグラデーションが出ます
• 色相グループで閲覧：赤系・橙と茶系・黄系・緑系・青系・紫系・無彩色
• 各グラデーションの角度と全カラーストップを表示。ストップごとに色見本付き
• 片側の色だけ取り出せます：ストップはそれぞれ独立した行なので、片端の色値だけコピーできます
• 角度はすべて 0〜360 度に正規化済み。コピーした CSS はそのまま有効です
• 180 種類は検索できるドロップダウンに。ヒントに角度と色数が出ます
• 空欄で全件を一覧。色相ごとに並びます
• 貼り付け耐性。例文の括弧や全角文字がついても検索結果は変わりません
• CSS と色値は行ごとにコピーでき、スタイルシートにそのまま貼れます

使い方

1. グラデーション名（例：Night Fade）を入力すると、プレビュー・CSS・全ストップが出ます
2. または色値（例：#ff9a9e）を貼り付けて、それを使っているグラデーションを探します
3. 色系で選びたいときは分類名を入力してください
4. 空欄にすると 180 種類すべてを色相ごとに一覧します

よくある質問

そのままプロジェクトで使えますか？

使えますが、自分の文脈に合わせて調整してください。 データは MIT ライセンスのオープンソース コレクション由来で、色値自体に制限はありません。二点だけ注意します。第一にアクセシビリティは自分で確認してください —— グラデーション上の白文字は、特に中間調の暖色系でコントラストが不足します。プレビューが綺麗に見えるかではなく、表示されている色値でコントラストを確認してください。第二に性能です。`linear-gradient` 自体は安価ですが、広い面積のグラデーションにアニメーションやフィルターを重ねると GPU 負荷が目に見えて増えます。全画面背景＋スクロールアニメーションのような使い方は計測してから出してください。

同じ色が二度出てくるストップがあるのはなぜですか？

その 5 種類は元データの時点で単色（両端が同色）で、データの誤りではなくコレクションの一部です —— 実質的に薄いグレー一枚のものもあります。これはそのまま残し、二点のストップという書き方もそのままにしました。そうすれば有効な `linear-gradient` のままで、実際の姿どおり単色として描画されます。ストップ一つにまとめると、かえって CSS 上でグラデーションに見えなくなります。

終点が 100% でないものがあるのはなぜですか？

ハードストップです。最後のストップが例えば 42% にあり、それ以降はその色で埋まります —— 意図された効果で、データ欠損ではありません。7 種類がこの形で、1 種類は起点が 59% にあります。こちらが施した整理は結果を変えない二つだけ（同色の冗長ストップの統合、`1%`/`99%` の残留の正規化）で、端点を無理に両端へ寄せることはしていません —— それをすると実色の区間がグラデーションに変わり、見た目が変わってしまうからです。

グラデーションから色を一つだけ取り出すには？

各ストップが独立した行になっており、それぞれに色見本が付くので、その色値だけをコピーできます。ここが最もよく求められる操作です —— グラデーション全体を使うことは少なく、多くは片端の色が目に留まり、それを基準色にしたいはずです。取り出した色を配色スキームのツールに持ち込めば、それを軸にした組み合わせを算出できます。

角度とキーワード指定の対応を教えてください。

CSS では `0deg` が下から上、角度は時計回りに増えます：`90deg` が左から右、`180deg` が上から下、`270deg` が右から左です。`to right` や `to bottom right` といったキーワードも決まった角度に対応しますが、縦横比が不明な要素ではキーワードが対角線を横切るよう角度を自動調整するのに対し、固定角度は調整しません —— そのためレスポンシブではキーワードのほうが安定することが多く、固定角度は縦横比が決まっている要素に向きます。