#3C5148
#7A9B76
#C8D5B9
#F6F5EE
#2D2534Raisin
#7D7E9ASlate
#8598B0Pewter
#FFC3EDCotton Candy
Cotton Candy & Slate Mood is a split color palette tagged muted, minimal, gray. A split scheme: Pewter plays against Cotton Candy across roughly 105° 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 |
|---|---|---|---|---|---|
| Raisin | #2D2534 | rgb(45, 37, 52) | hsl(272, 17%, 17%) | oklch(28.0% 0.029 309) | |
| Slate | #7D7E9A | rgb(125, 126, 154) | hsl(238, 13%, 55%) | oklch(60.2% 0.042 283) | |
| Pewter | #8598B0 | rgb(133, 152, 176) | hsl(213, 21%, 61%) | oklch(67.3% 0.042 254) | |
| Cotton Candy | #FFC3ED | rgb(255, 195, 237) | hsl(318, 100%, 88%) | oklch(88.3% 0.087 338) |
Why it works and how to use it
It works because the lightness range is wide (17% to 88%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Cotton Candy (#FFC3ED) is the lightest color, so it belongs on large surfaces.
- Text: Raisin (#2D2534) on #FFC3ED gives 10.02:1, passing WCAG AAA.
- Primary: Pewter (#8598B0) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Slate (#7D7E9A) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Raisin on Cotton Candy at 10.02:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Cotton Candy & Slate Mood
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
#2D2534
#7D7E9A
#8598B0
#FFC3ED
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#2D2534 on #FFC3ED | Aa | 10.02:1 | AAA |
#2D2534 on #8598B0 | Aa | 4.99:1 | AA |
#2D2534 on #7D7E9A | Aa | 3.73:1 | AA large only |
#7D7E9A on #FFC3ED | Aa | 2.68:1 | Fail |
#8598B0 on #FFC3ED | Aa | 2.01:1 | Fail |
#7D7E9A on #8598B0 | Aa | 1.34:1 | Fail |
Similar palettes 24 more in this mood
#27374D
#526D82
#9DB2BF
#DDE6ED
#3E2723
#6D4C41
#A1887F
#EFEBE9
#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#2E3440
#4C566A
#D8DEE9
#EBCB8B
#F7FBFF
#D5E2ED
#ADCAE3
#2C4A66
#5B4B5E
#8A7A8C
#C9BEC6
#F2EEF0
#121128
#464A64
#837581
#D4CBC6
#3D272C
#9B7981
#AC9498
#E4C8CE
#2C3A2F
#5B7553
#B7C4A8
#F3F1EA
#3E4A3D
#7A6A55
#C9B79C
#EDE7DB
#0D1321
#34465E
#748CAB
#F0EBD8
#B2DFD2
#859577
#776A4C
#41271C
#ECDCF8
#9B91A4
#78708B
#382F45
#FBF7EF
#EAD9B8
#C9A961
#3A3226
#142532
#528494
#DE9D89
#FAF4E9
#F9EDEA
#E8C4B8
#B76E79
#4A3F3C
#1D1900
#B0BEB3
#D5EBBA
#FFF2E0
#1E1410
#5B4235
#A57C5B
#E8DCCF
#020B25
#27446D
#C2AE91
#E3E0DB
#CFFAFF
#7FD9DA
#538582
#52514C
#0F3D3E
#1E6F6F
#C8B89A
#F3EFE7
#2E1F1A
#725548
#A67B5B
#F0E6DA
#2B1919
#704744
#DAA29F
#E1DAD8