#1B1B1B
#F96D00
#8B5CF6
#F2F2F2
#AD194BCranberry
#AA5F91Mulberry
#CF5A3ABurnt Orange
#B380CEOrchid
Cranberry & Burnt Orange Drift is a split color palette tagged vibrant, purple, orange. A split scheme: Cranberry plays against Orchid across roughly 94° of hue. 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 |
|---|---|---|---|---|---|
| Cranberry | #AD194B | rgb(173, 25, 75) | hsl(340, 75%, 39%) | oklch(48.9% 0.181 9) | |
| Mulberry | #AA5F91 | rgb(170, 95, 145) | hsl(320, 31%, 52%) | oklch(58.8% 0.116 341) | |
| Burnt Orange | #CF5A3A | rgb(207, 90, 58) | hsl(13, 61%, 52%) | oklch(61.0% 0.156 36) | |
| Orchid | #B380CE | rgb(179, 128, 206) | hsl(279, 44%, 65%) | oklch(67.9% 0.124 313) |
Why it works and how to use it
With 4 chromatic colors, Burnt Orange takes the lead while the rest support. Lightness runs from 39% to 65%. Well suited to websites, presentations and branding.
- Background: Orchid (#B380CE) is the lightest color, so it belongs on large surfaces.
- Text: Cranberry (#AD194B) on #B380CE gives 2.29:1, so pair it with a darker neutral for body copy.
- Primary: Burnt Orange (#CF5A3A) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Mulberry (#AA5F91) 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 Cranberry & Burnt Orange Drift
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
#AD194B
#AA5F91
#CF5A3A
#B380CE
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#AD194B on #B380CE | Aa | 2.29:1 | Fail |
#AD194B on #CF5A3A | Aa | 1.72:1 | Fail |
#AD194B on #AA5F91 | Aa | 1.58:1 | Fail |
#AA5F91 on #B380CE | Aa | 1.45:1 | Fail |
#CF5A3A on #B380CE | Aa | 1.33:1 | Fail |
#AA5F91 on #CF5A3A | Aa | 1.09:1 | Fail |
Similar palettes 24 more in this mood
#240046
#6021A1
#9D4EDD
#FF9E00
#FF006E
#FB5607
#FFBE0B
#8338EC
#F65840
#E664CF
#FF9427
#FF97B3
#B51502
#A92794
#BE5776
#F58600
#F28AF2
#FC8100
#80284F
#940014
#FF8FA6
#B587D7
#E26E4D
#BE389F
#FF7518
#1A1A1A
#6A0DAD
#F5F5F5
#0D0221
#5A189A
#39FF14
#FF8C00
#F4F1EA
#2B2B2B
#FF6F00
#8E44AD
#E85800
#95006B
#65006E
#94B7FF
#240046
#6021A1
#009558
#FF9E00
#AF60B6
#D58AA9
#FF9650
#F19E99
#77318D
#A9424F
#C94697
#FB7634
#A22B8D
#C35734
#E26670
#FF77AE
#271730
#FF2C8B
#E87E00
#DF70D3
#EB872A
#B0001B
#501D79
#0D0A1B
#0D0221
#5A189A
#BED6FF
#FF8C00
#5B3DF5
#8E6BFF
#FF8FB1
#FFD1DC
#743E6F
#CB4763
#FF913A
#EBB356
#EC6271
#F88342
#FF85CC
#EBBDFF
#8B0013
#05030F
#512C74
#F67F00
#0F0E17
#FF8906
#F25F4C
#E53170
#2D4059
#EA5455
#F07B3F
#FFD460