#FF6B6B
#FFD93D
#6BCB77
#4D96FF
#D98985Salmon
#EFDB95Vanilla
#90C193Pistachio
#7299D1Blue Gray
Crimson Salmon & Blue Gray is a complementary color palette tagged tropical, muted, green. 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 |
|---|---|---|---|---|---|
| Salmon | #D98985 | rgb(217, 137, 133) | hsl(3, 53%, 69%) | oklch(71.2% 0.099 23) | |
| Vanilla | #EFDB95 | rgb(239, 219, 149) | hsl(47, 74%, 76%) | oklch(89.2% 0.091 94) | |
| Pistachio | #90C193 | rgb(144, 193, 147) | hsl(124, 28%, 66%) | oklch(76.4% 0.083 146) | |
| Blue Gray | #7299D1 | rgb(114, 153, 209) | hsl(215, 51%, 63%) | oklch(67.7% 0.094 257) |
Why it works and how to use it
It works because the lightness steps are gentle (63% to 76%), which keeps the mood consistent from edge to edge. Try it for websites, presentations and branding.
- Background: Vanilla (#EFDB95) is the lightest color, so it belongs on large surfaces.
- Text: Blue Gray (#7299D1) on #EFDB95 gives 2.12:1, so pair it with a darker neutral for body copy.
- Primary: Salmon (#D98985) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Pistachio (#90C193) for highlights, badges and hover states.
No pair inside the palette reaches 4.5:1, so add black or white for body text.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Crimson Salmon & Blue Gray
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
#D98985
#EFDB95
#90C193
#7299D1
Color-blind check: under deuteranopia, Salmon and Pistachio become hard to tell apart, so do not rely on that pair alone to carry meaning.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#EFDB95 on #7299D1 | Aa | 2.12:1 | Fail |
#D98985 on #EFDB95 | Aa | 1.94:1 | Fail |
#EFDB95 on #90C193 | Aa | 1.49:1 | Fail |
#90C193 on #7299D1 | Aa | 1.42:1 | Fail |
#D98985 on #90C193 | Aa | 1.3:1 | Fail |
#D98985 on #7299D1 | Aa | 1.09:1 | Fail |
Similar palettes 24 more in this mood
#A24002
#CD6635
#00B474
#DCF1E4
#7B7100
#A29500
#00AF7D
#E5F3EC
#736F00
#008F72
#938F00
#E3F6EF
#00B58C
#AAC800
#F7D000
#87F88C
#914F00
#007D51
#CD7300
#DDF1E5
#968300
#40B35C
#8EB22C
#00FDCF
#FFAF6F
#3EA77B
#59C077
#FFEDBB
#E7E7E7
#E1C8CD
#1BA95F
#373636
#00C268
#64F699
#FFC8BB
#CFD9FF
#FF006E
#FB5607
#FFBE0B
#8338EC
#FF8C42
#FFB347
#FFD166
#FFF1CC
#F1215C
#E0684D
#D29000
#FFD2B5
#FFB300
#00A896
#02C39A
#F0F3BD
#FF477E
#FF8C42
#2EC4B6
#FFF9EC
#1B4D3E
#2A9D8F
#F4A261
#FDF6E3
#DAC607
#00A4B3
#00BFBF
#DBF9CA
#B96D00
#D39E00
#FF864F
#D2C600
#D67689
#DE9F7B
#7ABAB1
#FCF9F2
#F19808
#EABF3D
#E6DC6B
#F5F5CE
#D8E3E1
#009D91
#DA5400
#903500
#F0562F
#FF8397
#FFB67C
#FFD88E
#F1DF65
#FFC5C5
#F2A100
#D15800
#D3E3E3
#D26400
#008388
#9A4700