Color tool
Light Coral
#E1706D · oklch(67.6% 0.142 23.1)
A moderately saturated coral red, light at 68% perceptual lightness with chroma 0.142. It clears 4.5:1 on black but not on white — treat it as a fill, or use it as text on dark surfaces.
Use the dropper to sample any pixel on your screen, or click any color on this page to copy it.
Conversion
The same color in every model a designer or developer is likely to need. Click a row to copy the value.
Variations
Shades, tints, tones, hues and temperature — every ramp mixed in OKLab and gamut-mapped back to sRGB, so the steps look evenly spaced rather than merely being evenly numbered. The ring marks your color.
Color harmonies
Harmonies are hue rotations around the color wheel. Lightness and chroma are held steady, then chroma is reduced only where a rotation lands outside sRGB — which is why some sets look calmer than others.
Three neighbours 30° apart — calm, low tension, easy to build a page from.
Two colors opposite each other — maximum separation, strong for calls to action.
The complement replaced by its two neighbours — the contrast without the clash.
Three colors evenly spaced — balanced and lively, but needs one clear lead.
Two complementary pairs — versatile, and best with a single dominant color.
Four colors 90° apart — an even rectangle on the wheel, more contrast than tetradic.
Contrast checker
WCAG 2.1 ratios come from relative luminance. APCA is the perceptual method drafted for WCAG 3 — it reports a lightness contrast value (Lc) rather than a ratio, and judges light-on-dark differently from dark-on-light. Both are shown because they disagree, and that disagreement is useful.
Body copy at 14.5px. If this looks strained, the numbers below will already have told you — trust them over your monitor.
Body copy at 14.5px. If this looks strained, the numbers below will already have told you — trust them over your monitor.
Same hue and chroma, lightness walked until the pair clears 4.5:1 — the smallest change that makes your color usable as text.
Color vision simulation
Simulated with the Machado, Oliveira and Fernandes model, which uses severity-dependent matrices in linear RGB rather than crudely stripping a channel. Prevalence figures are population statistics, not something derived from your color.
Similar named colors
Nearest matches by ΔE OK — straight-line distance in OKLab, the closest thing to “how different do these look”. Distance is shown as a raw number with a plain-language band, because a “95% similar” score isn’t a real unit.
Semantic UI palette
A harmony gives you related hues; an interface needs named roles that pass contrast. Each color below is generated in OKLCH from your hue, then its lightness is walked until it clears its target ratio against the surface it sits on — so the palette is usable, not just pretty.
About this generator
Color Palette Generator Online
Paste a hex code, drag the picker, or hit random, and this tool breaks one color down into everything you need to use it: exact conversions across ten color models, five variation ramps, six harmonies, WCAG and APCA contrast, color-blindness simulation, the closest named colors, and a full light and dark interface palette.
Every calculation happens in OKLCH and OKLab — the perceptual space standardised in CSS Color 4 — then gets gamut-mapped back to sRGB by reducing chroma while lightness and hue hold. That is why the ramps here step evenly to the eye instead of collapsing into mud at the dark end. Free, no account, and nothing leaves your browser.
Reviewed Output tested on CSS Color 4 reference values · sRGB
Why this color tool is more useful than a generic palette generator
Most color sites rotate a hue in HSL, print six swatches and call it a palette. HSL is a geometric trick on RGB, not a model of vision: its lightness value says a saturated yellow and a saturated blue are equally bright, which no human eye agrees with. Working in OKLCH fixes that, and it changes every ramp, harmony and generated theme on this page.
Perceptual maths, not HSL shortcuts
Mixing happens in OKLab and rotation in OKLCH, so a ten-step ramp actually reads as ten even steps and a triadic set keeps all three colors at the same visual weight.
Honest gamut mapping
Out-of-gamut results lose chroma gradually while hue and lightness are preserved, instead of being clipped per channel — the clipping that turns bright rotations into muddy near-duplicates elsewhere.
Two contrast standards side by side
WCAG 2.1 ratios for the audit you have to pass, and APCA Lc for what actually looks legible. Where they disagree you can see it, rather than trusting one number blindly.
A palette with roles, not just hues
Background, surface, border, text, muted text, primary, hover, secondary, accent, success, warning and danger — generated for light and dark, each one contrast-corrected against the surface it sits on.
A real vision model
Protanopia, deuteranopia, tritanopia and achromatopsia simulated with severity-dependent matrices in linear RGB, with a severity slider — not a red channel deleted in sRGB.
Numbers that don’t pretend
Similarity is reported as ΔE OK distance with a plain-language band. Temperature is labelled a perceptual heuristic, not Kelvin. CMYK is marked as an approximation without an ICC profile, because it is one.
How does the color tool work?
One pipeline drives every section on the page: your sRGB input is linearised, converted into a perceptual space, transformed there, then mapped back into sRGB for display.
- 01
Give it a color
Type or paste a hex code, drag inside the saturation square, or move the hue slider. Three and six digit hex both parse.
- 02
It converts to OKLCH
sRGB is linearised, taken to XYZ and OKLab, then expressed as lightness, chroma and hue — the form every transformation here needs.
- 03
Transform, then map back
Ramps mix toward black, white or grey; harmonies rotate hue; theme roles walk lightness. Anything outside sRGB loses chroma until it fits.
- 04
Check and copy
Contrast is measured on the results, not assumed. Hover any swatch for its hex, click to copy it to your clipboard.
Worked example — the conversion pipeline
Every value on this page comes out of these four steps. Gamma is removed first, because averaging gamma-encoded numbers is what makes naive blends look dirty.
HEX #E1706D
↓ parse to sRGB 0–1
sRGB 0.882, 0.439, 0.427
↓ remove gamma (piecewise, per sRGB spec)
LIN 0.753, 0.162, 0.153
↓ matrix to XYZ, then to OKLab
OKL L 0.676 a 0.130 b 0.056
↓ polar form
LCH oklch(67.6% 0.142 23.1)
↓ transform, then reduce chroma if outside sRGB
OUT a hex you can paste anywhereThe W3C publishes reference code for all of these conversions, gamut mapping and color difference formulas, which is what the maths here follows.
Color science — frequently asked questions
The questions that come up most often about how these numbers are calculated.
What is OKLCH, and why use it instead of HSL?
OKLCH describes a color as perceptual lightness, chroma and hue. HSL describes the same color as a geometric position inside the RGB cube, which is why HSL calls a saturated yellow and a saturated blue equally light when your eye sees a huge difference. Because OKLCH lightness matches perception, a ramp built by stepping lightness looks evenly spaced — and that is the difference you can see in the Variations section above.
Why do the harmony colors here differ from other color sites?
Two reasons. The rotation happens on the OKLCH hue circle rather than the HSL one, so equal angles are equal perceptual steps. And when a rotation lands outside what sRGB can display, chroma is reduced gradually instead of each channel being clipped. Clipping is what produces those slightly muddy, oddly matched sets you see elsewhere.
WCAG says my color fails but APCA says it is fine. Which do I follow?
If you have a legal or contractual obligation, follow WCAG 2.1 — it is the standard being audited today. APCA is the draft method for WCAG 3 and models legibility more accurately, especially for light text on dark backgrounds, where WCAG 2.1 is known to be over-generous. Use APCA to make the better design decision and WCAG to pass the audit.
Why is the CMYK value marked as an approximation?
A screen color has no single correct CMYK equivalent. The real conversion depends on the press, the ink, the paper and an ICC profile for that combination. The figures here use the standard naive formula, which is fine for a rough idea and wrong for a print run — get the separation from your printer.
What does ΔE OK actually measure?
It is the straight-line distance between two colors in OKLab — the closest simple number to “how different do these look”. Roughly: under 0.02 is effectively the same color, under 0.05 is a difference you would only notice side by side, and past 0.2 they read as separate colors. It is deliberately shown as a raw distance rather than a percentage, because a “95% similar” score is a marketing number, not a unit.
Can I pick a color from outside the browser window?
Yes — the dropper button next to the hex field samples any pixel on your screen, including other applications, an image viewer or the desktop, and the cursor becomes a magnified loupe while you aim. That is the browser’s own EyeDropper API doing the work, because a web page cannot read pixels it does not own. It ships in Chrome, Edge and Opera; Firefox and Safari have not implemented it, so the button is disabled there and you can paste a hex code instead.
Is color temperature here the same as Kelvin?
No, and it is labelled as a heuristic for that reason. Kelvin color temperature describes light sources and white points, not arbitrary surface colors. The temperature ramp above pulls the hue toward a warm target near 55° or a cool target near 250°, which is what designers usually mean by warming or cooling a color.
How do I use these colors in a real project?
Click any swatch to copy its hex, then paste it wherever you keep colour tokens — CSS custom properties, a theme.json palette, a Tailwind config, or a design-tool style. The Semantic UI palette section is the one to start from for an interface, because those values are already contrast-checked against the surface they sit on; the harmonies are a starting point for a brand palette rather than a finished UI.
Are the colors I enter stored or sent anywhere?
No. Every conversion, ramp and contrast check runs in your browser — there is no server call at any point. The only thing kept is your most recent colour, saved in this browser so the page reopens where you left it. Clearing site data removes it.
The other Design generators in the library, plus the WordPress tools most often used alongside this one.