#5CBAA9
#5E99B8
#23737D
#356345
#9FD1B2Celadon
#65CAE2Sky Blue
#4D978FCadet
#0267A2Lapis
Lapis & Sky Blue Field is a analogous color palette tagged boho, cold, green. Analogous neighbors on the wheel (Celadon, Sky Blue, Cadet) give it a natural, low-tension flow. 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 | #9FD1B2 | rgb(159, 209, 178) | hsl(143, 35%, 72%) | oklch(81.7% 0.068 157) | |
| Sky Blue | #65CAE2 | rgb(101, 202, 226) | hsl(192, 68%, 64%) | oklch(78.7% 0.100 215) | |
| Cadet | #4D978F | rgb(77, 151, 143) | hsl(174, 32%, 45%) | oklch(62.6% 0.075 186) | |
| Lapis | #0267A2 | rgb(2, 103, 162) | hsl(202, 98%, 32%) | oklch(49.6% 0.123 244) |
Why it works and how to use it
It works because the lightness steps are gentle (32% to 72%), which keeps the mood consistent from edge to edge. Try it for websites, presentations and branding.
- Background: Celadon (#9FD1B2) is the lightest color, so it belongs on large surfaces.
- Text: Lapis (#0267A2) on #9FD1B2 gives 3.53:1, enough for large headings only.
- Primary: Sky Blue (#65CAE2) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Cadet (#4D978F) 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 Lapis & Sky Blue Field
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
#9FD1B2
#65CAE2
#4D978F
#0267A2
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#9FD1B2 on #0267A2 | Aa | 3.53:1 | AA large only |
#65CAE2 on #0267A2 | Aa | 3.2:1 | AA large only |
#9FD1B2 on #4D978F | Aa | 1.99:1 | Fail |
#65CAE2 on #4D978F | Aa | 1.81:1 | Fail |
#4D978F on #0267A2 | Aa | 1.77:1 | Fail |
#9FD1B2 on #65CAE2 | Aa | 1.1:1 | Fail |
Similar palettes 24 more in this mood
#117469
#4696A5
#73A381
#54A2D9
#8BEACA
#D0DC82
#E3BD60
#457042
#D4B693
#B18974
#8E974C
#896F00
#2E5499
#659699
#BF836B
#D8A282
#7F6000
#B8885D
#B3B96E
#AEE699
#63BDB2
#D88F7A
#3C7BAC
#966457
#FDC76A
#89E5C7
#91C987
#585932
#C8E385
#94D098
#A8875C
#89792D
#50663F
#906D43
#8DCEAE
#E2D57C
#00594C
#006D7A
#528556
#2786C2
#E6AB89
#33BED4
#8793B9
#79491B
#00C184
#64D2FC
#A9D875
#3DEEEC
#8AA944
#00967D
#007D82
#285A34
#90EBAA
#40B5B3
#4183B9
#F6F9EE
#D9ED92
#99D98C
#52B69A
#168AAD
#00480D
#005748
#007E8C
#5A96BD
#49715F
#00868F
#3FC7B6
#55CAF0
#63AEA6
#65CB9E
#82CEFA
#B7F3FF
#DFA7AC
#C1A3D3
#81A794
#3EA386
#003E41
#005E1A
#008C72
#3787A7
#7E4F5B
#EA8671
#D38BC5
#D5C3EE
#006325
#3CA081
#9EB57F
#18DAD3
#8DA689
#1EAE81
#009590
#575E24