#EDEEF0
#C9CCD1
#1D4ED8
#0B1220
#141210Licorice
#4D4742Graphite
#329BD4Blue Gray
#F2EAE2Eggshell
Studio Blue Gray & Eggshell is a complementary color palette tagged dark, minimal, black. Near-complementary hues (about 171° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Licorice | #141210 | rgb(20, 18, 16) | hsl(30, 11%, 7%) | oklch(18.4% 0.005 67) | |
| Graphite | #4D4742 | rgb(77, 71, 66) | hsl(27, 8%, 28%) | oklch(40.2% 0.012 62) | |
| Blue Gray | #329BD4 | rgb(50, 155, 212) | hsl(201, 65%, 51%) | oklch(65.6% 0.126 237) | |
| Eggshell | #F2EAE2 | rgb(242, 234, 226) | hsl(30, 38%, 92%) | oklch(94.1% 0.014 68) |
Why it works and how to use it
Two of the four colors are near-neutral, which leaves room for Blue Gray to lead. Lightness runs from 7% to 92%. Well suited to websites, presentations and branding.
- Background: Eggshell (#F2EAE2) is the lightest color, so it belongs on large surfaces.
- Text: Licorice (#141210) on #F2EAE2 gives 15.7:1, passing WCAG AAA.
- Primary: Blue Gray (#329BD4) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Graphite (#4D4742) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Licorice on Eggshell at 15.7:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Studio Blue Gray & Eggshell
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
#141210
#4D4742
#329BD4
#F2EAE2
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#141210 on #F2EAE2 | Aa | 15.7:1 | AAA |
#4D4742 on #F2EAE2 | Aa | 7.69:1 | AAA |
#141210 on #329BD4 | Aa | 6.03:1 | AA |
#4D4742 on #329BD4 | Aa | 2.95:1 | Fail |
#329BD4 on #F2EAE2 | Aa | 2.6:1 | Fail |
#141210 on #4D4742 | Aa | 2.04:1 | Fail |
Similar palettes 24 more in this mood
#050505
#373737
#007F9E
#FDFDFD
#151515
#4E4E4E
#577AFF
#FAFAFA
#121214
#5D6064
#B3CCFF
#E6EEFF
#050505
#373737
#3D5AFE
#FFFFFF
#FDFDFD
#737373
#1800A7
#050505
#EDEEF0
#C9CCD1
#006699
#05141E
#131822
#494F5B
#6C74BE
#F9FAFB
#0A0A0A
#353A40
#7FC8F8
#F5FAFF
#F7FAFF
#707C93
#3D31BA
#171819
#000000
#3A3A3A
#D4AF37
#F2F2F2
#0A0A0A
#3D3D3D
#CCFF00
#FFFFFF
#111111
#424242
#FF3B3B
#FAFAFA
#0B0F14
#3C4552
#2EE6A6
#E6EDF3
#1A1A1D
#4C4C54
#E8788A
#F4F4F6
#111318
#454A54
#F4A7B9
#FBFBFC
#0F1419
#3E4C59
#D9B99B
#F3EFE9
#18191A
#4F5052
#B8F53F
#F7F7F5
#141210
#4D4742
#C97B3A
#F2EAE2
#050505
#373737
#AA5C00
#FDFDFD
#F0F0F0
#7454DD
#574F44
#0E0E0E
#18191A
#4F5052
#FFCAF0
#F7F7F5
#0B0B0B
#3F3F3F
#C9A961
#F7F4EC
#F3F5F4
#AD6FDD
#4E5A58
#0F1212