CSS Relative Color Playground - Online Manipulate Colors

CSS Relative Color Syntax is a modern CSS feature that lets you derive new colors from existing ones by manipulating individual color channels. Using the from keyword inside color functions like rgb(), hsl(), or oklch(), you can extract channel values (e.g., r, g, b) from a base color and apply mathematical transformations using calc(). This eliminates the need for preprocessor functions like Sass's darken() or lighten().

As of 2024, CSS Relative Color Syntax is supported in Chrome 119+, Edge 119+, Safari 16.4+, Firefox 128+, and Opera 105+. It enjoys broad coverage across all major modern browsers. For older browsers, consider providing fallback colors using @supports queries or CSS custom properties with static fallbacks.

color-mix() blends two colors together in a specified color space (e.g., mixing blue and white to get light blue). Relative color syntax, on the other hand, derives a new color from a single base color by adjusting individual channels. You can increase saturation, shift hue, or adjust lightness without needing a second color. They complement each other: use color-mix() for blending, and relative colors for channel-level manipulation.

You can use relative color syntax with sRGB, HSL, HWB, Lab, LCH, OKLab, and OKLCH color spaces. Each space offers different advantages: HSL is intuitive for hue/saturation adjustments, OKLCH provides perceptually uniform lightness, and OKLab excels for precise color manipulation. The choice of color space affects how the resulting color looks and behaves.

Absolutely! One of the most powerful features of relative color syntax is the ability to use calc() expressions on channel values. For example, rgb(from var(--base) calc(r + 50) g b) brightens the red channel by 50 units. You can multiply, divide, add, subtract, and even combine operations like calc(l * 1.2) to boost lightness by 20%. This gives you fine-grained, dynamic control over color transformations directly in CSS.

CSS Relative Color operations are computed by the browser's rendering engine at paint time, similar to other CSS color functions. The performance impact is negligible for most use cases. However, if you're applying relative color transformations to hundreds of elements that change frequently (e.g., during animations), it's worth testing. For static styles, there's no measurable performance difference compared to hardcoded color values.

Common use cases include: Generating hover/focus states (darken or lighten a brand color by 15%), Creating accessible color palettes (ensuring sufficient contrast ratios), Building theme systems (deriving semantic tokens from a single base hue), Applying opacity without affecting children (by manipulating the alpha channel), and Generating complementary or analogous color schemes dynamically. It's especially powerful when combined with CSS custom properties in design systems.

OKLCH offers perceptually uniform lightness, meaning equal changes in the lightness channel produce visually equal changes in perceived brightness. In HSL, two colors with the same "L" value can appear drastically different in brightness (e.g., yellow vs. blue at L=50%). OKLCH fixes this, making it more predictable for programmatic color manipulation. It's also designed for wide-gamut displays and is being adopted as the recommended color space for modern CSS by the W3C.