Concrete and Coral
Urban grays with a striking coral red.
Color codes
| HEX | RGB | HSL | CMYK | |
|---|---|---|---|---|
| hsl(235, 21%, 21%) | cmyk(35%, 32%, 0%, 74%) | |||
| hsl(218, 17%, 62%) | cmyk(19%, 12%, 0%, 32%) | |||
| hsl(197, 24%, 94%) | cmyk(3%, 1%, 0%, 4%) | |||
| hsl(353, 86%, 54%) | cmyk(0%, 85%, 75%, 6%) | |||
| hsl(350, 96%, 43%) | cmyk(0%, 98%, 81%, 15%) |
CSS
:root {
--concrete-and-coral-1: #2B2D42;
--concrete-and-coral-2: #8D99AE;
--concrete-and-coral-3: #EDF2F4;
--concrete-and-coral-4: #EF233C;
--concrete-and-coral-5: #D90429;
}How these colors work together
It pairs opposite hues on the color wheel for strong, lively contrast. Overall it reads cool. Lightness spans 73 points, which sets how much contrast you can create.
3 of 10 color pairs reach the 4.5:1 contrast needed for normal text. The most readable pair is #2B2D42 on #EDF2F4 (11.95:1).
Concrete and Coral — readable text using the best pair.
Suggested applications
- Tech launches, music events and bold campaigns.
- Interface themes: use the lightest color for backgrounds and the darkest for text.
- Brand kits, social graphics and presentations.
Frequently asked questions
How do I use the Concrete and Coral palette?
The Concrete and Coral palette has 5 colors. Use one dominant color for large areas, a supporting color for secondary elements and the most saturated color sparingly as an accent.
Which colors in this palette are best for text?
Use #2B2D42 on #EDF2F4: it has a contrast ratio of 11.95:1.
Can I download this palette?
Yes. Export it as PNG, SVG, CSS variables, JSON or plain text with the buttons above the color table.
More palettes
Product Launch#111827 #4F46E5 #22D3EE #F9FAFB #F43F5EBold Primary#FF595E #FFCA3A #8AC926 #1982C4 #6A4C93Electric Night#0D0221 #261447 #FF3864 #2DE2E6 #F6019DCalm Wellness#F6F1EB #E3D5CA #A3B18A #588157 #344E41Nordic Light#FFFFFF #EEF1F4 #C9D1D9 #6B7B8C #1F2933Velvet Night#1A0F1F #3D1E4A #6B2D5C #A8456F #E7C6A5