CSS Relative Color Syntax Playground - Online from a Base Color

As of 2024, Chrome 119+, Edge 119+, Safari 16.4+, Firefox 128+, and Opera 105+ all support CSS Relative Color Syntax. It covers roughly 92%+ of global users. Internet Explorer does not support this feature. For older browsers, consider providing fallback colors.

This is the most common and powerful pattern. Define your base color as a CSS custom property, then derive variants using relative syntax:
:root { --primary: #3b82f6; }
.btn-hover { background: rgb(from var(--primary) calc(r + 20) calc(g + 20) calc(b + 20)); }
Changing --primary automatically updates all derived variants across your entire stylesheet — no need for preprocessors like Sass.

rgb(from ...) operates in the sRGB color space with channels r, g, b (0–255) and an optional alpha (0–1). It's intuitive for lightening/darkening by adding/subtracting from all channels. hsl(from ...) operates in HSL space with h (0–360), s (0–100), l (0–100). It's better for saturation adjustments, hue rotations, and maintaining perceptual brightness. Choose based on the visual effect you want.

Yes! You can reference any CSS color value directly: rgb(from #ff6b6b calc(r - 50) g b) or hsl(from rgb(100,200,150) h calc(s * 0.5) l). However, using CSS variables makes your code much more maintainable and is the recommended approach for design systems and theming.

1. Hover/focus states — lighten or darken a button color.
2. Design systems — generate entire color scales from a single brand color.
3. Theming — adjust colors for light/dark mode dynamically.
4. Accessibility — programmatically increase contrast by adjusting lightness.
5. Opacity variants — create transparent versions without affecting the original hue.
6. Gradients — derive intermediate colors for richer gradients.

For many use cases, yes. CSS Relative Color Syntax can replace lighten(), darken(), saturate(), adjust-hue(), and rgba() opacity variants from Sass. The key advantage: these are runtime, dynamic calculations in the browser, responding to CSS variable changes — something preprocessors cannot do. However, Sass still has value for more complex color math and compile-time optimizations.

CSS Relative Color Syntax works with all modern CSS color functions: rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), and the color() function for display-p3 and other wide-gamut spaces. Each space gives you access to different channels for manipulation. For example, oklch(from ... l c h) lets you adjust perceptual lightness, chroma, and hue in the perceptually uniform OKLCH space.