Abyss - Palette
A dark color combination designed for visual harmony, accessibility, and professional design applications.
#0B0C10
RGB(11, 12, 16)#1F2833
RGB(31, 40, 51)#2C3E50
RGB(44, 62, 80)#3A506B
RGB(58, 80, 107)#4A6A8E
RGB(74, 106, 142)Color Properties
| Color | HEX | RGB | HSL | Luminance | Temperature |
|---|---|---|---|---|---|
| ⬤ | #0B0C10 | RGB(11, 12, 16) | HSL(228, 19%, 5%) | 12 / 255 | Neutral |
| ⬤ | #1F2833 | RGB(31, 40, 51) | HSL(213, 24%, 16%) | 39 / 255 | Neutral |
| ⬤ | #2C3E50 | RGB(44, 62, 80) | HSL(210, 29%, 24%) | 59 / 255 | Cool |
| ⬤ | #3A506B | RGB(58, 80, 107) | HSL(213, 30%, 32%) | 77 / 255 | Cool |
| ⬤ | #4A6A8E | RGB(74, 106, 142) | HSL(212, 31%, 42%) | 101 / 255 | Cool |
Accessibility & Readability
WCAG (Web Content Accessibility Guidelines) compliance ensures your design is usable by everyone, including people with visual impairments. The following contrast ratios measure readability between foreground and background colors.
| Combination | Contrast Ratio | WCAG AA | WCAG AAA | Status |
|---|---|---|---|---|
|
Aa
Primary text on primary background
|
1.31:1 | Fail | Fail | Fails AA |
|
Aa
Primary text on secondary background
|
1.78:1 | Fail | Fail | Fails AA |
|
Aa
Accent text on primary background
|
3.48:1 | Pass (Large Text) | Fail | AA Large Text Only |
|
Aa
Black text on secondary background
|
1.91:1 | Fail | Fail | Fails AA |
|
Aa
White text on primary background
|
19.55:1 | Pass | Pass | AA Compliant |
AAA Standard: Enhanced requirement of 7:1 for normal text, 4.5:1 for large text.
Large Text: 18pt (24px) or 14pt (18.5px) bold.
Color Details
Each color includes HEX, RGB, and CMYK values for both digital and print applications.
RGB(11, 12, 16)
96% / 95% / 94% / 94%
RGB(31, 40, 51)
88% / 84% / 80% / 80%
RGB(44, 62, 80)
83% / 76% / 69% / 69%
RGB(58, 80, 107)
77% / 69% / 58% / 58%
RGB(74, 106, 142)
71% / 58% / 44% / 44%
Interactive Preview
Test how this palette performs in real-world UI scenarios.
Customize Preview
Live Preview Area
Secondary Heading
This sample text demonstrates how your selected color combinations work together in a real design context. You can test this link to see how interactive elements appear.
Pro Tip: Aim for a contrast ratio of at least 4.5:1 for body text to ensure readability.
9
Design Applications
Web & UI Design
Perfect for modern websites, dashboards, and application interfaces where visual hierarchy and user experience matter.
Brand Identity
Establish consistent brand recognition across logos, marketing collateral, and digital presence with these harmonious colors.
Print & Packaging
CMYK values provided ensure accurate color reproduction for business cards, brochures, and product packaging.