Why can a wide-gamut color change in HEX output?

HEX targets sRGB. A source outside that gamut must be mapped; the source coordinates and the mapped output should not be treated as interchangeable color evidence.

Is transparency included in the contrast calculation?

The foreground is composited over the supplied opaque background before the ratio is calculated. A translucent background is rejected because the final surface would be ambiguous.

Does one passing ratio certify my interface?

No. The displayed WCAG 2.x ratio applies to this foreground/background pair. Text size, interaction states, surrounding design, and other accessibility requirements remain separate.

Web engineering

Color Space Converter

Convert modern CSS colors and check readable contrast across spaces.

Online tools Pricing

Input0 characters

Result0 characters

Prefer a native workflow?

Keep Color Space Converter one shortcut away.

DevSexy for Mac puts the same private workflow in a focused desktop app, with global shortcuts and no browser tab to manage.

Global shortcutOffline-readyLocal processing

Try the Mac app free

This browser tool remains free.

Color reality check

One color, two shipping truths.

A wide-gamut source is what you authored. An sRGB fallback is what a narrower display can render. Keep both values visible so conversion never disguises gamut loss.

Display-P3 · preserved source

color(display-p3 1 0.4235 0.3608)

OKLCH 62.32% · 0.179 · 28.59°

sRGB · mapped fallback

#ed6356

OKLCH 62.32% · 0.131 · 29.01°

Conversion constellation

One selected source, many labeled representations

HEX · sRGB

#ed6356

RGB · sRGB

rgb(237 99 86)

HSL · sRGB

hsl(5.2 79.8% 63.3%)

Lab · D50

lab(62.3% 57.8 40.2)

LCH · D50

lch(62.3% 70.4 34.8)

OKLab

oklab(62.32% .157 .087)

Display-P3

color(display-p3 1 .4235 .3608)

OKLCH 62.32% 0.179 28.59°

Gamut atlas

Mapping is a path, not a clamp label.

CSS gamut mapping aims to keep lightness and hue stable while reducing chroma into the destination gamut. The source remains available; the fallback is a separate shipping value.

Gamut mapping path

1
P3 source
Outside sRGB
2
Hue + lightness lock
Appearance anchors
3
Chroma reduction
Move toward the boundary
4
Mapped sRGB
Target-display fallback

Alpha-aware contrast bench

Contrast belongs to the composited pixels.

Background

#111210

Foreground

P3 coral / 85%

Composite

#cb574d

WCAG 2.x

4.62 : 1

A translucent foreground must be blended over the actual background before relative luminance and contrast are compared. Recheck every state and surface.

Use it right, everywhere

Keep fallback and source tokens together

Progressive CSS

.chip {
  background: #ed6356;
  background: color(display-p3 1 .4235 .3608);
}

Feature detection

@supports (color: color(display-p3 1 0 0)) {
  .chip { background: var(--brand-p3); }
}

Tailwind v4 tokens

@theme {
  --color-brand-srgb: #ed6356;
  --color-brand-p3: color(display-p3 1 .4235 .3608);
}

Run a reproducible example

Compare a known color conversion with the black-on-white contrast reference.

Using an example replaces the current input, reference input, operation, and options. Public demonstration data only.

Convert opaque red

Three-digit coordinate precision and uppercase hexadecimal output.

Input

#ff0000

Inspect CSS and platform representations for the same red source; mapped outputs can differ for wider gamuts.

#F00

Check black on white

Use an opaque white background and opaque black foreground.

Input

#000000

The WCAG 2.x contrast ratio is 21.00:1. Other real interaction states still need their own checks.

WCAG 2.x ratio: 21.00:1
Normal text AA (4.5:1): pass

Continue with a related task

CSS Beautifier & Minifier

Format, diagnose, and minify CSS with syntax-aware processing.

SVG Optimizer

Reduce SVG markup with transparent optimization decisions.

Android Vector Asset Bridge

Convert compatible SVG paths to Android VectorDrawable and back.

Repeat the task in DevSexy for Mac

Use the native app for repeated offline work and direct Option shortcuts.

Direct answer

What is Color Space Converter?

Convert CSS colors online across HEX, RGB, HSL, OKLCH, Display P3, and sRGB; identify gamut limits, create fallbacks, and check contrast after alpha compositing.

What can it do?

Convert
Contrast

How to use Color Space Converter

01
Prepare the input
Enter a CSS color and, for contrast, an explicit opaque background.
02
Choose the operation
Choose conversion precision or run the contrast operation.
03
Review the evidence
Inspect gamut mapping and alpha compositing before using generated color values.

Frequently asked questions

Why can a wide-gamut color change in HEX output?: HEX targets sRGB. A source outside that gamut must be mapped; the source coordinates and the mapped output should not be treated as interchangeable color evidence.
Is transparency included in the contrast calculation?: The foreground is composited over the supplied opaque background before the ratio is calculated. A translucent background is rejected because the final surface would be ambiguous.
Does one passing ratio certify my interface?: No. The displayed WCAG 2.x ratio applies to this foreground/background pair. Text size, interaction states, surrounding design, and other accessibility requirements remain separate.