CSS相対カラー構文ジェネレーターとは
CSS相対カラー構文を使用すると、既存の色から始めて、そのチャンネルを個別に変更できます。rgb(from color r g b / alpha)やhsl(from color h s l / alpha)の構文を使用して、明度、彩度、アルファ、または個々のチャンネルを調整できます。これは精密なチャンネル操作においてcolor-mix()よりも強力です。
クイックアンサー
CSS相対カラー構文を使用すると、既存の色の個々のチャンネルを調整して新しい色を作成できます。プリプロセッサなしでの精密なチャンネルレベル操作において、color-mix()よりも強力です。
Last updated: 2026-06-11
制限事項
- ブラウザサポートにはChrome 119以上、Safari 16.4以上、Firefox 128以上が必要です。古いブラウザは宣言を完全に無視します。
- 構文は色空間によってわずかに異なります。すべてのチャンネルがすべての色空間で使用できるわけではなく、チャンネル値の範囲も異なります。
- 複雑なネストされた相対カラー式は可読性を損なう可能性があります。宣言をクリーンに保つために、ベースカラーにはCSSカスタムプロパティを使用してください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- ベースカラーをhex、RGB、またはHSL形式で入力します。
- 出力色空間とチャンネル調整を選択します。
- ツールが相対カラー構文のCSSを生成します。
- 宣言をスタイルシートにコピーします。
主な用途
- ブランドカラーの半透明バリアントを作成する。
- 明度チャンネルを調整して明るい色や暗い色を生成する。
- ホバー状態やアクティブ状態のために彩度を上げたり下げたりする。