Free CSS Relative Color Generator
Transform colors dynamically with our free tool. CSS relative color syntax.
- Color transformation
- Channel modification
- Multiple color spaces
- Live preview
- Browser support info
Frequently Asked Questions
What is relative color syntax?
It lets you derive new colors from existing ones: 'hsl(from var(--brand) h s calc(l * 0.8))' creates a darker version by reducing lightness 20%.
What color spaces can I use?
You can transform colors in any color space—rgb, hsl, hwb, lab, lch, oklch. Choose based on the type of modification (hsl for lightness, oklch for perceptual uniformity).
Is relative color syntax well supported?
Support is growing—available in Safari and Chrome 119+. Firefox support is coming. Use feature detection or provide fallback colors for now.