CSS Color Mixing Techniques with Tailwind

Introduction to color-mix()

CSS color-mix() lets you blend two colors in a specified color space at any ratio. Combined with Tailwind's CSS variable approach, you can create tints, shades, and overlays without predefining every shade.

Basic Syntax

/* color-mix(in <colorspace>, <color1> <percentage>, <color2>) */

.tinted-bg {
  /* 70% brand blue, 30% white = light tint */
  background: color-mix(in oklch, #3b82f6 70%, white);
}

.overlay {
  /* 50/50 mix for a blended tone */
  background: color-mix(in oklch, #3b82f6, #8b5cf6);
}

Using color-mix with Tailwind Variables

/* Arbitrary value in Tailwind class */
<div class="bg-[color-mix(in_oklch,theme(colors.blue.500)_80%,white)]">
  Light blue tint
</div>

/* CSS variable approach */
:root {
  --primary: #3b82f6;
  --primary-tint: color-mix(in oklch, var(--primary) 85%, white);
  --primary-shade: color-mix(in oklch, var(--primary) 85%, black);
}

Practical Use Cases

• Generate hover states: mix your color with black for a darker hover
• Create tints for backgrounds: mix with white at 10-20% original color
• Build harmonious palettes: mix two brand colors at various ratios
• Adaptive overlays: mix foreground and background for muted text
• oklch interpolation avoids the muddy grays that sRGB mixing produces