#006400

Darkgreen

Darkgreen is a vivid, fully saturated, very dark cool green (#006400).

Using Darkgreen in your designs

Darkgreen is a very dark, vivid, fully saturated take on green. Colors in this range are commonly associated with growth, nature and reassurance, which makes darkgreen a natural fit for success states, environmental themes and finance products.

With a 7.44:1 contrast ratio against white, darkgreen is dark enough to carry white text at any size — use it confidently for buttons, headers and filled UI elements. It is also dark enough to serve as a background in a dark theme, where lighter tints of darkgreen can act as hover and border states.

For pairings, the complement of darkgreen sits at 300° — #660066, close to purple — and delivers the strongest possible hue contrast; use it sparingly, in roughly a 90/10 split, so the two don't fight. For calmer schemes, the analogous colors 30° to either side keep the same cool temperature, while the triadic pair gives you a balanced three-color palette. All of these are computed for darkgreen in the palettes below, with copy-ready codes.

Darkgreen color palettes

Every palette below is computed from darkgreen's position on the color wheel (hue 120°). Hover any swatch to see its code; click to copy.

Complementary

Analogous

Triadic

Split-complementary

Tetradic

Monochromatic

Tints and shades of Darkgreen

Tints mix darkgreen toward white; shades mix it toward black. Use the scale for hover states, borders and depth without leaving the hue.

Shades → base → tints

Contrast & accessibility

WCAG 2.1 requires 4.5:1 for normal text (AA) and 3:1 for large text. Here's how darkgreen performs, plus how it appears under the three main types of dichromatic color blindness (simulated approximation).

Pairing	Ratio	Normal text	Large text
White text on Darkgreen	`7.44:1`	AAA	AAA
Black text on Darkgreen	`2.82:1`	Fail	Fail

Protanopia#2B2C18

Deuteranopia#261E1E

Tritanopia#052B30

Darkgreen in code

Copy-ready snippets. In CSS you can also use the keyword darkgreen directly.

:root {
  --darkgreen: #006400;
  --darkgreen-rgb: 0, 100, 0;
  --darkgreen-tint: #73AA73;
  --darkgreen-shade: #003700;
}

.btn-darkgreen {
  background: var(--darkgreen);
  color: #ffffff;
}

Tailwind CSS v4

@import "tailwindcss";

@theme {
  --color-darkgreen: #006400;
  --color-darkgreen-light: #73AA73;
  --color-darkgreen-dark: #003700;
}

Generate a complete ramp and semantic roles in the Tailwind color generator.

Tailwind CSS v3 — extend your theme

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        darkgreen: { DEFAULT: "#006400", light: "#73AA73", dark: "#003700" }
      }
    }
  }
};

Colors similar to Darkgreen

The closest CSS named colors by perceptual (Lab) distance.

green#008000 · ΔE 15

forestgreen#228B22 · ΔE 16

olivedrab#6B8E23 · ΔE 25

seagreen#2E8B57 · ΔE 27

darkolivegreen#556B2F · ΔE 28

mediumseagreen#3CB371 · ΔE 34

← Previousdarkgray Next →darkkhaki

Copied