#2B0F54
#AB1F65
#FF4F69
#FFF7F8
#2B2B2BGunmetal
#E63946Vermilion
#F1FAEESmoke
#457B9DSteel Blue
Cassette Tape is a complementary color palette tagged retro, red, white. Near-complementary hues (about 152° 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 |
|---|---|---|---|---|---|
| Gunmetal | #2B2B2B | rgb(43, 43, 43) | hsl(0, 0%, 17%) | oklch(28.9% 0.000 0) | |
| Vermilion | #E63946 | rgb(230, 57, 70) | hsl(355, 78%, 56%) | oklch(61.2% 0.208 22) | |
| Smoke | #F1FAEE | rgb(241, 250, 238) | hsl(105, 55%, 96%) | oklch(97.5% 0.018 138) | |
| Steel Blue | #457B9D | rgb(69, 123, 157) | hsl(203, 39%, 44%) | oklch(56.0% 0.078 238) |
Why it works and how to use it
It works because the lightness range is wide (17% to 96%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Smoke (#F1FAEE) is the lightest color, so it belongs on large surfaces.
- Text: Gunmetal (#2B2B2B) on #F1FAEE gives 13.25:1, passing WCAG AAA.
- Primary: Vermilion (#E63946) is the most saturated mid-tone; use it for buttons and links (3.9:1 against the background, fine for UI elements).
- Accent: Steel Blue (#457B9D) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Gunmetal on Smoke at 13.25:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Cassette Tape
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
#2B2B2B
#E63946
#F1FAEE
#457B9D
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#2B2B2B on #F1FAEE | Aa | 13.25:1 | AAA |
#F1FAEE on #457B9D | Aa | 4.3:1 | AA large only |
#E63946 on #F1FAEE | Aa | 3.9:1 | AA large only |
#2B2B2B on #E63946 | Aa | 3.4:1 | AA large only |
#2B2B2B on #457B9D | Aa | 3.08:1 | AA large only |
#E63946 on #457B9D | Aa | 1.1:1 | Fail |
Similar palettes 24 more in this mood
#B22B34
#F2C14E
#2E9CA6
#F4EBD9
#13405A
#F14740
#FFA15F
#FFFBE4
#3A0546
#B31D33
#FD5B03
#FFF7F8
#F44942
#FF9B52
#FFE1B0
#FFFBE4
#3E3E3E
#FF676A
#F4FDF1
#598FB2
#2D4059
#EA5455
#F07B3F
#FFD460
#D62828
#F77F00
#FCBF49
#EAE2B7
#003049
#D62828
#F77F00
#EAE2B7
#F9F0F7
#ADD500
#D1B7CC
#291D27
#FFAA73
#B88900
#AF5F86
#CD484C
#19292F
#71838B
#EEE431
#E9F3F8
#FBF6FA
#C9B3C6
#00A44D
#1E171D
#66478D
#926DBA
#FFD050
#FCFAF5
#283A31
#E623B0
#A5C6B5
#F0FBF5
#1B242E
#D3BF00
#B7CEE9
#F1F7FE
#EEF2F1
#BFDAD3
#8059BD
#141B1A
#271D3F
#8E4864
#D6797F
#FCF8F9
#2B2B2B
#D35900
#F1FAEE
#5B75A3
#F8884B
#FFD487
#A47441
#FFFAED
#FB6C6A
#DEDF6F
#00D1C9
#332A3F
#AC2B63
#FFB778
#399E8E
#F4EBD9
#41296E
#C83E7D
#FF8D94
#FFF8F9
#12195A
#992C90
#F252A7
#FFF7F8