Coral Market
First screensCommerce landings where the coral is the button and nothing else.
Click a swatch to copy its hex.
Do not use this for
Health interfaces — coral sits too near a danger red.
What was measured
- Closest neighbours
- ΔE00 30.7
- how alike two adjacent swatches look
- Darkest to lightest
- 7.09:1
- WCAG contrast across the set
- Lightness covered
- 53 pts
- of OKLCH lightness, 0–100
- Under colour blindness
- ΔE00 15
- worst under protanopia
Every pair here survives protanopia, deuteranopia and tritanopia, so these five can stand for five different things.
A suggested mapping · derived, then measured
Five colours are not an interface, so this is an offer rather than a token set. It does not clear WCAG AA on the accent — stated here rather than left for you to discover.
/* Coral Market — Commerce landings where the coral is the button and nothing else. */
:root {
--palette-1: #872c29;Tailwind
// tailwind.config — Coral Market
export default {
theme: {For your coding agent · printed from the colours
Use the Coral Market palette: #872C29, #F27168, #F9EFDA, #036568, #92F9FC. It is for this: Commerce landings where the coral is the button and nothing else.
How this palette was built · no hex was chosen by hand
The catalog states a recipe — scene from hue 26 and 198 — and the five colours are derived from it in OKLCH, where a step of lightness is a step your eye agrees with rather than one the hex numbers agree with. That is why the numbers above are properties of this palette rather than claims about it.