See everything about one color on one screen: all format values, relative luminance, WCAG contrast against black and white, the best text color to put on it, its hue family, OKLCH coordinates, approximate color temperature, closest CSS name and how it survives a color-blindness simulation.
Generated locally in your browser — your colors, settings and code never leave this page.
Every question about one color, answered at once
Color work is interrogation: is it readable on white? What is it called? How light is it really? Will color-blind users see it? Individually, each question has a tool; asked together about the same color, they deserve one page. The analyzer runs the full battery — formats, luminance, contrast both ways, best text color, hue family, OKLCH position, temperature, nearest name, deuteranopia preview — and presents it as a single dossier.
A sample reading
Analyze tomato (#ff6347) and the dossier reads: luminance 0.283 — a mid-light color; contrast 3.1:1 against white (large text only), 6.7:1 against black (passes AA comfortably) — so dark backgrounds are its friend; OKLCH L 0.7, C 0.2, hue 32.3° — a warm, vivid red-orange; deuteranopia simulation shifts it toward olive (ΔE visible) — do not pair it with greens to carry meaning. Four decisions’ worth of information, thirty seconds.
The rows people underuse
Relative luminance is the number behind every contrast claim — learning to read it (0.05 is dark, 0.2 mid, 0.5+ light) builds intuition no picker teaches. Best text color settles the white-or-black-text question with measurement instead of squinting. And the CVD row catches meaning-carrying colors early, when changing them is still cheap.
Analyzer versus its specialist siblings
The analyzer surveys; specialists drill. Real contrast auditing against your actual background pair belongs to the WCAG Contrast Checker; full three-deficiency simulation with severity control to the Color Blindness Simulator; difference measurement between two candidates to the Difference Calculator. The dossier tells you which specialist to visit — often the most valuable thing a general practitioner does.
Five colors, fully analyzed
The dossier format compresses well into a comparison table. Five familiar colors through three of the analyzer’s key measurements:
| Color | Luminance | vs white | vs black | Best text |
|---|---|---|---|---|
| mediumpurple | 0.229 | 3.76:1 | 5.58:1 | black |
| goldenrod | 0.419 | 2.24:1 | 9.38:1 | black |
| crimson | 0.16 | 4.99:1 | 4.21:1 | white |
| olivedrab | 0.226 | 3.81:1 | 5.52:1 | black |
| steelblue | 0.206 | 4.11:1 | 5.11:1 | black |
The two contrast columns always multiply to roughly 21 — a color that works hard against white necessarily coasts against black — which is why the best-text column is simply whichever ratio is larger. Mid-luminance rows, where both ratios hover near 4, are the colors the analyzer flags as poor text partners in either direction.
How to use the Color Information and Analyzer
- Enter any CSS color.
- Read the full dossier: formats, luminance, contrast, name, temperature, gamut and a CVD preview.
- Copy the report as text or JSON.
Frequently asked questions
What exactly does the Color Analyzer report?
One screen with: all format values, WCAG relative luminance, measured contrast against white and black with pass levels, the best text color for it, hue/saturation/lightness family, OKLCH coordinates, approximate color temperature, the closest CSS name and a deuteranopia simulation with its visibility score.
What is relative luminance and why should I care?
The light-weighted brightness (0 = black, 1 = white) that WCAG contrast ratios are built from – green counts ~70%, red ~21%, blue ~7%. Two colors can look equally "strong" yet have very different luminance, which is why contrast must be measured, not eyeballed.
How do I read the "contrast vs white/black" rows?
They answer "can this color be text on a white (or black) page": 4.5:1 passes WCAG AA for normal text, 3:1 for large text, 7:1 for AAA. If both rows fail, the color is mid-toned – usable for accents, risky for text on anything.
What does the deuteranopia row tell me?
How the color appears under the most common color-vision deficiency, with a ΔE score against the original. A small ΔE means the color barely changes for those users; a large one warns that any meaning carried by this hue needs a second cue.
When is the color temperature figure meaningful?
For whites and near-whites – screen calibration, photo white balance, "is this cream too yellow" questions. For saturated colors CCT is technically computable but conceptually loose, and the analyzer labels it accordingly.
Can the analyzer tell me if my color is in the sRGB gamut?
Colors entered as lab()/lch()/oklch() are checked automatically and flagged if outside; everything entered as hex/rgb/hsl is inside by construction. The sRGB Gamut Checker handles whole lists.
What is a good workflow around this tool?
Analyze the candidate color first, then branch: contrast problems go to the WCAG Contrast Checker with a real background, naming questions to the Name Finder, variants to Shades and Tints. The analyzer is the triage desk.
