Intermediate LevelCSS & Modern Layouts
How do color-mix() and relative color syntax work in modern CSS?
❓ Interview Prompt: Explain color-mix() for blending colors and relative color syntax for deriving color variants.
color-mix():
Blends two colors in a specified color space:
color-mix(in srgb, #3d2c2e 70%, white 30%) — 70% dark brown, 30% white.
Relative Color Syntax:
Derives new colors from existing ones by modifying individual channels:
oklch(from var(--primary) calc(l + 0.2) c h) — lighten the primary color by 0.2 in oklch lightness.
Use Cases:
•
Generating hover/active states from a single brand color.
•
Creating tints and shades without manual hex calculation.
•
Dynamic theme color derivation from a single variable.
Code Implementation Example
css
:root {
--brand: #3d2c2e;
}
.btn {
background: var(--brand);
}
.btn:hover {
/* 30% lighter blend */
background: color-mix(in oklch, var(--brand) 70%, white);
}
.btn:active {
/* 20% darker blend */
background: color-mix(in oklch, var(--brand), black 20%);
}💡Generating hover and active states using color-mix().
🎯 Interview Key Takeaway
color-mix() generates hover/active color variants from a single brand color without manual calculations.
#color-mix#Colors#Theming#Intermediate
Back to all CSS & Modern Layouts Questions→