#121214
#5D6064
#B3CCFF
#E6EEFF
#EDEEF0Frost
#C9CCD1Fog
#1D4ED8Sapphire
#0B1220Licorice
Concrete & Cobalt is a neutral-based color palette tagged modern, dark, minimal. Built almost entirely from neutrals, with Sapphire (#1D4ED8) as the single point of color. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Frost | #EDEEF0 | rgb(237, 238, 240) | hsl(220, 9%, 94%) | oklch(94.9% 0.003 265) | |
| Fog | #C9CCD1 | rgb(201, 204, 209) | hsl(217, 8%, 80%) | oklch(84.4% 0.008 261) | |
| Sapphire | #1D4ED8 | rgb(29, 78, 216) | hsl(224, 76%, 48%) | oklch(48.8% 0.217 264) | |
| Licorice | #0B1220 | rgb(11, 18, 32) | hsl(220, 49%, 8%) | oklch(18.3% 0.031 263) |
Why it works and how to use it
Two of the four colors are near-neutral, which leaves room for Sapphire to lead. Lightness runs from 8% to 94%. Well suited to websites, presentations and branding.
- Background: Frost (#EDEEF0) is the lightest color, so it belongs on large surfaces.
- Text: Licorice (#0B1220) on #EDEEF0 gives 16.13:1, passing WCAG AAA.
- Primary: Sapphire (#1D4ED8) is the most saturated mid-tone; use it for buttons and links (5.77:1 against the background, fine for UI elements).
- Accent: Fog (#C9CCD1) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Frost on Licorice at 16.13:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Concrete & Cobalt
A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.
Primary action SecondaryCard title
Card title
Card title
Roles are assigned by lightness.
Color blindness simulation
#EDEEF0
#C9CCD1
#1D4ED8
#0B1220
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#EDEEF0 on #0B1220 | Aa | 16.13:1 | AAA |
#C9CCD1 on #0B1220 | Aa | 11.63:1 | AAA |
#EDEEF0 on #1D4ED8 | Aa | 5.77:1 | AA |
#C9CCD1 on #1D4ED8 | Aa | 4.16:1 | AA large only |
#1D4ED8 on #0B1220 | Aa | 2.79:1 | Fail |
#EDEEF0 on #C9CCD1 | Aa | 1.39:1 | Fail |
Similar palettes 24 more in this mood
#EDEEF0
#C9CCD1
#006699
#05141E
#111111
#424242
#FF3B3B
#FAFAFA
#1A1A1D
#4C4C54
#E8788A
#F4F4F6
#F3F5F4
#AD6FDD
#4E5A58
#0F1212
#E8EEEE
#DD5600
#596564
#050D0D
#D1D2D4
#B0B3B8
#0C37C1
#01030D
#FAFAFA
#919191
#81000C
#111111
#EDEEF0
#C9CCD1
#7A5A00
#0B1220
#0F0F0F
#444444
#049C65
#F4EEE8
#111111
#424242
#E444BE
#FAFAFA
#222831
#575D65
#00ADB5
#EEEEEE
#0F0F0F
#444444
#C8623F
#F4EEE8
#111111
#424242
#8C9B00
#FAFAFA
#1A1A1D
#4C4C54
#00B7B2
#F4F4F6
#EDEEF0
#C9CCD1
#9714A2
#0B1220
#FFFFFF
#E4E4E3
#F59E0B
#1C1917
#FFF7F9
#EED8E0
#E11D74
#2B1720
#E5E6E6
#F61061
#4E5756
#0E0F0F
#ECF1F7
#FF2A6C
#4E6074
#222A32
#2B2B2B
#4A4A4A
#00E9DB
#F5F5F5
#222831
#575D65
#988BDA
#EEEEEE
#2B2B2B
#4A4A4A
#A6E22E
#F5F5F5
#F5F7FA
#D9E1EA
#3B6EA5
#1C2733