#D7263D
#FFFFFF
#F9C5D1
#2E7D5B
#0083AFCerulean
#FDFDFDWhite
#F9C5D1Bubblegum
#2E7D5BFern
Crimson Cerulean & Fern 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 |
|---|---|---|---|---|---|
| Cerulean | #0083AF | rgb(0, 131, 175) | hsl(195, 100%, 34%) | oklch(57.2% 0.115 231) | |
| White | #FDFDFD | rgb(253, 253, 253) | hsl(0, 0%, 99%) | oklch(99.4% 0.000 0) | |
| Bubblegum | #F9C5D1 | rgb(249, 197, 209) | hsl(346, 81%, 87%) | oklch(87.3% 0.061 3) | |
| Fern | #2E7D5B | rgb(46, 125, 91) | hsl(154, 46%, 34%) | oklch(53.1% 0.095 162) |
Why it works and how to use it
With 3 chromatic colors, Cerulean takes the lead while the rest support. Lightness runs from 34% to 99%. Well suited to websites, presentations and branding.
- Background: White (#FDFDFD) is the lightest color, so it belongs on large surfaces.
- Text: Fern (#2E7D5B) on #FDFDFD gives 4.91:1, passing WCAG AA.
- Primary: Cerulean (#0083AF) is the most saturated mid-tone; use it for buttons and links (4.24:1 against the background, fine for UI elements).
- Accent: Bubblegum (#F9C5D1) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is White on Fern at 4.91:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Crimson Cerulean & Fern
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
#0083AF
#FDFDFD
#F9C5D1
#2E7D5B
Color-blind check: under tritanopia, Cerulean and Fern 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 |
|---|---|---|---|
#FDFDFD on #2E7D5B | Aa | 4.91:1 | AA |
#0083AF on #FDFDFD | Aa | 4.24:1 | AA large only |
#F9C5D1 on #2E7D5B | Aa | 3.32:1 | AA large only |
#0083AF on #F9C5D1 | Aa | 2.86:1 | Fail |
#FDFDFD on #F9C5D1 | Aa | 1.48:1 | Fail |
#0083AF on #2E7D5B | Aa | 1.16:1 | Fail |
Similar palettes 24 more in this mood
#3F3E57
#4F90C2
#E9F5F2
#92DE9E
#9B6F00
#FDFDFD
#F9C5D1
#2E7D5B
#FFC7C4
#00A754
#F0F0F7
#0F0B00
#D2637C
#638CCC
#E8C582
#FDFDFD
#001725
#9BA0FF
#FF99B4
#A6DA7C
#FAFAFA
#E5E7EB
#10B981
#111827
#EDEEF0
#C9CCD1
#1D4ED8
#0B1220
#00A7D3
#FFB3C1
#7BC96F
#2D6A4F
#FFF8F0
#FFD2CB
#FF819E
#1B3240
#00272F
#FF9898
#E5E5E5
#FDFDFD
#3B2F0D
#7D602F
#EC9388
#FFF7F2
#EA4A59
#8EC5FC
#E0C3FC
#FDFDFD
#EEF4FF
#92CEF9
#0090DA
#072E46
#ECF1F7
#FF2A6C
#4E6074
#222A32
#00BA85
#FF8A9B
#C7EFCF
#3D8361
#1B4332
#52B788
#E9F5F0
#C9184A
#4A3222
#8B5E3C
#72D1FF
#FFF8EC
#1B6F73
#47B377
#F2CC8F
#F4F1DE
#655B57
#F36893
#C3A7A5
#FFF1E6
#D871CA
#0582CA
#F5F0E1
#F4A261
#BB002B
#E3E3E3
#D8A6B2
#0F6646
#929100
#8EC5FC
#E0C3FC
#FDFDFD
#00977C
#FF69B4
#FFB6D9
#FFF0F7