#2B0F54
#AB1F65
#FF4F69
#FFF7F8
#3E3E3EIron
#FF676AWatermelon
#F4FDF1Ivory
#598FB2Steel Blue
Watermelon & Steel Blue Path is a complementary color palette tagged retro, red, white. Near-complementary hues (about 155° 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 |
|---|---|---|---|---|---|
| Iron | #3E3E3E | rgb(62, 62, 62) | hsl(0, 0%, 24%) | oklch(36.4% 0.000 0) | |
| Watermelon | #FF676A | rgb(255, 103, 106) | hsl(359, 100%, 70%) | oklch(70.6% 0.186 22) | |
| Ivory | #F4FDF1 | rgb(244, 253, 241) | hsl(105, 75%, 97%) | oklch(98.4% 0.018 138) | |
| Steel Blue | #598FB2 | rgb(89, 143, 178) | hsl(204, 37%, 52%) | oklch(62.6% 0.078 238) |
Why it works and how to use it
The palette holds together thanks to its complementary hue relationship and a strong light-to-dark ladder (97% down to 24% lightness). A natural fit for websites, presentations and branding.
- Background: Ivory (#F4FDF1) is the lightest color, so it belongs on large surfaces.
- Text: Iron (#3E3E3E) on #F4FDF1 gives 10.27:1, passing WCAG AAA.
- Primary: Watermelon (#FF676A) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Steel Blue (#598FB2) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Iron on Ivory at 10.27:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Watermelon & Steel Blue Path
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
#3E3E3E
#FF676A
#F4FDF1
#598FB2
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#3E3E3E on #F4FDF1 | Aa | 10.27:1 | AAA |
#3E3E3E on #FF676A | Aa | 3.77:1 | AA large only |
#F4FDF1 on #598FB2 | Aa | 3.36:1 | AA large only |
#3E3E3E on #598FB2 | Aa | 3.05:1 | AA large only |
#FF676A on #F4FDF1 | Aa | 2.73:1 | Fail |
#FF676A on #598FB2 | Aa | 1.23:1 | Fail |
Similar palettes 24 more in this mood
#B22B34
#F2C14E
#2E9CA6
#F4EBD9
#2B2B2B
#E63946
#F1FAEE
#457B9D
#13405A
#F14740
#FFA15F
#FFFBE4
#3A0546
#B31D33
#FD5B03
#FFF7F8
#F44942
#FF9B52
#FFE1B0
#FFFBE4
#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