Wide Gamut Colors for the Web with Tailwind CSS

What Are Wide Gamut Colors?

Standard sRGB covers about 35% of visible colors. Display P3, used in modern Apple and flagship Android screens, covers roughly 50%. With oklch() and color() functions, you can access this wider range in CSS.

Using P3 Colors in Tailwind

/* Define wide-gamut colors with sRGB fallbacks */
@theme {
  --color-vivid-red: #ef4444;
}

@supports (color: oklch(0 0 0)) {
  @theme {
    --color-vivid-red: oklch(0.63 0.26 25);
  }
}

/* Or use color() for explicit P3 */
.hero-accent {
  background: color(display-p3 1 0.2 0.1);
}

Feature Detection

<div class="bg-red-500">
  <!-- sRGB fallback automatically applies -->
  <!-- P3-capable browsers show more vivid red via oklch -->
</div>

<style>
  @media (color-gamut: p3) {
    .vivid-gradient {
      background: linear-gradient(
        to right,
        oklch(0.7 0.25 330),
        oklch(0.7 0.25 270)
      );
    }
  }
</style>

Practical Tips

• Always provide sRGB fallbacks for non-P3 screens
• Use @media (color-gamut: p3) to target capable displays
• oklch chroma values above ~0.18 often exceed sRGB
• Test on both P3 and sRGB displays to compare appearance
• Gradients benefit most from wide gamut, avoiding muddy mid-tones