#1B4332
#52B788
#E9F5F0
#C9184A
#D7263DCrimson
#FFFFFFWhite
#F9C5D1Bubblegum
#2E7D5BFern
Candy Cane is a complementary color palette tagged modern, red, 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 |
|---|---|---|---|---|---|
| Crimson | #D7263D | rgb(215, 38, 61) | hsl(352, 70%, 50%) | oklch(57.1% 0.209 21) | |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | oklch(100.0% 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
It works because the lightness range is wide (34% to 100%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: White (#FFFFFF) is the lightest color, so it belongs on large surfaces.
- Text: Fern (#2E7D5B) on #FFFFFF gives 5:1, passing WCAG AA.
- Primary: Bubblegum (#F9C5D1) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Crimson (#D7263D) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is White on Fern at 5:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Candy Cane
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
#D7263D
#FFFFFF
#F9C5D1
#2E7D5B
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#FFFFFF on #2E7D5B | Aa | 5:1 | AA |
#D7263D on #FFFFFF | Aa | 4.96:1 | AA |
#F9C5D1 on #2E7D5B | Aa | 3.32:1 | AA large only |
#D7263D on #F9C5D1 | Aa | 3.29:1 | AA large only |
#FFFFFF on #F9C5D1 | Aa | 1.51:1 | Fail |
#D7263D on #2E7D5B | Aa | 1.01:1 | Fail |
Similar palettes 24 more in this mood
#BB002B
#E3E3E3
#D8A6B2
#0F6646
#7A1C2E
#51851E
#E8D5B8
#F6EFE3
#D3363D
#FF8474
#FFD9D4
#FAFAFA
#0083AF
#FDFDFD
#F9C5D1
#2E7D5B
#9B6F00
#FDFDFD
#F9C5D1
#2E7D5B
#FFC7C4
#00A754
#F0F0F7
#0F0B00
#2B2D42
#8D99AE
#EDF2F4
#EF233C
#111111
#424242
#FF3B3B
#FAFAFA
#FAFAFA
#E5E7EB
#10B981
#111827
#FFFDFC
#EDE0DB
#FF6F61
#1F2933
#F50037
#30558B
#F1FAEE
#E1BA00
#00A7D3
#FFB3C1
#7BC96F
#2D6A4F
#FFF8F0
#FFD2CB
#FF819E
#1B3240
#E63946
#1D3557
#F1FAEE
#F4D35E
#00272F
#FF9898
#E5E5E5
#FDFDFD
#3B2F0D
#7D602F
#EC9388
#FFF7F2
#EA4A59
#8EC5FC
#E0C3FC
#FDFDFD
#EEF0FF
#798499
#2C3031
#FF5359
#ECF1F7
#FF2A6C
#4E6074
#222A32
#00BA85
#FF8A9B
#C7EFCF
#3D8361
#1B6F73
#47B377
#F2CC8F
#F4F1DE
#655B57
#F36893
#C3A7A5
#FFF1E6
#00977C
#FF69B4
#FFB6D9
#FFF0F7