CSSグラデーションジェネレーター

このツールでできること

再現可能なカラースケールを作成し、生成された各ストップをプレビューして、CSS、チャート、デザイントークン用の正確なHEXシーケンスをコピーできます。

使用例

結果の生成方法

各中間色は、赤、緑、青の各チャンネルの線形補間によって作成されます。端点は保持され、残りの色は等間隔に配置されます。

便利なワークフロー

• 順序付きチャートカラーやヒートマップスケールを作成する
• 2つのデザイントークン間のホバー状態や状態色を構築する
• 背景グラデーション用のコンパクトなパレットを作成する

重要な制限

• 一部の補色間では、RGB補間が暗くまたは濁って見えることがあります。
• 滑らかに見えるパレットが自動的に色覚障害者に優しいわけではありません。
• このジェネレーターは等間隔のRGB色を生成しますが、知覚的な均一性を保証するものではありません。

よくある質問

中間点が灰色または濁って見えるのはなぜですか？

反対のRGBチャンネルが平均化されて中間色になることがあります。視覚的な鮮やかさが重要な場合は、マルチストップCSSワークフローで適切な中間色を追加してください。

何色生成すればよいですか？

必要な状態やデータバンドの数に合わせて最小限の色数を使用してください。連続した背景にはより多くのステップを使用できます。