🎨 CSS Relative Color Generator

intextEN

← All Tools

🎯 Base Color

Base
→
Result

⚙️ Color Space & Adjustments

📄 Generated CSS Code

🎨 Variant Preview

📖 What is CSS Relative Color Syntax?

CSS Relative Color Syntax is a new feature in CSS Color Level 4 that allows you to create new colors based on the channel values of an existing color.

Syntax Format

color-space(from <color> channel1 channel2 channel3 / alpha)

Examples

oklch(from #3b82f6 calc(l + 0.2) c h) - Create a lighter variant based on blue

hsl(from #3b82f6 h calc(s * 0.5) l) - Reduce saturation

rgb(from #3b82f6 r g b / 0.5) - Semi-transparent version

Browser Support

✅ Chrome 119+ | ✅ Edge 119+ | ✅ Safari 16.4+ | 🔄 Firefox (In Development)

❓ FAQ

Is the CSS Relative Color Generator free?

Yes, completely free to use, no registration required.

What is CSS Relative Color Syntax?

CSS Relative Color Syntax allows you to create new colors based on an existing color by adjusting its channel values.

Which color spaces are supported?

Supports oklch, oklab, lab, lch, hsl, hwb, rgb and other CSS color spaces.

What about browser compatibility?

Chrome 119+, Edge 119+, Safari 16.4+ already support it.

Is my data uploaded to a server?

No. All processing is done locally in your browser.