RGBグラデーションパレット生成
再現可能なカラースケールを作成し、生成された各ストップをプレビューして、CSS、チャート、デザイントークン用の正確なHEXシーケンスをコピーできます。
使ってみる
RGBグラデーションパレット生成
再現可能なカラースケールを作成し、生成された各ストップをプレビューして、CSS、チャート、デザイントークン用の正確なHEXシーケンスをコピーできます。
このツールでできること
再現可能なカラースケールを作成し、生成された各ストップをプレビューして、CSS、チャート、デザイントークン用の正確なHEXシーケンスをコピーできます。
使用例
入力
#2563EB → #EC4899、5色
結果
#2563EB, #575CD7, #8956C2, #BA4FAE, #EC4899
結果の生成方法
各中間色は、赤、緑、青の各チャンネルの線形補間によって作成されます。端点は保持され、残りの色は等間隔に配置されます。
便利なワークフロー
- 順序付きチャートカラーやヒートマップスケールを作成する
- 2つのデザイントークン間のホバー状態や状態色を構築する
- 背景グラデーション用のコンパクトなパレットを作成する
重要な制限
- 一部の補色間では、RGB補間が暗くまたは濁って見えることがあります。
- 滑らかに見えるパレットが自動的に色覚障害者に優しいわけではありません。
- このジェネレーターは等間隔のRGB色を生成しますが、知覚的な均一性を保証するものではありません。
よくある質問
中間点が灰色または濁って見えるのはなぜですか?
反対のRGBチャンネルが平均化されて中間色になることがあります。視覚的な鮮やかさが重要な場合は、マルチストップCSSワークフローで適切な中間色を追加してください。
何色生成すればよいですか?
必要な状態やデータバンドの数に合わせて最小限の色数を使用してください。連続した背景にはより多くのステップを使用できます。
色数には両端を含み、初期値は10です。小数部を切り捨てて2〜100に制限します。端点はHEX、RGB、HSV、HSLで編集できますが、補間は常に符号化されたRGBチャンネルで行い整数に丸めます。プレビューは90°固定で、追加の色位置、アルファ、色空間の選択はありません。出力は1行1個のHEX値で、CSSコードや画像のダウンロードではありません。
処理はブラウザ内でローカルに行われます。