#90EBAA
#40B5B3
#4183B9
#F6F9EE
#C3DDAECeladon
#7DAD9DSage
#568598Slate
#F7F8F2Smoke
Celadon & Slate Hour is a split color palette tagged summer, muted, cold. A split scheme: Celadon plays against Slate across roughly 104° of hue. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Celadon | #C3DDAE | rgb(195, 221, 174) | hsl(93, 41%, 77%) | oklch(86.6% 0.069 131) | |
| Sage | #7DAD9D | rgb(125, 173, 157) | hsl(160, 23%, 58%) | oklch(70.9% 0.056 172) | |
| Slate | #568598 | rgb(86, 133, 152) | hsl(197, 28%, 47%) | oklch(59.0% 0.059 225) | |
| Smoke | #F7F8F2 | rgb(247, 248, 242) | hsl(70, 30%, 96%) | oklch(97.7% 0.008 114) |
Why it works and how to use it
The palette holds together thanks to its split hue relationship and a strong light-to-dark ladder (96% down to 47% lightness). A natural fit for websites, presentations and branding.
- Background: Smoke (#F7F8F2) is the lightest color, so it belongs on large surfaces.
- Text: Slate (#568598) on #F7F8F2 gives 3.78:1, enough for large headings only.
- Primary: Celadon (#C3DDAE) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Sage (#7DAD9D) 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 Celadon & Slate Hour
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
#C3DDAE
#7DAD9D
#568598
#F7F8F2
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#568598 on #F7F8F2 | Aa | 3.78:1 | AA large only |
#C3DDAE on #568598 | Aa | 2.74:1 | Fail |
#7DAD9D on #F7F8F2 | Aa | 2.36:1 | Fail |
#C3DDAE on #7DAD9D | Aa | 1.71:1 | Fail |
#7DAD9D on #568598 | Aa | 1.6:1 | Fail |
#C3DDAE on #F7F8F2 | Aa | 1.38:1 | Fail |
Similar palettes 24 more in this mood
#B5E48C
#52B69A
#168AAD
#F6F9EE
#00B0CA
#79D213
#00ED9D
#58FDEE
#00C184
#64D2FC
#A9D875
#3DEEEC
#00C187
#00C7C5
#94C173
#9DE4FF
#92A026
#39C137
#33CFA4
#2EDEE0
#3EF58F
#7DCD20
#00BFC0
#00A78A
#68A4D2
#5181A8
#F3F0E8
#DAAD8C
#7B7100
#A29500
#00AF7D
#E5F3EC
#5BA4CF
#A8D5F2
#F2E8D5
#4A4238
#497697
#6DADC0
#B0DAE2
#D8ECF1
#736F00
#008F72
#938F00
#E3F6EF
#FFBCC0
#FFE8EB
#CDFCC5
#789A88
#3596D7
#40D1F5
#AFF2FF
#F1FDFF
#914F00
#007D51
#CD7300
#DDF1E5
#78C2EE
#CCEBFF
#FFF9EF
#5F574D
#FAF4DE
#F1E1A5
#88C2D7
#314757
#DED871
#75B37B
#008F94
#F6F9EE
#ECD0A5
#FCF9F4
#75B8AE
#50788A
#FF9A8B
#FFB4A2
#FFCDB2
#FFF1E6
#0077B6
#00B4D8
#90E0EF
#CAF0F8
#F94144
#F3722C
#F9C74F
#90BE6D
#FFCB77
#FEF9EF
#17C3B2
#227C9D
#E16700
#D98900
#D5D65B
#67C48E