Uwarp

Dark green color

Dark green is #006400. Copy the codes, shades, and contrast below.

Build shades

Codes

CSS keyword darkgreen resolves to this hex.

  • HEX#006400
  • RGB0, 100, 0
  • HSL120, 100%, 20%
  • CMYK100, 0, 100, 61

Shades and tints

Ten steps toward black, then ten toward white. The outlined stop is #006400.

  • 000A00

  • 001400

  • 001E00

  • 002800

  • 003200

  • 003C00

  • 004600

  • 005000

  • 005A00

  • Base

  • 1A741A

  • 338333

  • 4D934D

  • 66A266

  • 80B280

  • 99C199

  • B3D1B3

  • CCE0CC

  • E6F0E6

Palettes from this hex

Hue rotations of #006400. Open the scheme generator to edit a set.

Open scheme generator

  • Complementary

    • #006600
    • #660066

  • Analogous

    • #336600
    • #006600
    • #006633

  • Triadic

    • #006600
    • #000066
    • #660000

  • Tetradic

    • #006600
    • #003366
    • #660066
    • #663300

Contrast

Ratios use #006400 against white (#FFFFFF) and near-black (#161616). AA means 4.5:1 for body text.

Open contrast checker

  • On white

    7.44:1

    AAA

  • On near-black

    2.43:1

    Fails AA

  • White text on this color

    7.44:1

    AAA

  • Near-black text on this color

    2.43:1

    Fails AA

How to use dark green

CSS darkgreen is #006400. The keyword has no hyphen. Red and blue are zero and green is about 39 percent, so the color is a deep green rather than a blue-teal forest. It is the stylesheet answer to dark green color, and it is distinct from both emerald and sage.

White text on #006400 is readable for UI labels. Body text on white usually clears contrast, but thin weights can fail, so check the panel. This green is strong enough to dominate a layout. Use it for a header, a primary button, or a chart series, and keep surrounding surfaces neutral. Sage green is the grayed, lighter relative and should not share a component with dark green at a similar size. Emerald (#50C878) is brighter. Use emerald for a positive state and dark green for brand chrome if you need both. Tints of #006400 become a clear medium green, which is a better background for dark text than the base swatch.

Nearby colors

Frequently Asked Questions

Quick answers about this tool—open a question to read more.

Sources

Where this swatch and the CSS keyword note come from.