Alchemist's Laboratory

The color-mix() function allows mixing any two colors in desired proportion. This is a killer for preprocessors like Sass in color work.

Usage Example:

.element {
  /* Mix red and blue in equal parts */
  background: color-mix(in srgb, red, blue);
  
  /* Make color 20% lighter (mix with white) */
  background: color-mix(in oklch, var(--brand), white 20%);
}

" in [color-space] " Parameter:

You must specify which color space to mix in.

• in srgb: familiar mixing.
• in oklch: more " vivid " and natural mixing preserving color purity.