How to Use CSS color-mix() to Blend Two Colors by Ratio
Generating palettes on the fly in a design system
In design systems, manually specifying color values for various variations of a main color (hover state, disabled state, etc.) is tedious. Using color-mix(in srgb, color1, color2 percentage), you can generate new colors by mixing two colors at any ratio directly in CSS.
Combined with CSS custom properties, you can dynamically derive an entire color system from a single brand color.
How to Apply
1
Write in color-mix(in srgb, color1, color2 percentage) format
2
Define base colors in CSS custom properties
3
Derive state-specific colors (hover, active, disabled) with color-mix
4
Experiment with color spaces (srgb, oklch) for optimal mixing results
Pros
- ✓ Dynamically generate various variations from one base color
- ✓ Get exact colors without background blending unlike opacity
Cons
- ✗ Mixing results vary by color space and may be hard to predict
- ✗ May not exactly match colors from design tools like Figma
Use Cases
Auto-generating entire UI color palette from one brand color
Natural blending with backgrounds using color-mix instead of opacity