#ECF1F7
#FF2A6C
#4E6074
#222A32
#222831Raisin
#575D65Storm
#D67A79Terracotta
#EEEEEEFrost
Crisp Terracotta & Raisin is a muted complementary color palette tagged dark, modern, minimal. Raisin and Terracotta sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. Every color is softened, so it works well as a background system for text-heavy layouts. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Raisin | #222831 | rgb(34, 40, 49) | hsl(216, 18%, 16%) | oklch(27.5% 0.019 258) | |
| Storm | #575D65 | rgb(87, 93, 101) | hsl(214, 7%, 37%) | oklch(47.6% 0.015 256) | |
| Terracotta | #D67A79 | rgb(214, 122, 121) | hsl(1, 53%, 66%) | oklch(68.0% 0.115 21) | |
| Frost | #EEEEEE | rgb(238, 238, 238) | hsl(0, 0%, 93%) | oklch(94.9% 0.000 0) |
Why it works and how to use it
It works because the lightness range is wide (16% to 93%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Frost (#EEEEEE) is the lightest color, so it belongs on large surfaces.
- Text: Raisin (#222831) on #EEEEEE gives 12.78:1, passing WCAG AAA.
- Primary: Terracotta (#D67A79) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Storm (#575D65) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Raisin on Frost at 12.78:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Crisp Terracotta & Raisin
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
#222831
#575D65
#D67A79
#EEEEEE
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#222831 on #EEEEEE | Aa | 12.78:1 | AAA |
#575D65 on #EEEEEE | Aa | 5.73:1 | AA |
#222831 on #D67A79 | Aa | 4.89:1 | AA |
#D67A79 on #EEEEEE | Aa | 2.62:1 | Fail |
#222831 on #575D65 | Aa | 2.23:1 | Fail |
#575D65 on #D67A79 | Aa | 2.19:1 | Fail |
Similar palettes 24 more in this mood
#2C2C30
#606068
#FF90A0
#FAFAFC
#202020
#565656
#FF796E
#FAFAFA
#222831
#575D65
#00ADB5
#EEEEEE
#111111
#424242
#FF3B3B
#FAFAFA
#1A1A1D
#4C4C54
#E8788A
#F4F4F6
#111318
#454A54
#F4A7B9
#FBFBFC
#EDEEF0
#C9CCD1
#1D4ED8
#0B1220
#E5E6E6
#F61061
#4E5756
#0E0F0F
#2B2B2B
#4A4A4A
#00E9DB
#F5F5F5
#F3F5F4
#AD6FDD
#4E5A58
#0F1212
#E8EEEE
#DD5600
#596564
#050D0D
#222831
#575D65
#988BDA
#EEEEEE
#121214
#5D6064
#B3CCFF
#E6EEFF
#2B2B2B
#4A4A4A
#A6E22E
#F5F5F5
#09090C
#3C3C44
#CF6274
#DADADC
#0E0E0E
#434343
#F5B7C4
#FFF7F9
#F5F5F5
#CBCBCB
#3A5400
#2B2B2B
#FAFAFA
#919191
#81000C
#111111
#EDEEF0
#C9CCD1
#7A5A00
#0B1220
#2B2B2B
#4A4A4A
#FFABE8
#F5F5F5
#0F0F0F
#444444
#049C65
#F4EEE8
#EDEEF0
#C9CCD1
#006699
#05141E
#1E1B18
#6B5D4F
#C9B79C
#F4EFE6