#1B242E
#D3BF00
#B7CEE9
#F1F7FE
#19292FRaisin
#71838BSlate
#EEE431Banana
#E9F3F8Frost
Banana & Slate Bloom is a complementary color palette tagged retro, minimal, gray. Near-complementary hues (about 143° 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 |
|---|---|---|---|---|---|
| Raisin | #19292F | rgb(25, 41, 47) | hsl(196, 31%, 14%) | oklch(26.9% 0.024 223) | |
| Slate | #71838B | rgb(113, 131, 139) | hsl(198, 10%, 49%) | oklch(59.8% 0.024 226) | |
| Banana | #EEE431 | rgb(238, 228, 49) | hsl(57, 85%, 56%) | oklch(89.9% 0.181 106) | |
| Frost | #E9F3F8 | rgb(233, 243, 248) | hsl(200, 52%, 94%) | oklch(95.8% 0.013 229) |
Why it works and how to use it
It works because the lightness range is wide (14% to 94%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Frost (#E9F3F8) is the lightest color, so it belongs on large surfaces.
- Text: Raisin (#19292F) on #E9F3F8 gives 13.32:1, passing WCAG AAA.
- Primary: Banana (#EEE431) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Slate (#71838B) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Raisin on Frost at 13.32:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Banana & Slate Bloom
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
#19292F
#71838B
#EEE431
#E9F3F8
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#19292F on #E9F3F8 | Aa | 13.32:1 | AAA |
#19292F on #EEE431 | Aa | 11.27:1 | AAA |
#19292F on #71838B | Aa | 3.8:1 | AA large only |
#71838B on #E9F3F8 | Aa | 3.5:1 | AA large only |
#71838B on #EEE431 | Aa | 2.96:1 | Fail |
#EEE431 on #E9F3F8 | Aa | 1.18:1 | Fail |
Similar palettes 24 more in this mood
#283A31
#E623B0
#A5C6B5
#F0FBF5
#F9F0F7
#ADD500
#D1B7CC
#291D27
#B22B34
#F2C14E
#2E9CA6
#F4EBD9
#FBF6FA
#C9B3C6
#00A44D
#1E171D
#66478D
#926DBA
#FFD050
#FCFAF5
#393A3C
#00BD3A
#ACB3C1
#E8E8EA
#EEF2F1
#BFDAD3
#8059BD
#141B1A
#45365A
#77648D
#D6BC7E
#F7F6F3
#A73F00
#D5CE56
#3D97B7
#F4EBD9
#2D4059
#EA5455
#F07B3F
#FFD460
#000000
#3A3A3A
#D4AF37
#F2F2F2
#12665C
#2A9D8F
#E9C46A
#F7F2E4
#2A9D8F
#8AB17D
#E9C46A
#F4A261
#4B2C6F
#7E5AA5
#E8B824
#F8F6F1
#2B2B2B
#C9A227
#EAE7DC
#FFFFFF
#2B0F54
#AB1F65
#FF4F69
#FFF7F8
#D62828
#F77F00
#FCBF49
#EAE2B7
#161B22
#484E55
#F0B429
#E6EDF3
#FAFAF8
#D9D9D4
#E3B505
#1E1E1C
#F0EFE4
#D1BA00
#B8B498
#2E2B1B
#D96C2C
#E9B44C
#8C5E2A
#F5E8C7
#7C8B3C
#C4B454
#D77A3B
#F2E9D4
#F46A9B
#FFD166
#06D6A0
#2B2D42