#03071E
#0B525B
#1B998B
#C2F970
#D1DEADOat
#34EBFFAqua
#006354Spruce
#0D4A1FEvergreen
Lagoon Aqua & Evergreen is a vivid split color palette tagged cold, teal, green. A split scheme: Oat plays against Evergreen across roughly 110° of hue. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Oat | #D1DEAD | rgb(209, 222, 173) | hsl(76, 43%, 77%) | oklch(87.8% 0.066 120) | |
| Aqua | #34EBFF | rgb(52, 235, 255) | hsl(186, 100%, 60%) | oklch(86.2% 0.139 206) | |
| Spruce | #006354 | rgb(0, 99, 84) | hsl(171, 100%, 19%) | oklch(44.7% 0.083 178) | |
| Evergreen | #0D4A1F | rgb(13, 74, 31) | hsl(138, 70%, 17%) | oklch(36.0% 0.093 149) |
Why it works and how to use it
It works because the lightness range is wide (17% to 77%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Oat (#D1DEAD) is the lightest color, so it belongs on large surfaces.
- Text: Evergreen (#0D4A1F) on #D1DEAD gives 7.32:1, passing WCAG AAA.
- Primary: Aqua (#34EBFF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Spruce (#006354) for highlights, badges and hover states.
4 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Oat on Evergreen at 7.32:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Lagoon Aqua & Evergreen
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
#D1DEAD
#34EBFF
#006354
#0D4A1F
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#D1DEAD on #0D4A1F | Aa | 7.32:1 | AAA |
#34EBFF on #0D4A1F | Aa | 7.18:1 | AAA |
#D1DEAD on #006354 | Aa | 5.07:1 | AA |
#34EBFF on #006354 | Aa | 4.97:1 | AA |
#006354 on #0D4A1F | Aa | 1.44:1 | Fail |
#D1DEAD on #34EBFF | Aa | 1.02:1 | Fail |
Similar palettes 24 more in this mood
#0B3D2E
#00FF87
#60EFFF
#FFFFFF
#00B0CA
#79D213
#00ED9D
#58FDEE
#00C184
#64D2FC
#A9D875
#3DEEEC
#00818A
#009D8C
#31CA88
#ACE496
#8AA944
#00967D
#007D82
#285A34
#5CBAA9
#5E99B8
#23737D
#356345
#9DE8D2
#00B1B8
#2E7940
#273400
#90EBAA
#40B5B3
#4183B9
#F6F9EE
#D9ED92
#99D98C
#52B69A
#168AAD
#008B6D
#6C8B38
#00CFCB
#86D894
#336416
#00637F
#316B55
#01F2F4
#00480D
#005748
#007E8C
#5A96BD
#414945
#256C00
#00899C
#6CFFF2
#92A026
#39C137
#33CFA4
#2EDEE0
#498711
#00AA6D
#00C0AE
#00DDF3
#3EF58F
#7DCD20
#00BFC0
#00A78A
#63AEA6
#65CB9E
#82CEFA
#B7F3FF
#AAB755
#70B874
#00707A
#004336
#00735C
#379879
#7DC5A6
#81E3CC
#00B9DB
#6EBD62
#00CEC9
#7EFFCE
#003E41
#005E1A
#008C72
#3787A7
#006325
#3CA081
#9EB57F
#18DAD3
#004C5C
#4C5E14
#2B7C4D
#3E837B