#8FCD9A
#D32636
#FBBFCC
#FDF9F3
#9FD39ECeladon
#EFAAB8Melon
#F8F5F1Smoke
#E33011Vermilion
Yuletide Vermilion & Celadon is a pastel light, complementary color palette tagged christmas, winter, warm. Celadon and Vermilion sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. The colors are light and airy, which suits friendly, soft-spoken brands. The overall temperature is warm.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Celadon | #9FD39E | rgb(159, 211, 158) | hsl(119, 38%, 72%) | oklch(81.7% 0.091 144) | |
| Melon | #EFAAB8 | rgb(239, 170, 184) | hsl(348, 68%, 80%) | oklch(80.7% 0.083 6) | |
| Smoke | #F8F5F1 | rgb(248, 245, 241) | hsl(34, 33%, 96%) | oklch(97.1% 0.006 75) | |
| Vermilion | #E33011 | rgb(227, 48, 17) | hsl(9, 86%, 48%) | oklch(59.5% 0.217 32) |
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 (96% down to 48% lightness). A natural fit for seasonal campaigns and greeting cards.
- Background: Smoke (#F8F5F1) is the lightest color, so it belongs on large surfaces.
- Text: Vermilion (#E33011) on #F8F5F1 gives 4.11:1, enough for large headings only.
- Primary: Melon (#EFAAB8) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Celadon (#9FD39E) 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 Yuletide Vermilion & Celadon
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
#9FD39E
#EFAAB8
#F8F5F1
#E33011
Color-blind check: under deuteranopia, Celadon and Melon 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 |
|---|---|---|---|
#F8F5F1 on #E33011 | Aa | 4.11:1 | AA large only |
#9FD39E on #E33011 | Aa | 2.62:1 | Fail |
#EFAAB8 on #E33011 | Aa | 2.37:1 | Fail |
#EFAAB8 on #F8F5F1 | Aa | 1.74:1 | Fail |
#9FD39E on #F8F5F1 | Aa | 1.57:1 | Fail |
#9FD39E on #EFAAB8 | Aa | 1.11:1 | Fail |
Similar palettes 24 more in this mood
#F4EFE7
#F0BAC5
#EE353E
#91C58A
#FBF6ED
#E22036
#FFC5D1
#93DC9E
#E70034
#F3B2C0
#F9F7F3
#83D4A4
#EF1715
#F2B9C5
#97CF8D
#F5F0E7
#F8F5EF
#F9ACBD
#98D58E
#E10E34
#D8341D
#91E3A8
#F9A7B9
#FBF5EC
#F9F4EC
#89CB9A
#D41100
#E4AFBA
#F9F4EB
#F52014
#95CC91
#F4B1BF
#9CD696
#F9F6F1
#ECABB9
#D92916
#F9F3E8
#8DCB8E
#F5AFBE
#DF0A00
#00653D
#C62A29
#EBC751
#FBF1E0
#246C0F
#FCF0DE
#A4051F
#E5BD2E
#00622D
#D70001
#F8EFE0
#E4BF47
#F3CC4A
#006922
#A6001B
#F5EEE2
#FCD1E4
#F4EEE3
#83DEB0
#F5A69F
#F7F5F1
#D01C35
#3C7E42
#BFE5F9
#D12935
#3C8253
#B1DDF4
#F3EFEA
#DB3328
#F7F2E9
#257346
#BDE2F5
#D51D23
#E5DDD0
#004F2A
#FBF9F6
#B2D8EB
#007847
#B71E1A
#FCF8F1
#BCDCED
#006435
#F5F2ED
#DF2628
#C91128
#F9F7F3
#B2DFF5
#377B33
#006837
#F6F3EE
#BAE8FF
#BF1D10