#1B4332
#52B788
#E9F5F0
#007F7E
#6F83A3Slate
#AAD0ECBaby Blue
#F4F9F4Smoke
#9DE0A7Celadon
Urban Celadon & Baby Blue is a pastel light, split color palette tagged modern, cold, white. A split scheme: Slate plays against Celadon across roughly 88° of hue. High lightness and gentle saturation put it firmly in pastel territory. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Slate | #6F83A3 | rgb(111, 131, 163) | hsl(217, 22%, 54%) | oklch(60.6% 0.054 260) | |
| Baby Blue | #AAD0EC | rgb(170, 208, 236) | hsl(205, 63%, 80%) | oklch(84.0% 0.056 240) | |
| Smoke | #F4F9F4 | rgb(244, 249, 244) | hsl(120, 29%, 97%) | oklch(97.7% 0.008 146) | |
| Celadon | #9DE0A7 | rgb(157, 224, 167) | hsl(129, 52%, 75%) | oklch(84.7% 0.104 148) |
Why it works and how to use it
The palette holds together thanks to its split hue relationship and a soft light-to-dark ladder (97% down to 54% lightness). A natural fit for social media templates and gentle interfaces.
- Background: Smoke (#F4F9F4) is the lightest color, so it belongs on large surfaces.
- Text: Slate (#6F83A3) on #F4F9F4 gives 3.61:1, enough for large headings only.
- Primary: Baby Blue (#AAD0EC) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Celadon (#9DE0A7) 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 Urban Celadon & Baby Blue
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
#6F83A3
#AAD0EC
#F4F9F4
#9DE0A7
Color-blind check: under tritanopia, Baby Blue and Celadon 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 |
|---|---|---|---|
#6F83A3 on #F4F9F4 | Aa | 3.61:1 | AA large only |
#6F83A3 on #9DE0A7 | Aa | 2.5:1 | Fail |
#6F83A3 on #AAD0EC | Aa | 2.37:1 | Fail |
#AAD0EC on #F4F9F4 | Aa | 1.52:1 | Fail |
#F4F9F4 on #9DE0A7 | Aa | 1.44:1 | Fail |
#AAD0EC on #9DE0A7 | Aa | 1.05:1 | Fail |
Similar palettes 24 more in this mood
#00A6A6
#7DD8D8
#00C57C
#FDFDFD
#0F5C63
#2A8A8C
#9FD3CF
#F2F1EA
#1C2541
#465D79
#5BC0BE
#FFFFFF
#FAFAFA
#E5E7EB
#10B981
#111827
#00818A
#009D8C
#31CA88
#ACE496
#EEF4FF
#92CEF9
#0090DA
#072E46
#D7263D
#FFFFFF
#F9C5D1
#2E7D5B
#498711
#00AA6D
#00C0AE
#00DDF3
#1B4332
#52B788
#E9F5F0
#C9184A
#00735C
#379879
#7DC5A6
#81E3CC
#1B6F73
#47B377
#F2CC8F
#F4F1DE
#EEF4FF
#D8B6F0
#B05ADC
#342241
#FFFFFF
#E2E6E3
#059669
#111827
#7A1C2E
#51851E
#E8D5B8
#F6EFE3
#EEF4FF
#A9C6FF
#4C7DFF
#1B2A49
#6E5700
#7EC26E
#CCFFE7
#FDFDFD
#2E747B
#4CA7A9
#B3E8E3
#FBFAF3
#F6FBEF
#A8CC7C
#6DB648
#336232
#F5FFF1
#BDFFB9
#24D667
#103016
#272B17
#A3C167
#C8FF93
#F6FFEE
#007728
#5B6236
#D9D2B0
#F6F3E9
#FDFDFD
#E2E6E3
#009669
#49556F
#2B2B2B
#4A4A4A
#A6E22E
#F5F5F5