What are the hex codes in the Deep Sea Fern & Hunter Green palette?

The Deep Sea Fern & Hunter Green color palette consists of Charcoal #004C5C, Hunter Green #4C5E14, Fern #2B7C4D, Teal #3E837B.

How should I use the Deep Sea Fern & Hunter Green palette on a website?

Use Teal #3E837B as the background, Charcoal #004C5C for text, Hunter Green #4C5E14 for buttons and links, and Fern #2B7C4D for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Deep Sea Fern & Hunter Green have enough contrast for text?

The highest-contrast pair is #004C5C on #3E837B with a ratio of 2.16:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#004C5CCharcoal

#4C5E14Hunter Green

#2B7C4DFern

#3E837BTeal

Deep Sea Fern & Hunter Green color palette

Ocean Cold Teal Green

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Charcoal	`#004C5C`	`rgb(0, 76, 92)`	`hsl(190, 100%, 18%)`	`oklch(38.5% 0.069 218)`
Hunter Green	`#4C5E14`	`rgb(76, 94, 20)`	`hsl(75, 65%, 22%)`	`oklch(45.2% 0.099 123)`
Fern	`#2B7C4D`	`rgb(43, 124, 77)`	`hsl(145, 49%, 33%)`	`oklch(52.4% 0.108 154)`
Teal	`#3E837B`	`rgb(62, 131, 123)`	`hsl(173, 36%, 38%)`	`oklch(56.3% 0.071 185)`

Why it works and how to use it

Deep Sea Fern & Hunter Green is a vivid dark, split color palette tagged ocean, cold, teal. A split scheme: Charcoal plays against Teal across roughly 115° of hue. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is cool.

With 4 chromatic colors, Hunter Green takes the lead while the rest support. Lightness runs from 18% to 38%. Well suited to dark-mode interfaces and gaming.

Background: Teal (#3E837B) is the lightest color, so it belongs on large surfaces.
Text: Charcoal (#004C5C) on #3E837B gives 2.16:1, so pair it with a darker neutral for body copy.
Primary: Hunter Green (#4C5E14) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Fern (#2B7C4D) 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 Deep Sea Fern & Hunter Green

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#004C5C

#4C5E14

#2B7C4D

#3E837B

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#004C5C` on `#3E837B`	Aa	2.16:1	Fail
`#004C5C` on `#2B7C4D`	Aa	1.87:1	Fail
`#4C5E14` on `#3E837B`	Aa	1.62:1	Fail
`#4C5E14` on `#2B7C4D`	Aa	1.4:1	Fail
`#004C5C` on `#4C5E14`	Aa	1.33:1	Fail
`#2B7C4D` on `#3E837B`	Aa	1.16:1	Fail

:root {
  --charcoal: #004C5C;
  --hunter-green: #4C5E14;
  --fern: #2B7C4D;
  --teal: #3E837B;
}

$charcoal: #004C5C;
$hunter-green: #4C5E14;
$fern: #2B7C4D;
$teal: #3E837B;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'charcoal': '#004C5C',
        'hunter-green': '#4C5E14',
        'fern': '#2B7C4D',
        'teal': '#3E837B',
      },
    },
  },
};

{
  "name": "Deep Sea Fern & Hunter Green",
  "colors": [
    "#004C5C",
    "#4C5E14",
    "#2B7C4D",
    "#3E837B"
  ]
}

background: linear-gradient(135deg, #004C5C, #4C5E14, #2B7C4D, #3E837B);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-12-10 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood