#0086A6
#4D9184
#37A8F6
#00CCD6
#7F9A6DMoss
#009C99Cadet
#3F7283Storm
#1F4E3AEvergreen
Reef Cadet & Moss is a dark, split color palette tagged ocean, cold, teal. A split scheme: Moss plays against Evergreen across roughly 99° of hue. 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 |
|---|---|---|---|---|---|
| Moss | #7F9A6D | rgb(127, 154, 109) | hsl(96, 18%, 52%) | oklch(65.3% 0.071 133) | |
| Cadet | #009C99 | rgb(0, 156, 153) | hsl(179, 100%, 31%) | oklch(62.6% 0.107 192) | |
| Storm | #3F7283 | rgb(63, 114, 131) | hsl(195, 35%, 38%) | oklch(52.3% 0.061 222) | |
| Evergreen | #1F4E3A | rgb(31, 78, 58) | hsl(154, 43%, 21%) | oklch(38.5% 0.062 163) |
Why it works and how to use it
The palette holds together thanks to its split hue relationship and a soft light-to-dark ladder (52% down to 21% lightness). A natural fit for dark-mode interfaces and gaming.
- Background: Moss (#7F9A6D) is the lightest color, so it belongs on large surfaces.
- Text: Evergreen (#1F4E3A) on #7F9A6D gives 3.05:1, enough for large headings only.
- Primary: Cadet (#009C99) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Storm (#3F7283) 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 Reef Cadet & Moss
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
#7F9A6D
#009C99
#3F7283
#1F4E3A
Color-blind check: under protanopia, Moss and Cadet 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 |
|---|---|---|---|
#7F9A6D on #1F4E3A | Aa | 3.05:1 | AA large only |
#009C99 on #1F4E3A | Aa | 2.81:1 | Fail |
#3F7283 on #1F4E3A | Aa | 1.79:1 | Fail |
#7F9A6D on #3F7283 | Aa | 1.71:1 | Fail |
#009C99 on #3F7283 | Aa | 1.58:1 | Fail |
#7F9A6D on #009C99 | Aa | 1.09:1 | Fail |
Similar palettes 24 more in this mood
#00545D
#006E7A
#00C4CE
#3BD9F9
#004345
#008991
#00B9B8
#00D4CE
#9DE8D2
#00B1B8
#2E7940
#273400
#96BAFE
#8F7CCD
#00939A
#005D7F
#00646F
#0080B9
#7192FF
#DFCFFF
#313965
#005561
#14A9FE
#E5D2FD
#2BEDFF
#11C2D0
#008087
#00494B
#D4D2FF
#9FCBEC
#2F59BD
#006B81
#00D8D7
#6075BF
#00596C
#00436D
#014D71
#267CB2
#5CA9E7
#B7E6FF
#004C5C
#4C5E14
#2B7C4D
#3E837B
#68709B
#9271DA
#639EC2
#84B8FF
#002E6E
#1A73D4
#6D93E8
#9DC6FF
#BEB6FF
#5596F8
#0099C7
#774384
#A3E3FF
#4EB2E1
#006DA5
#003F59
#4B537A
#892680
#1CA6FF
#D1B6F9
#0E3B4A
#1F7A8C
#8FD5D2
#EAF7F5
#0077B6
#00B4D8
#90E0EF
#CAF0F8
#03256C
#2541B2
#1768AC
#06BEE1
#006D77
#83C5BE
#EDF6F9
#FFDDD2
#00A8A8
#4FD1C5
#B2F5EA
#F0FFF4
#023E8A
#0077B6
#00B4D8
#90E0EF
#0B3954
#087E8B
#BFD7EA
#FFFFFF