🎨

Color Studio

CSS Color 4 toolkit for conversion and gamut mapping, OKLCH palettes, perceptual gradients, WCAG 2.2 contrast, and approximate color-vision previews

Browser processingcolorhexrgbhslhsvcmykpalettegradientcontrastaccessibilitywcagwcag-2.2colorblindcss-color-4oklaboklchdisplay-p3gamutperceptualstudio

Terms explained

Plain-language definitions for technical terms used by this tool.

Gamut: The range of colors a color space or display can represent.
sRGB: The standard web color space supported by nearly all displays and browsers.
Display-P3 / P3: A wider display color space that can represent more saturated colors than sRGB.
In gamut: The color can be represented in that color space without changing it.
Clipped preview: An out-of-range channel was limited to the nearest sRGB value, so the preview is an approximation.
OKLCH: A perceptual color model using lightness, chroma, and hue; similar numeric changes tend to look more consistent.
Chroma: Colorfulness relative to a neutral gray. The maximum available chroma depends on hue and lightness.
WCAG contrast: A text contrast ratio used by WCAG accessibility guidance; larger text has a lower required threshold.

Color Converter