CSS相対カラー構文ジェネレーターとは
CSS相対カラー構文ジェネレーターは、アルファ、明るい、暗い、チャンネル調整バリアント用のCSS相対カラー構文を生成します。 出力は公開サイトに使う前に確認しやすい形で表示されます。
Quick answer
CSS relative color syntax lets you create a new color by adjusting individual channels of an existing color. It is more powerful than color-mix() for precise channel-level manipulation without a preprocessor.
Limitations
- Browser support requires Chrome 119+, Safari 16.4+, and Firefox 128+. Older browsers will ignore the declaration entirely.
- The syntax varies slightly by color space. Not all channels are available in every color space, and channel value ranges differ.
- Complex nested relative color expressions can hurt readability. Use a CSS custom property for the base color to keep declarations clean.
使い方
- 必要な値を入力します。
- 結果パネルの出力を確認します。
- ページに合う部分だけコピーします。
- 公開前にブラウザとホスティング環境で確認します。
主な用途
- 公開前の繰り返し作業を短くする。
- マークアップ、CSS、チェックリストを準備する。
- 静的サイトで見落としやすい小さなミスを減らす。