Abyss
Budget splitting with friends · Score 94 ·Excellent · Added 2026-10-27 · Updated 2026-10-29
Sitting mid-range in lightness, the lead color adapts to both light and dark themes with little adjustment. In an app screen this reads best when the brand color is reserved for one primary action per view, so the hierarchy does not turn into a wall of color.
Abyss is a 10-role App palette: primary #1710dd on a #f9f9fb canvas. Body text reaches 15.42:1 (WCAG AAA), leaving enough headroom for long reading sessions; the primary sits at 9.27:1 against the canvas, so white text sits on it safely.
10 color roles
primary#1710ddrgb(23, 16, 221)hsl(242, 86.5%, 46.5%)primaryDark#0e099drgb(14, 9, 157)hsl(242, 89.2%, 32.5%)primaryLight#a3a1f0rgb(163, 161, 240)hsl(241.5, 72.5%, 78.6%)secondary#cacf32rgb(202, 207, 50)hsl(61.9, 62.1%, 50.4%)accent#eff628rgb(239, 246, 40)hsl(62, 92%, 56.1%)success#1fb75ergb(31, 183, 94)hsl(144.9, 71%, 42%)warning#f5a70argb(245, 167, 10)hsl(40.1, 92.2%, 50%)danger#f22618rgb(242, 38, 24)hsl(3.9, 89.3%, 52.2%)text#201f2drgb(32, 31, 45)hsl(244.3, 18.4%, 14.9%)bg#f9f9fbrgb(249, 249, 251)hsl(240, 20%, 98%)Editorial review · App
Measured 9.8:1, AAA. Safe for body copy and small text.
Measured 1.9:1, below 3:1. This one hurts legibility directly.
Saturation 87%, near a pure color. Keep it to small accents.
Delta E 640, close to complementary. Crisp apart, but they fight when placed side by side at scale.
How this palette is put together
Six readings computed from these exact color values. None of them would hold for another palette.
- Primary hue rangeAt hue 242° and 87% saturation, this is a blue primary, the safest choice and the most crowded one. Tools, finance and enterprise services default to it. The safety comes from how rarely it is misread, and that is also the problem: it is hard to remember. 7 palettes sit in the same range.
- Lightness distributionLightness across the ten roles has a standard deviation of only 21.8 around a mean of 52%, which is fairly flat. Background, cards and text sit close together, so structure has to come from borders, shadows and spacing rather than from value.
- Background temperatureAt 20% saturation and hue 240°, #F9F9FB is a tinted ground rather than a gray one. It brings its own mood and fixes the key of the whole palette, so the primary can only be chosen inside that key. Dark text on it needs its contrast measured again instead of borrowing the usual neutral-background assumptions.
- Standing among peersAmong the 5 palettes tagged Blue, this one measures 9.27:1 for primary on background, ranking 1. That puts it among the most legibility-forward in the group.
- Primary vs accentThe primary measures 9.27:1 and the accent only 1.12:1, 8.3× apart, so rank is unambiguous. The accent works as a signal rather than a second primary: good for marking one thing such as price, status or a deadline, and it starts crowding the primary once used for several.
- Text hierarchyText reaches 15.42:1, and there is no separate secondary text layer here, so every word uses this one color. That single number decides whether the palette can carry information-dense screens at all.
How to use it
The lead color sits at 47% lightness and 87% saturation. It sits in the lower-middle range: enough presence over a light background, and it does not vanish when the theme goes dark. Saturation runs high, so the color is energetic and hard to miss; keep it to buttons and key marks, because large fields of it get loud.
What it looks like in a real interface
Sample body copy, used to check how secondary text reads on a card background.
Read more →Accessibility contrast check
| Foreground / background | Ratio | Body text | Large text |
|---|---|---|---|
| Body text / page background | 15.42:1 | AAA | AAA |
| Brand color / page background | 9.27:1 | AAA | AAA |
Verify this pair in the checker →Compare with other palettes →Site-wide accessibility report →
More palettes on this platform
Where this one sits in the library
The numbers below come from measured color distances against the other 31 palettes on this platform (mean over ten roles). They would not hold in a different library.
- Closest to Northern Lake at mean Delta E 65, same temperament, different depth.
- Furthest from Ink Blue Night at Delta E 296; put the two side by side and they pull in opposite directions.
- Primary saturation 87 percent, rank 3 of 31 on this platform, the loud end of the range.
Export to your project
Eight formats, ready to paste: four for the web, plus one each for Android, iOS, Flutter and mini programs. Or fetch them by URL from your tooling or AI agent.
:root {
--color-primary: #1710dd; /* Primary */
--color-primaryDark: #0e099d; /* Primary dark */
--color-primaryLight: #a3a1f0; /* Primary light */
--color-secondary: #cacf32; /* Secondary */
--color-accent: #eff628; /* Accent */
--color-success: #1fb75e; /* Success */
--color-warning: #f5a70a; /* Warning */
--color-danger: #f22618; /* Danger */
--color-text: #201f2d; /* Text */
--color-bg: #f9f9fb; /* Page background */
}