Dark green is a deep shade of green located between cyan and green on the color wheel. Due to its earthy and grounding qualities, this hue is commonly associated with feelings of growth, abundance, and success.
Dark green is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #06402B
- RGB value: 2.4% red, 25.1% green, and 16.9% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are some ways to use dark green in your designs:
- Convey a natural feel. When combined with neutral tones like brown, cream, or beige, dark green can create an earthy color palette, great for UIs offering organic or eco-friendly products.
- Promote exclusivity. A dark green background can create a sophisticated atmosphere, ideal for promoting high-end products or memberships. Use white text to ensure readability and colors like gold to enhance the luxurious aesthetic.
- Signify success states. Use dark green to signify positive user actions and statuses, like progress bars, checkmarks, or success messages. Pair it with a light green shade or complementary color for hover states, giving a clear visual cue that the element is interactive and clickable.
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same bold spectrum as dark green, consider:
- Forest green (#2E6F40) is lighter and cooler because it has a touch more blue.
- Hunter green (#2C5F34) leans more yellow, capturing the essence of a lush forest.
- Emerald green (#00674F) has a jewel-toned appearance with blue undertones.
- Olive green (#636B2F) has more visible yellow undertones with a similar natural appeal.
To complement dark green, consider pairing it with:
- Beige (#EDE8D0) provides warmth to soften dark green’s deep hue.
- Chocolate (#713600) brings richness to create an earthy yet elegant color combination.
- Mustard yellow (#FFCE1B) can add a pop of brightness and playfulness when paired with dark green.
- Soft pink (#E89EB8) adds a soft contrast to create a romantic color pairing.
- Maroon (#550000) shares a similar depth for a dramatic and moody color scheme.
Other colors worth considering include navy blue for a sophisticated pairing, cool gray to add a touch of brightness, and sage for an organic feel.
While dark green is deep, it may clash with:
- Magenta (#FD3DB5) is highly saturated and may appear visually jarring next to dark green.
- Purple (#9D00FF) creates a harsh contrast with little visual appeal.
- Neon green (#2CFF05) has an intensity that can overwhelm dark green’s richness.
- Silver (#C4C4C4) in large quantities can create a cold and sterile atmosphere when paired with dark green.
Dark green symbolizes growth, abundance, and luxury. It also carries connotations of wealth and success but can sometimes signify greed and envy.
In color psychology, dark green can evoke feelings of groundedness. Its deep hue and connection to nature offer a sense of balance and stability while encouraging new beginnings.
In UI design, dark green can create a luxurious interface as a primary color or an organic feel when paired with other natural hues. Use it as a feedback color within progress bars, checkboxes, or other UI elements that confirm user actions.
Ancient Egyptians used malachite, a copper-based green pigment, in tomb paintings to symbolize the afterlife and resurrection. The Romans also used another popular green pigment, verdigris, in paintings and murals. Eventually, the advancements in pigments led to the creation of dark green and other deep green shades.
Today, dark green is used in fashion, UI design, and interior spaces to create a calming or luxurious atmosphere, showcasing its versatility.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Malachite
Woodland
Emerald Serenity
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
11.82:1
WCAG 2.2 Simple Contrast
Normal Text
- Pass
- AA
- 4.5:1
- Pass
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Pass
- AAA
- 4.5:1
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
1.78:1
WCAG 2.2 Simple Contrast
Normal Text
- Fail
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Fail
- AA
- 3:1
- Fail
- AAA
- 4.5:1
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #06402B, known as dark green, has RGB values of R:6 G:64, B:43 and CMYK values of C:0.91, M:0, Y:0.33, K:0.75.
| VALUE | CSS | |
|---|---|---|
| HEX | 06402B | #06402B |
| RGB DECIMAL | 6, 64, 43 | RGB(6,64,43) |
| RGB PERCENTAGE | 2.4, 25.1, 16.9 | RGB(2.4%,25.1%,16.9%) |
| CMYK | 91, 0, 33, 7 | |
| HSL | 158.3°, 82.9, 13.7 | HSL(158.3°,82.9%,13.7%) |
| HSV (OR HSB) | 158.3°, 90.6, 25.1 | |
| WEB SAFE | 003333 | #003333 |
| CIE-LAB | 23.27, -23.72, 7.905 | |
| XYZ | 2.344, 3.88, 2.911 | |
| xyY | 0.257, 0.425, 3.88 | |
| CIE-LCH | 23.27, 25.003, 161.568 | |
| CIE-LUV | 23.27, -18.897, 10.807 | |
| HUNTER-LAB | 19.697, -13.224, 5.026 | |
| BINARY | 00000110, 01000000, 00101011 | |
| iOS - SwiftUI | Color(red: 0.024, green: 0.251, blue: 0.169) | |
| iOS - UIKit | UIColor(red: 0.024, green: 0.251, blue: 0.169, alpha: 1) | |
| Android - Compose | Color(0xFF06402B) |
