#90EBAA
#40B5B3
#4183B9
#F6F9EE
#DED871Citrine
#75B37BSage
#008F94Teal
#F6F9EESmoke
Leafy Citrine & Sage is a split color palette tagged summer, yellow, green. A split scheme: Citrine plays against Teal across roughly 125° of hue. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Citrine | #DED871 | rgb(222, 216, 113) | hsl(57, 62%, 66%) | oklch(86.6% 0.126 106) | |
| Sage | #75B37B | rgb(117, 179, 123) | hsl(126, 29%, 58%) | oklch(71.0% 0.103 147) | |
| Teal | #008F94 | rgb(0, 143, 148) | hsl(182, 100%, 29%) | oklch(59.0% 0.100 199) | |
| Smoke | #F6F9EE | rgb(246, 249, 238) | hsl(76, 48%, 95%) | oklch(97.7% 0.015 119) |
Why it works and how to use it
With 3 chromatic colors, Citrine takes the lead while the rest support. Lightness runs from 29% to 95%. Well suited to websites, presentations and branding.
- Background: Smoke (#F6F9EE) is the lightest color, so it belongs on large surfaces.
- Text: Teal (#008F94) on #F6F9EE gives 3.68:1, enough for large headings only.
- Primary: Citrine (#DED871) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Sage (#75B37B) 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 Leafy Citrine & Sage
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
#DED871
#75B37B
#008F94
#F6F9EE
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#008F94 on #F6F9EE | Aa | 3.68:1 | AA large only |
#DED871 on #008F94 | Aa | 2.64:1 | Fail |
#75B37B on #F6F9EE | Aa | 2.32:1 | Fail |
#DED871 on #75B37B | Aa | 1.67:1 | Fail |
#75B37B on #008F94 | Aa | 1.59:1 | Fail |
#DED871 on #F6F9EE | Aa | 1.39:1 | Fail |
Similar palettes 24 more in this mood
#74E1CF
#DDCA2D
#5FC588
#82B03D
#E8D677
#FEF9EF
#00C0CE
#4176A7
#736F00
#008F72
#938F00
#E3F6EF
#B5E48C
#52B69A
#168AAD
#F6F9EE
#F94144
#F3722C
#F9C74F
#90BE6D
#00B0CA
#79D213
#00ED9D
#58FDEE
#00C184
#64D2FC
#A9D875
#3DEEEC
#92A026
#39C137
#33CFA4
#2EDEE0
#B9A718
#FF8F59
#B2DC82
#FFC87F
#3EF58F
#7DCD20
#00BFC0
#00A78A
#90D241
#DCC321
#FFBC70
#00FBAF
#7B7100
#A29500
#00AF7D
#E5F3EC
#FFF1E2
#FFDAAF
#38CFD5
#004D5B
#00B58C
#AAC800
#F7D000
#87F88C
#00B4D8
#90E0EF
#FFD166
#1B1B1E
#914F00
#007D51
#CD7300
#DDF1E5
#968300
#40B35C
#8EB22C
#00FDCF
#F54D00
#E77E00
#E7D052
#7AC27F
#FF9A8B
#FFB4A2
#FFCDB2
#FFF1E6
#C3DDAE
#7DAD9D
#568598
#F7F8F2
#0077B6
#00B4D8
#90E0EF
#CAF0F8
#FFB703
#FB8500
#219EBC
#8ECAE6
#FFCB77
#FEF9EF
#17C3B2
#227C9D