#F7F7EC
#D6E4B8
#A9C48A
#3F5233
#335344Spruce
#568365Fern
#ACD5ABCeladon
#F7FCF3Ivory
Hazy Celadon & Fern is a analogous color palette tagged muted, green, white. Analogous neighbors on the wheel (Spruce, Fern, Celadon) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Spruce | #335344 | rgb(51, 83, 68) | hsl(152, 24%, 26%) | oklch(41.2% 0.046 163) | |
| Fern | #568365 | rgb(86, 131, 101) | hsl(140, 21%, 43%) | oklch(56.8% 0.068 155) | |
| Celadon | #ACD5AB | rgb(172, 213, 171) | hsl(119, 33%, 75%) | oklch(83.2% 0.072 144) | |
| Ivory | #F7FCF3 | rgb(247, 252, 243) | hsl(93, 60%, 97%) | oklch(98.5% 0.013 131) |
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 (97% down to 26% lightness). A natural fit for websites, presentations and branding.
- Background: Ivory (#F7FCF3) is the lightest color, so it belongs on large surfaces.
- Text: Spruce (#335344) on #F7FCF3 gives 8.2:1, passing WCAG AAA.
- Primary: Celadon (#ACD5AB) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Fern (#568365) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Spruce on Ivory at 8.2:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Hazy Celadon & Fern
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
#335344
#568365
#ACD5AB
#F7FCF3
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#335344 on #F7FCF3 | Aa | 8.2:1 | AAA |
#335344 on #ACD5AB | Aa | 5.22:1 | AA |
#568365 on #F7FCF3 | Aa | 4.18:1 | AA large only |
#568365 on #ACD5AB | Aa | 2.66:1 | Fail |
#335344 on #568365 | Aa | 1.96:1 | Fail |
#ACD5AB on #F7FCF3 | Aa | 1.57:1 | Fail |
Similar palettes 24 more in this mood
#5F6B3B
#8C9A5B
#D6C9A8
#F5F0E6
#2F5D3A
#5E8F5E
#A9C99A
#EEF4E8
#4D3424
#88604A
#BBE9CD
#F6FCF8
#AECC9F
#E2F9B8
#F4EEDF
#DE9390
#5C7A4B
#9DB88C
#E9E4D4
#F8F6F0
#2D6A4F
#40916C
#B7E4C7
#FFFDF7
#1E3033
#456578
#98BD9B
#F4FFE6
#9E9B8A
#C39F63
#ADE0C7
#FFEBE6
#3F5A36
#7A9B5C
#C9D8A8
#F9F8F1
#56724D
#96B878
#E4F3C2
#FBFAF3
#F8FFFB
#9BECC3
#608A70
#5E5C57
#F5FBF9
#D4E3DE
#374B00
#0A1100
#EDEFFF
#ADE0C7
#C39F63
#464334
#DD9F6E
#EDD693
#9DBE7C
#FDFDFD
#3B2314
#6B4530
#A8D5BA
#F1F7F3
#53394B
#78AFC1
#B7E1A7
#F4F1DE
#2D6A4F
#7577B8
#B7E4C7
#FFFDF7
#506B57
#7AAA84
#B9F1BC
#E3F4E6
#467450
#79AB79
#C7E8B8
#F7FDF1
#E3FCF0
#B8DBB4
#89967B
#4D4C46
#FFF8FA
#FFC1CE
#A9D9B9
#697E71
#0F5C63
#2A8A8C
#9FD3CF
#F2F1EA
#A47864
#C9A58B
#E8D9CB
#F7F3EE