#8A6800
#84A347
#00C38B
#56E7F4
#264653Charcoal
#2A9D8FCadet
#26B36CJade
#F4A261Cantaloupe
Jade & Cantaloupe Glow is a complementary color palette tagged modern, teal, green. Near-complementary hues (about 170° apart) make this a high-contrast, attention-grabbing combination. 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 |
|---|---|---|---|---|---|
| Charcoal | #264653 | rgb(38, 70, 83) | hsl(197, 37%, 24%) | oklch(37.5% 0.044 226) | |
| Cadet | #2A9D8F | rgb(42, 157, 143) | hsl(173, 58%, 39%) | oklch(63.0% 0.101 183) | |
| Jade | #26B36C | rgb(38, 179, 108) | hsl(150, 65%, 43%) | oklch(67.8% 0.156 155) | |
| Cantaloupe | #F4A261 | rgb(244, 162, 97) | hsl(27, 87%, 67%) | oklch(78.1% 0.127 58) |
Why it works and how to use it
The palette holds together thanks to its complementary hue relationship and a soft light-to-dark ladder (67% down to 24% lightness). A natural fit for websites, presentations and branding.
- Background: Cantaloupe (#F4A261) is the lightest color, so it belongs on large surfaces.
- Text: Charcoal (#264653) on #F4A261 gives 4.89:1, passing WCAG AA.
- Primary: Jade (#26B36C) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Cadet (#2A9D8F) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Charcoal on Cantaloupe at 4.89:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Jade & Cantaloupe Glow
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
#264653
#2A9D8F
#26B36C
#F4A261
Color-blind check: under protanopia and tritanopia, Jade and Cantaloupe become hard to tell apart, so do not rely on that pair alone to carry meaning.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#264653 on #F4A261 | Aa | 4.89:1 | AA |
#264653 on #26B36C | Aa | 3.72:1 | AA large only |
#264653 on #2A9D8F | Aa | 3.03:1 | AA large only |
#2A9D8F on #F4A261 | Aa | 1.61:1 | Fail |
#26B36C on #F4A261 | Aa | 1.32:1 | Fail |
#2A9D8F on #26B36C | Aa | 1.23:1 | Fail |
Similar palettes 24 more in this mood
#00818A
#009D8C
#31CA88
#ACE496
#ACB100
#FFB347
#0A9396
#F8F8F8
#00616A
#4DA27C
#98AA55
#FFCA7B
#498711
#00AA6D
#00C0AE
#00DDF3
#A07200
#59964F
#8E9100
#44E9BE
#EDC27E
#B1C06C
#4A8E67
#006364
#00735C
#379879
#7DC5A6
#81E3CC
#1B6F73
#47B377
#F2CC8F
#F4F1DE
#E2D900
#6EB659
#00A381
#006C74
#1B4332
#52B788
#E9F5F0
#007F7E
#002124
#008375
#4FBA83
#ACE1B5
#5B7F3A
#9BB868
#E9C46A
#008F7A
#ECF6FF
#55BFDE
#C35430
#2B2213
#00BEC9
#FFB347
#0A9396
#F8F8F8
#002318
#00E076
#45DAE9
#E3E3E3
#F9FFFC
#34FF8D
#5EEDFD
#343434
#00A6A6
#7DD8D8
#00C57C
#FDFDFD
#037B03
#F2C14E
#2E9CA6
#F4EBD9
#2A9D8F
#8AB17D
#E9C46A
#7CCE88
#0F5C63
#2A8A8C
#9FD3CF
#F2F1EA
#0B0C10
#00AB70
#05D9E8
#D1F7FF
#222831
#575D65
#00ADB5
#EEEEEE
#003628
#008074
#DD8D4C
#E9E2CF