#5C8D89
#A7D7C5
#F4F9F4
#F2C57C
#E9E7D2Parchment
#E6DA8BVanilla
#B8CFA6Celadon
#243524Gunmetal
Vanilla & Celadon Vibe is a analogous color palette tagged modern, beige, green. Analogous neighbors on the wheel (Parchment, Vanilla, Celadon) give it a natural, low-tension flow. 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 |
|---|---|---|---|---|---|
| Parchment | #E9E7D2 | rgb(233, 231, 210) | hsl(55, 34%, 87%) | oklch(92.4% 0.028 102) | |
| Vanilla | #E6DA8B | rgb(230, 218, 139) | hsl(52, 65%, 72%) | oklch(88.1% 0.100 101) | |
| Celadon | #B8CFA6 | rgb(184, 207, 166) | hsl(94, 30%, 73%) | oklch(82.6% 0.061 132) | |
| Gunmetal | #243524 | rgb(36, 53, 36) | hsl(120, 19%, 17%) | oklch(30.8% 0.037 145) |
Why it works and how to use it
The palette holds together thanks to its analogous hue relationship and a strong light-to-dark ladder (87% down to 17% lightness). A natural fit for websites, presentations and branding.
- Background: Parchment (#E9E7D2) is the lightest color, so it belongs on large surfaces.
- Text: Gunmetal (#243524) on #E9E7D2 gives 10.45:1, passing WCAG AAA.
- Primary: Vanilla (#E6DA8B) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Celadon (#B8CFA6) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Parchment on Gunmetal at 10.45:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Vanilla & Celadon Vibe
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
#E9E7D2
#E6DA8B
#B8CFA6
#243524
Color-blind check: under tritanopia, Parchment and Vanilla 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 |
|---|---|---|---|
#E9E7D2 on #243524 | Aa | 10.45:1 | AAA |
#E6DA8B on #243524 | Aa | 9.17:1 | AAA |
#B8CFA6 on #243524 | Aa | 7.77:1 | AAA |
#E9E7D2 on #B8CFA6 | Aa | 1.34:1 | Fail |
#E6DA8B on #B8CFA6 | Aa | 1.18:1 | Fail |
#E9E7D2 on #E6DA8B | Aa | 1.14:1 | Fail |
Similar palettes 24 more in this mood
#FFF8F0
#FFD2CB
#FF819E
#1B3240
#DDDEE2
#00C463
#676C7C
#17191F
#1C2F2E
#4F7F7B
#FFC582
#D6E2E1
#D4CAAF
#B6B29A
#6F664F
#534F3E
#FDFDFF
#FFDFBC
#B9B9B9
#222222
#F8FFFF
#5CB7B8
#FFABBA
#919191
#655B57
#F36893
#C3A7A5
#FFF1E6
#9C3E4A
#746764
#CDAF9D
#FFE4ED
#142532
#528494
#DE9D89
#FAF4E9
#FFF8F0
#FFD6A5
#FF8C42
#2B2D42
#6E5700
#7EC26E
#CCFFE7
#FDFDFD
#DCFBFF
#78B9B2
#5A6164
#EEA083
#F7F2EA
#E6DCCB
#CBBBA0
#6B6155
#FFF9F4
#FFE0C7
#F28C38
#2A2320
#2B2B2B
#4A4A4A
#A6E22E
#F5F5F5
#FFAF7F
#E0961F
#E3FFFF
#818181
#41726E
#8CBBAA
#D8DDD8
#D8AC63
#3E2723
#8D5524
#62CD9F
#FFF3D6
#F5F5F5
#CBCBCB
#3A5400
#2B2B2B
#FDFDFD
#E4E4E3
#84CA57
#1C1917
#F0EEEA
#5A5A5A
#FFCEB7
#B88DCD
#3C3C3C
#747474
#FFB2AA
#EEEEEE
#FFF8F0
#FFD6A5
#00BFFC
#2B2D42