#0083AF
#FDFDFD
#F9C5D1
#2E7D5B
#3F3E57Charcoal
#4F90C2Blue Gray
#E9F5F2Frost
#92DE9ECeladon
Bright Celadon & Blue Gray is a split color palette tagged modern, blue, white. The hues span about 77°, enough contrast to create a focal point without the harshness of true complements. Neither washed out nor loud, it adapts to most contexts. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Charcoal | #3F3E57 | rgb(63, 62, 87) | hsl(242, 17%, 29%) | oklch(37.6% 0.042 286) | |
| Blue Gray | #4F90C2 | rgb(79, 144, 194) | hsl(206, 49%, 54%) | oklch(63.1% 0.101 244) | |
| Frost | #E9F5F2 | rgb(233, 245, 242) | hsl(165, 38%, 94%) | oklch(96.0% 0.013 179) | |
| Celadon | #92DE9E | rgb(146, 222, 158) | hsl(129, 54%, 72%) | oklch(83.4% 0.117 148) |
Why it works and how to use it
It works because the lightness range is wide (29% to 94%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Frost (#E9F5F2) is the lightest color, so it belongs on large surfaces.
- Text: Charcoal (#3F3E57) on #E9F5F2 gives 9.23:1, passing WCAG AAA.
- Primary: Celadon (#92DE9E) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Blue Gray (#4F90C2) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Charcoal on Frost at 9.23:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Bright Celadon & Blue Gray
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
#3F3E57
#4F90C2
#E9F5F2
#92DE9E
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#3F3E57 on #E9F5F2 | Aa | 9.23:1 | AAA |
#3F3E57 on #92DE9E | Aa | 6.46:1 | AA |
#4F90C2 on #E9F5F2 | Aa | 3.08:1 | AA large only |
#3F3E57 on #4F90C2 | Aa | 2.99:1 | Fail |
#4F90C2 on #92DE9E | Aa | 2.16:1 | Fail |
#E9F5F2 on #92DE9E | Aa | 1.43:1 | Fail |
Similar palettes 24 more in this mood
#FAFAFA
#E5E7EB
#10B981
#111827
#EDEEF0
#C9CCD1
#1D4ED8
#0B1220
#EA4A59
#8EC5FC
#E0C3FC
#FDFDFD
#EEF4FF
#92CEF9
#0090DA
#072E46
#D7263D
#FFFFFF
#F9C5D1
#2E7D5B
#1B4332
#52B788
#E9F5F0
#C9184A
#4A3222
#8B5E3C
#72D1FF
#FFF8EC
#1B6F73
#47B377
#F2CC8F
#F4F1DE
#D871CA
#0582CA
#F5F0E1
#F4A261
#929100
#8EC5FC
#E0C3FC
#FDFDFD
#FFFFFF
#E2E6E3
#059669
#111827
#1B4332
#52B788
#E9F5F0
#007F7E
#7A1C2E
#51851E
#E8D5B8
#F6EFE3
#EEF4FF
#A9C6FF
#4C7DFF
#1B2A49
#6E5700
#7EC26E
#CCFFE7
#FDFDFD
#121214
#5D6064
#B3CCFF
#E6EEFF
#F6FBEF
#A8CC7C
#6DB648
#336232
#3E4F93
#5467BE
#E7A03E
#F5EFE4
#0B3D91
#1E88E5
#FF9EDA
#CCFF90
#F5FFF1
#BDFFB9
#24D667
#103016
#272B17
#A3C167
#C8FF93
#F6FFEE
#007728
#5B6236
#D9D2B0
#F6F3E9
#FDFDFD
#E2E6E3
#009669
#49556F