HTML & CSS · Senior · Question 30 of 75
What is color-mix(in oklch, var(--brand) 80%, white) for?
- ✓Correct answer: Mixing colors in CSS - a light brand tint without hardcoding
- 2Automatically picking a contrasting text color on the brand background
- 3Smoothly animating between two colors over 80% of the duration
Explanation
color-mix() blends colors in a given color space at a given ratio. It lets you derive hover states, translucent variants (color-mix(in srgb, red, transparent 50%)) and tints from a single brand variable. Tailwind v4 uses it to implement opacity modifiers like bg-brand/50.