#2D6A4F
#52B788
#95D5B2
#D8F3DC
#0B3D20Evergreen
#1F7A3FFern
#1CB3F8Cyan
#D8F3DCEggshell
Cyan & Fern Trail is a vivid split color palette tagged gradient, green. The hues span about 70°, enough contrast to create a focal point without the harshness of true complements. These are bold, punchy colors that need generous white space around them.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Evergreen | #0B3D20 | rgb(11, 61, 32) | hsl(145, 69%, 14%) | oklch(31.9% 0.073 153) | |
| Fern | #1F7A3F | rgb(31, 122, 63) | hsl(141, 59%, 30%) | oklch(51.3% 0.124 151) | |
| Cyan | #1CB3F8 | rgb(28, 179, 248) | hsl(199, 94%, 54%) | oklch(72.6% 0.151 236) | |
| Eggshell | #D8F3DC | rgb(216, 243, 220) | hsl(129, 53%, 90%) | oklch(93.8% 0.042 150) |
Why it works and how to use it
It works because the lightness range is wide (14% to 90%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Eggshell (#D8F3DC) is the lightest color, so it belongs on large surfaces.
- Text: Evergreen (#0B3D20) on #D8F3DC gives 10.44:1, passing WCAG AAA.
- Primary: Cyan (#1CB3F8) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Fern (#1F7A3F) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Evergreen on Eggshell at 10.44:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Cyan & Fern Trail
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
#0B3D20
#1F7A3F
#1CB3F8
#D8F3DC
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#0B3D20 on #D8F3DC | Aa | 10.44:1 | AAA |
#0B3D20 on #1CB3F8 | Aa | 5.2:1 | AA |
#1F7A3F on #D8F3DC | Aa | 4.54:1 | AA |
#0B3D20 on #1F7A3F | Aa | 2.3:1 | Fail |
#1F7A3F on #1CB3F8 | Aa | 2.26:1 | Fail |
#1CB3F8 on #D8F3DC | Aa | 2.01:1 | Fail |
Similar palettes 24 more in this mood
#00818A
#009D8C
#31CA88
#ACE496
#3F6D26
#9A8E38
#C4976A
#FFBAAD
#397700
#C88C00
#BCB600
#FFC9AC
#D9ED92
#99D98C
#52B69A
#168AAD
#1E4C30
#368861
#62B692
#B8DFCE
#498711
#00AA6D
#00C0AE
#00DDF3
#E2D900
#6EB659
#00A381
#006C74
#00705F
#9FB100
#4CE26B
#FBCF64
#807E00
#39AE20
#00C8A2
#FFBD4E
#655E00
#E69B00
#00E5A4
#9DF25C
#904F00
#8AC337
#D0C700
#EEBD58
#EFFFBE
#B4F5A7
#6ED1B4
#38A1C4
#0B3D20
#1F7A3F
#5FBF6A
#D8F3DC
#FFDBAE
#DFC460
#91AD64
#05927F
#2D6A4F
#65A5E7
#95D5B2
#D8F3DC
#506B57
#7AAA84
#B9F1BC
#E3F4E6
#004D4F
#008276
#4BBA86
#AAE1B7
#243A0E
#507418
#91B63F
#E2F0D3
#76872B
#76B469
#78DBBE
#B9EBFF
#6B4E00
#C99A00
#7DF59F
#FFF3C4
#423A00
#7A6700
#AA9A00
#E0E6B8
#5B3DF5
#8E6BFF
#FF8FB1
#FFD1DC
#437F63
#6CD0A0
#AAEAC7
#F0FFF2