#1C2541
#465D79
#5BC0BE
#FFFFFF
#ECFCD0Cream
#DCF299Vanilla
#D0DAFFPeriwinkle
#4D4969Dusk
Vanilla & Cream Mist is a vivid light, complementary color palette tagged modern, cold, minimal. Cream and Dusk sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. These are bold, punchy colors that need generous white space around them. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Cream | #ECFCD0 | rgb(236, 252, 208) | hsl(82, 88%, 90%) | oklch(96.8% 0.060 124) | |
| Vanilla | #DCF299 | rgb(220, 242, 153) | hsl(75, 77%, 77%) | oklch(92.5% 0.115 120) | |
| Periwinkle | #D0DAFF | rgb(208, 218, 255) | hsl(227, 100%, 91%) | oklch(89.3% 0.052 273) | |
| Dusk | #4D4969 | rgb(77, 73, 105) | hsl(248, 18%, 35%) | oklch(42.3% 0.053 290) |
Why it works and how to use it
The palette holds together thanks to its complementary hue relationship and a strong light-to-dark ladder (91% down to 35% lightness). A natural fit for websites, presentations and branding.
- Background: Cream (#ECFCD0) is the lightest color, so it belongs on large surfaces.
- Text: Dusk (#4D4969) on #ECFCD0 gives 7.85:1, passing WCAG AAA.
- Primary: Periwinkle (#D0DAFF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Vanilla (#DCF299) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cream on Dusk at 7.85:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Vanilla & Cream Mist
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
#ECFCD0
#DCF299
#D0DAFF
#4D4969
Color-blind check: under tritanopia, Vanilla and Periwinkle become hard to tell apart, so do not rely on that pair alone to carry meaning.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#ECFCD0 on #4D4969 | Aa | 7.85:1 | AAA |
#DCF299 on #4D4969 | Aa | 6.96:1 | AA |
#D0DAFF on #4D4969 | Aa | 6.13:1 | AA |
#ECFCD0 on #D0DAFF | Aa | 1.28:1 | Fail |
#DCF299 on #D0DAFF | Aa | 1.14:1 | Fail |
#ECFCD0 on #DCF299 | Aa | 1.13:1 | Fail |
Similar palettes 24 more in this mood
#FFF8F0
#FFD2CB
#FF819E
#1B3240
#1C2F2E
#4F7F7B
#FFC582
#D6E2E1
#FDFDFF
#FFDFBC
#B9B9B9
#222222
#E5E2FF
#ADA8D2
#6A6C87
#3D3C5E
#142532
#528494
#DE9D89
#FAF4E9
#CFFAFF
#7FD9DA
#538582
#52514C
#FFF9F4
#FFE0C7
#F28C38
#2A2320
#3C3C3C
#747474
#FFB2AA
#EEEEEE
#0F5C63
#2A8A8C
#9FD3CF
#F2F1EA
#D8D1C6
#BEB19C
#233E64
#000A1E
#004046
#007375
#81B4B1
#D6D5CE
#D9FFEF
#9AFED0
#EAD1F5
#5F435B
#222831
#575D65
#00ADB5
#EEEEEE
#FCF8F4
#F0DAC0
#DE9F7B
#2D2E3A
#313B59
#617997
#7BDFDC
#FAFAFA
#3F464B
#757E84
#BCC3C7
#D1EBA0
#14213D
#ABB1FF
#E5E5E5
#FDFDFD
#FFF9F4
#FFE0C7
#81A6FF
#2A2320
#0D1B2A
#3C5374
#5A7A9E
#E0E1DD
#14213D
#FCA311
#E5E5E5
#FFFFFF
#5C8D89
#A7D7C5
#F4F9F4
#F2C57C
#495057
#868E96
#CED4DA
#F1F3F5
#2B2D42
#8D99AE
#EDF2F4
#EF233C