PerfectPalette

Learn Color Theory

Master color with interactive guides.

Accessibility & Implementation

Gamut

The range of colors a device or color model can reproduce — colors outside the gamut are clipped or approximated.

What it means

Every display technology and color model has a finite range of colors it can show or represent. That range is its gamut. sRGB is the standard gamut for the web — most monitors can display the full sRGB range. Display P3 is a wider gamut available on modern Apple devices and some OLED panels.

When you define a color in OKLCH with very high chroma, it may fall outside sRGB. The browser will clip it to the nearest displayable color, which can produce unexpected results — a carefully chosen vivid cyan might render as a duller version on a standard monitor.

Why it matters in palette design

Gamut awareness prevents export surprises. If you design in a wide-gamut space (P3 or OKLCH) but export hex values for sRGB-only displays, some colors will shift. PerfectPalette ensures gamut safety when exporting hex values — no clipped exports.

Common confusion

Gamut vs. color space: A color space is a mathematical model for organizing colors (like sRGB, Display P3, or OKLCH). A gamut is the specific range of colors a space or device can reproduce. OKLCH can represent colors outside any display gamut — it's a specification space, not a hardware limit.

Example

A designer creates a vivid neon green in OKLCH (L=0.85, C=0.35, H=145). On a P3 display, it looks brilliant. When exported as a hex value for sRGB, the chroma is silently clipped and the green appears duller. Gamut-safe export would flag or adjust this.

Learn more

Apply this to your palette

Open PerfectPalette and put these concepts into practice with your own colors.