CSS Color Functions Interactive Demo

Experiment with color-mix() and relative color syntax in real time

color-mix() Function

#3498db
#e74c3c
50%
Mixed Color

Darken & Lighten

#3498db
0%
Original
Adjusted

Color Space Comparison

#0000ff
#ffff00

See how the same mix looks in different color spaces:

sRGB
OKLCH
HSL

Notice how OKLCH typically produces cleaner, more natural results when mixing complementary colors.

Relative Color Syntax

#3498db
0.00
1.0x
0°
1.0
Original
Adjusted