#D7263D
#FFFFFF
#F9C5D1
#2E7D5B
#58863BAvocado
#8EAE3ABrass
#D2C8B0Putty
#9C282FCranberry
Scarlet Cranberry & Brass is a split color palette tagged modern, green, red. A split scheme: Avocado plays against Cranberry across roughly 101° of hue. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Avocado | #58863B | rgb(88, 134, 59) | hsl(97, 39%, 38%) | oklch(56.9% 0.117 135) | |
| Brass | #8EAE3A | rgb(142, 174, 58) | hsl(77, 50%, 45%) | oklch(70.4% 0.146 123) | |
| Putty | #D2C8B0 | rgb(210, 200, 176) | hsl(42, 27%, 76%) | oklch(83.5% 0.034 88) | |
| Cranberry | #9C282F | rgb(156, 40, 47) | hsl(356, 59%, 38%) | oklch(46.3% 0.152 22) |
Why it works and how to use it
It works because the lightness steps are gentle (38% to 76%), which keeps the mood consistent from edge to edge. Try it for websites, presentations and branding.
- Background: Putty (#D2C8B0) is the lightest color, so it belongs on large surfaces.
- Text: Cranberry (#9C282F) on #D2C8B0 gives 4.58:1, passing WCAG AA.
- Primary: Brass (#8EAE3A) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Avocado (#58863B) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Putty on Cranberry at 4.58:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Scarlet Cranberry & Brass
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
#58863B
#8EAE3A
#D2C8B0
#9C282F
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#D2C8B0 on #9C282F | Aa | 4.58:1 | AA |
#8EAE3A on #9C282F | Aa | 3:1 | AA large only |
#58863B on #D2C8B0 | Aa | 2.58:1 | Fail |
#58863B on #9C282F | Aa | 1.77:1 | Fail |
#58863B on #8EAE3A | Aa | 1.69:1 | Fail |
#8EAE3A on #D2C8B0 | Aa | 1.53:1 | Fail |
Similar palettes 24 more in this mood
#1B4332
#52B788
#E9F5F0
#C9184A
#BB002B
#E3E3E3
#D8A6B2
#0F6646
#7A1C2E
#51851E
#E8D5B8
#F6EFE3
#012C1C
#3AA274
#C9D4D0
#A80039
#D1FEE8
#098357
#333D39
#FF647D
#2B2D42
#8D99AE
#EDF2F4
#EF233C
#111111
#424242
#FF3B3B
#FAFAFA
#FAFAFA
#E5E7EB
#10B981
#111827
#FFFDFC
#EDE0DB
#FF6F61
#1F2933
#F50037
#30558B
#F1FAEE
#E1BA00
#00A7D3
#FFB3C1
#7BC96F
#2D6A4F
#8A6800
#84A347
#00C38B
#56E7F4
#E0E4E9
#BC4358
#3E5169
#090E15
#E63946
#1D3557
#F1FAEE
#F4D35E
#1A3F1E
#475756
#007C5E
#A7CA57
#DDDEE2
#00C463
#676C7C
#17191F
#00818A
#009D8C
#31CA88
#ACE496
#CDFFC8
#3FB063
#2C7040
#004A14
#3F6D26
#9A8E38
#C4976A
#FFBAAD
#EA4A59
#8EC5FC
#E0C3FC
#FDFDFD
#EEF0FF
#798499
#2C3031
#FF5359
#00616A
#4DA27C
#98AA55
#FFCA7B
#498711
#00AA6D
#00C0AE
#00DDF3