Gamut checker
Know where your color fits.
Review an authored CSS color across screen and print contexts, keep its separate sRGB fallback visible, and carry the right containment and profile caveats into handoff.
Free color utility
Gamut Checker
Inputs update live, exports are copy-ready, and the color math stays deterministic.
Quick start
Starter presets
Start with a realistic setup, then adjust any input and watch the result update.
Valid input example: #4169E1 as a six-digit sRGB HEX color
If input is invalid: Invalid or incomplete color values are identified at the field, announced, and explained in the result area so they can be corrected without guesswork.
Choose a preset or edit the controls directly.
Gamut
sRGB gamut context
Instructions
- Enter a resolved screen color or use Random color to test a new sample.
- Choose the audit focus that matches your handoff: CSS screens, wider-space containment context, or print prep.
- Review the specimen, fallback status, and space cards before using the color in production.
- Copy the report for design-system notes, implementation handoff, or QA review.
Resolved sRGB source ready for screen gamut review.
Results
Gamut and fallback cards
Methodology and guides
How this tool calculates and connects.
Review the formulas, assumptions, edge cases, validation checks, caveats, and related color guidance behind Gamut Checker.
Methodology pages
Related guides
How it fits
From authored color to gamut-aware handoff.
Place a concrete CSS color in screen and print contexts, keep its authored value and sRGB fallback distinct, and document where device and profile behavior still matters.
Understand screen context
Review authored-coordinate containment across sRGB, Display P3, and Rec. 2020 without confusing a converted fallback with the original source.
Treat print as approximate
Use the CMYK value as a starting estimate only; printer, ink, paper, and the selected ICC profile determine production output.
Free sharing
Gamut checks can be bookmarked and shared without an account, making results easy to revisit.
Quick overview
Hue Codex Gamut Checker accepts fixed concrete CSS colors, evaluates their authored coordinates against sRGB, Display P3, and Rec. 2020, and keeps the authored value separate from its resolved or clipped sRGB fallback. It also provides approximate CMYK and explains the device, profile, and print limits that the browser cannot determine.
- Enter HEX, RGB, HSL, HWB, Lab/LCH, OKLab/OKLCH, supported color() syntax, a fixed named color, or transparent.
- The tool evaluates authored coordinates and labels the separate 8-bit sRGB fallback when conversion or clipping is required.
- The CMYK value is approximate and should not be treated as final print production data.
- Real print results depend on printer, paper, ink, press condition, total ink limits, and ICC profiles.
- Wide-gamut results still require browser, display, export, and fallback testing in the target environment.
What the Hue Codex gamut checker does
The Hue Codex gamut checker accepts fixed concrete CSS colors, including alpha HEX, RGB, HSL, HWB, Lab/LCH, OKLab/OKLCH, supported color() profiles, fixed named colors, and transparent. It evaluates the authored coordinates against sRGB, Display P3, and Rec. 2020 instead of assuming every source began in sRGB.
The checker preserves the authored syntax, labels the resolved or clipped 8-bit sRGB fallback separately, and provides an approximate CMYK value. This supports screen and print conversations without presenting browser-side conversion as a device measurement or press proof.
A color gamut is the range of colors a color space, display, printer, or output process can represent. A color is in gamut when it can be represented by the target space without mapping or clipping.
Gamut results shown by Hue Codex
The report distinguishes the authored color from its sRGB fallback. Alpha is preserved as a separate component because opacity changes compositing, not the underlying color coordinates used for the gamut check.
| Field | What it means | How to use it |
|---|---|---|
| sRGB | Whether the authored coordinates fit sRGB without channel clipping. | Use the separately labeled sRGB value as a fallback, then review it in context. |
| Display P3 | Whether the authored coordinates are representable in Display P3. | Useful for supported Display P3 input, modern screens, and CSS fallback planning. |
| Rec. 2020 | Whether the authored coordinates are representable in Rec. 2020. | Useful context for HDR and video-oriented gamut discussions. |
| CMYK approximation | A rough process-color conversion from the selected screen color. | Use only as a starting point before print-specific conversion and proofing. |
Best uses for gamut checks
Gamut checking is most useful when a color needs to move between screens, CSS, design-system documentation, and print conversations. This tool records the source syntax and color space, shows which target gamuts contain the authored coordinates, and keeps fallback and print approximations clearly labeled.
Web and app color documentation
Record the authored syntax and color space together with a separate sRGB fallback for ordinary web workflows.
Wide-gamut planning
Review whether authored coordinates fit sRGB, Display P3, and Rec. 2020, including when the source is wider than sRGB.
Print handoff preparation
Copy the approximate CMYK value as a conversation starter before real print profiling and proofing.
Color QA notes
Include the gamut report in design-system documentation, project notes, or color review comments.
CMYK and print caveats
The CMYK value is approximate. It is calculated from the screen color and does not know the printer, paper, ink set, press condition, total ink limit, or ICC profile that will control real output.
For production print work, use the printer or vendor specification, color-managed software, calibrated proofing, and the correct profile for the job. A simple browser-side CMYK approximation is useful for planning, not final approval.
Treat approximate CMYK as a reference value. Final print color requires proofing and profile-aware conversion.
Wide-gamut caveats
A color can be valid in Display P3 or Rec. 2020 and still need fallback behavior for browsers, displays, screenshots, exports, or tools that only expect sRGB. Wide-gamut color choices should be tested in the actual environments where they will appear.
The checker can evaluate supported Display P3, Lab/LCH, OKLab/OKLCH, and XYZ source syntax, but its 8-bit sRGB fallback is a clipped channel conversion rather than a perceptual gamut map. Use CSS fallbacks and visual review together when authoring wide-gamut color.
OKLCH can describe colors outside sRGB because its coordinate range is not limited to the sRGB gamut. Keep the authored value for capable displays and review the separately labeled fallback wherever the wider source coordinates matter.
sRGB compatibility is useful, but it is not the same thing as full wide-gamut production QA.
Quick answers
Gamut Checker FAQ
What is the Hue Codex gamut checker?
The Hue Codex gamut checker is a free browser tool that evaluates a fixed concrete CSS color against sRGB, Display P3, and Rec. 2020, then reports a separate sRGB fallback and approximate CMYK output.
What is a color gamut?
A color gamut is the range of colors a color space, display, printer, or output process can represent.
Is an sRGB color inside Display P3?
Yes. Display P3 is a wider gamut than sRGB, so an sRGB color is representable inside Display P3.
Is an sRGB color inside Rec. 2020?
Yes. Rec. 2020 is wider than sRGB, so an sRGB color is representable inside Rec. 2020.
What does out of gamut mean?
Out of gamut means a color cannot be represented by the target color space, display, printer, or output process without mapping or clipping.
Is the CMYK value final for print?
No. The CMYK value is approximate. Final print color depends on printer, paper, ink, press condition, and ICC profile.
Can this tool check authored Display P3 colors?
Yes. Enter supported color(display-p3 ...) syntax to evaluate those authored coordinates against Display P3, sRGB, and Rec. 2020. The result describes mathematical containment; it cannot verify a visitor’s physical display, browser rendering, or production export pipeline.
Does gamut fit guarantee accessible contrast?
No. Gamut fit only describes whether a color can be represented in a color space. Use a contrast checker to test readability.
Why can an OKLCH color be outside sRGB?
OKLCH can describe colors that the smaller sRGB gamut cannot represent. This checker accepts concrete CSS colors including OKLCH, Lab/LCH, Display P3, XYZ, RGB, HSL, HWB, named colors, and alpha HEX. It evaluates authored coordinates against the reported gamuts, labels any clipped sRGB preview separately, and still requires review on the target display or print workflow.