#981A69
#AD1F03
#FF6A89
#FC83FF
#9E004ACranberry
#972926Cranberry
#813E93Plum
#C05C9FMulberry
Twilight Cranberry & Mulberry is a split color palette tagged sunset, gradient, vibrant. The hues span about 75°, enough contrast to create a focal point without the harshness of true complements. Neither washed out nor loud, it adapts to most contexts. The overall temperature is warm.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Cranberry | #9E004A | rgb(158, 0, 74) | hsl(332, 100%, 31%) | oklch(45.0% 0.181 4) | |
| Cranberry | #972926 | rgb(151, 41, 38) | hsl(2, 60%, 37%) | oklch(45.4% 0.146 26) | |
| Plum | #813E93 | rgb(129, 62, 147) | hsl(287, 41%, 41%) | oklch(48.6% 0.147 319) | |
| Mulberry | #C05C9F | rgb(192, 92, 159) | hsl(320, 44%, 56%) | oklch(61.7% 0.151 342) |
Why it works and how to use it
The palette holds together thanks to its split hue relationship and a soft light-to-dark ladder (56% down to 31% lightness). A natural fit for websites, presentations and branding.
- Background: Mulberry (#C05C9F) is the lightest color, so it belongs on large surfaces.
- Text: Cranberry (#9E004A) on #C05C9F gives 2.07:1, so pair it with a darker neutral for body copy.
- Primary: Cranberry (#972926) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Plum (#813E93) 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 Twilight Cranberry & Mulberry
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
#9E004A
#972926
#813E93
#C05C9F
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#9E004A on #C05C9F | Aa | 2.07:1 | Fail |
#972926 on #C05C9F | Aa | 1.98:1 | Fail |
#813E93 on #C05C9F | Aa | 1.73:1 | Fail |
#9E004A on #813E93 | Aa | 1.19:1 | Fail |
#972926 on #813E93 | Aa | 1.14:1 | Fail |
#9E004A on #972926 | Aa | 1.04:1 | Fail |
Similar palettes 24 more in this mood
#7C4EB5
#EC483E
#FF85B0
#F590EC
#8935B6
#B41772
#CC59C0
#FF7389
#9D50A6
#D53A43
#F8789F
#FFB7E2
#F789FF
#E067A4
#8359C7
#BC0B3A
#FFC26F
#FF896D
#E17D30
#A9233F
#FFACC1
#F86DCD
#D7716B
#B25EC6
#FF8FA6
#B587D7
#E26E4D
#BE389F
#FFB2CE
#F89782
#EE4D68
#9C1084
#77318D
#A9424F
#C94697
#FB7634
#A22B8D
#C35734
#E26670
#FF77AE
#742EA2
#D0307B
#E25AD0
#FFBFBC
#B7426B
#D87300
#FFAC9F
#F8C13F
#397700
#C88C00
#BCB600
#FFC9AC
#00705F
#9FB100
#4CE26B
#FBCF64
#CD5973
#DD5634
#C181DD
#FFAADF
#904F00
#8AC337
#D0C700
#EEBD58
#8D366E
#9D63E8
#CD8BD6
#FF9FB5
#B62E8E
#FF9597
#F2ADF8
#FFB8CB
#9E3B3E
#9F5900
#F68357
#FBBA36
#3D0C11
#D80032
#F78CA2
#F9DEC9
#3A1C71
#D76D77
#FFAF7B
#FFE5B4
#994F00
#D4B800
#FFC6B7
#FFCE83
#4A2F85
#F2858E
#FFD4B9
#FFF9EF