ランダムグラデーション

2つの色の幾何学

CSSリニアグラデーションは3つの要素で定義されます：方向角度、開始色、終了色です。ブラウザはsRGB色空間での線形補間を使用して、角度軸に沿ったすべての中間色を計算します。0度は上方向、90度は右方向、180度は下方向を指します。0から359までのすべての角度が有効です。このツールはWeb Cryptography APIから3つの値をそれぞれ独立して選択し、1670万 × 1670万 × 360 ≈ 100京通りの異なるグラデーションを生成します。

ランダムグラデーションが驚きをもたらす理由

色彩の相互作用を数十年にわたり研究したバウハウスの巨匠ヨゼフ・アルバースは、同じ色でも隣り合う色によってまったく異なって見えることを実証しました。暖かいオレンジは深い青の隣に置くと輝いて見え、赤の隣に置くと後退して見えます。ランダムなグラデーション生成は、意図的なデザイナーなら決して試みないような組み合わせを生み出し、これらの予想外のペアリングの中には驚くべき美しさを示すものがあります。下の補色グラデーションは色相環の反対側から生まれ、色相のコントラストだけで最大限の視覚的エネルギーを生み出します。

両方の色が似た色相領域を共有する類似色の組み合わせは、より柔らかく雰囲気のあるグラデーションを生み出します。純粋にランダムな生成では、約25%の確率で現れます。

ハーモニースペクトル

統計パネルは各グラデーションをその色彩関係でラベル付けします。モノクロームのペアは色相環上で15度未満の差で、微妙なトーンの変化を生み出します。類似色のペア（15度から45度の差）は色の近隣を共有します。コントラストのグラデーションは90度から150度にわたります。補色のペアは色相環の反対側（150度から180度の差）に位置し、最も強い視覚的緊張を生み出します。ラベルは生成ごとに更新され、クリックするたびに色彩理論のミニレッスンになります。

実用的なCSS

生成されたグラデーションはCSSのlinear-gradient()値として直接コピーできます。任意の要素のbackgroundプロパティとして使用できます。background-clip: textでテキストの背後にレイヤーとして重ねれば、グラデーションタイポグラフィになります。半透明のバリアントで画像にオーバーレイすることもできます。ボタン、カード、ヒーローセクション、ローディング画面に適用できます。角度と色が完全な仕様です：貼り付けて、必要に応じて不透明度を調整し、公開してください。

アーキテクチャによるプライバシー保護

両方の色と角度は、ブラウザのWeb Cryptography APIから生成されます。サーバーはこのページを配信して完了します。生成されたグラデーション、履歴、生成回数はすべてブラウザ内に留まります。サーバーは何も保存しません。URLを共有してもツールが共有されるだけで、生成された出力は共有されません。各訪問者のブラウザは完全に独立した結果を生成します。

実世界のグラデーションインスピレーション

ランダム生成は予想外の組み合わせを明らかにしますが、実世界のプロジェクトは色彩関係が実際にどのように機能するかを示しています。このツールが2つの独立した色とランダムな角度から新しいCSSグラデーションを生成する一方で、Color Discoveryは建築、プロダクトデザイン、パッケージング、インテリアなどの完成されたクリエイティブ作品から抽出されたパレットを探索します。これらのパレットは、実際の素材、照明条件、視覚的コンテキストにおいて色相がどのように相互作用するかを示しています。ランダムに生成されたグラデーションがアイデアを刺激したら、実世界のパレットを閲覧することで、プロフェッショナルなデザインで実証された組み合わせに洗練させることができます。UIの背景を構築する場合でも、素材の仕上げを選択する場合でも、適切な色彩の雰囲気を探している場合でも、Color Discoveryで詳しくご覧ください。