#0B2A6B
#7B5C00
#D4AF37
#F6F3EA
#3C628ELapis
#8CBEDCSky Blue
#EDF6F9Smoke
#C5A85BBrass
Crisp Brass & Lapis is a complementary color palette tagged modern, blue, white. Near-complementary hues (about 168° 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 |
|---|---|---|---|---|---|
| Lapis | #3C628E | rgb(60, 98, 142) | hsl(212, 41%, 40%) | oklch(48.8% 0.083 253) | |
| Sky Blue | #8CBEDC | rgb(140, 190, 220) | hsl(203, 53%, 71%) | oklch(77.7% 0.068 235) | |
| Smoke | #EDF6F9 | rgb(237, 246, 249) | hsl(195, 50%, 95%) | oklch(96.7% 0.010 220) | |
| Brass | #C5A85B | rgb(197, 168, 91) | hsl(44, 48%, 56%) | oklch(74.1% 0.102 89) |
Why it works and how to use it
It works because the lightness range is wide (40% to 95%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Smoke (#EDF6F9) is the lightest color, so it belongs on large surfaces.
- Text: Lapis (#3C628E) on #EDF6F9 gives 5.75:1, passing WCAG AA.
- Primary: Sky Blue (#8CBEDC) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Brass (#C5A85B) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Lapis on Smoke at 5.75:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Crisp Brass & Lapis
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
#3C628E
#8CBEDC
#EDF6F9
#C5A85B
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#3C628E on #EDF6F9 | Aa | 5.75:1 | AA |
#3C628E on #8CBEDC | Aa | 3.16:1 | AA large only |
#3C628E on #C5A85B | Aa | 2.74:1 | Fail |
#EDF6F9 on #C5A85B | Aa | 2.1:1 | Fail |
#8CBEDC on #EDF6F9 | Aa | 1.82:1 | Fail |
#8CBEDC on #C5A85B | Aa | 1.15:1 | Fail |
Similar palettes 24 more in this mood
#0B2A6B
#A91C65
#D4AF37
#F6F3EA
#221E3F
#5D79BB
#DCA515
#FFF3E0
#4D4421
#D5B636
#B5EBFF
#E9F6FF
#EDEEF0
#C9CCD1
#1D4ED8
#0B1220
#FAFAF8
#D9D9D4
#E3B505
#1E1E1C
#F50037
#30558B
#F1FAEE
#E1BA00
#E09700
#E3C23E
#228EAA
#F8F8F8
#E63946
#1D3557
#F1FAEE
#F4D35E
#EA4A59
#8EC5FC
#E0C3FC
#FDFDFD
#EEF4FF
#92CEF9
#0090DA
#072E46
#4A3222
#8B5E3C
#72D1FF
#FFF8EC
#D871CA
#0582CA
#F5F0E1
#F4A261
#929100
#8EC5FC
#E0C3FC
#FDFDFD
#3B1B5D
#66428B
#D2A400
#DFDDD8
#EEF4FF
#A9C6FF
#4C7DFF
#1B2A49
#121214
#5D6064
#B3CCFF
#E6EEFF
#3E4F93
#5467BE
#E7A03E
#F5EFE4
#FBF9F2
#EBE4CF
#D4A017
#2D2A24
#6B3A1F
#4E72B5
#D4A574
#FAF0E4
#F5F7FA
#D9E1EA
#3B6EA5
#1C2733
#2469A5
#C97D5A
#E8C9A8
#F8F1E7
#F4F3F1
#B9B6B1
#5F5C58
#438CD2
#A58EEE
#E4C36B
#8A6A44
#F5EEDF