Olive Green Color: Hex Code, Palettes & Meaning | Figma (2024)

Home

Colors

Olive green

Everything you need to know about olive green to inspire your next design.

Launch in Figma Now

Read about Olive green

Pick a palette type

What color is olivegreen?

Olive green is a complex and muted color with an earthy, subdued appearance. Positioned in the green section of the color wheel, it leans towards yellow, giving it a distinctly warm, natural tone. This particular shade captures the essence of olive green, reminiscent of dark mossgreen.

Olive Green Color: Hex Code, Palettes & Meaning | Figma (1)Olive Green Color: Hex Code, Palettes & Meaning | Figma (2)

What does olive green look like on digital screens?

Olive green is defined by the following color codes and values to ensure consistency across various digital platforms anddevices.

- HEX code: #636B2F

- RGB value: 38.8% red, 42% green and18.4%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.

How should I effectively use olive green in UIdesign?

To effectively use olive green in UI design, consider these approaches:

  • Convey stability and growth. Olive green, with its earthy and natural undertones, is excellent for health, wellness, and sustainability platforms. Use it to create a stable and reassuring atmosphere.
  • Enhance usability in outdoor apps. Olive green's association with the outdoors resonates well with audiences seeking adventure and connection withnature.
  • Use for backgrounds or themes. Use olive green for backgrounds or themes to evoke a sense of serenity and focus. Its muted tones can reduce eye strain, making digital spaces comfortable forbrowsing.
  • Complement with earth tones. Pair olive green with earth tones like browns, tans, and deep reds to create a cohesive, grounded design. This palette can enhance the user experience by bringing warmth and a sense of welcome to your digitalspace.

What are similar colors to olivegreen?

For variations within the same earthy and muted spectrum as olive green, consider:

  • Moss Green (#8A9A5B) shares olive green's connection to nature, presenting a slightly lighter and more vibrant hue reminiscent of moss-covered stones.
  • Khaki (#F0E68C) offers a lighter, more neutral version, retaining the earthy quality with a softer, more subduedtone.
  • Dark Olive Green (#556B2F) is closer to olive green, providing a deeper and more intense version that emphasizes the color's naturaldepth.
  • Sage (#B2C495) introduces a hint of gray, resulting in a muted green that complements olive green's understated elegance.

What colors go with olivegreen?

To complement olive green's grounded tones, consider pairing itwith:

  • Cream (#FDFBD4) provides a soft contrast, enhancing olive green's natural warmth with its light, airypresence.
  • Rust (#B7410E) introduces a rich, warm earth tone, offering a striking yet harmonious contrast to the subdued coolness ofolivegreen.
  • Navy Blue (#000080) offers a deep, sophisticated contrast, amplifying olive green's earthiness with a touch of classic elegance.
  • Burnt Sienna (#ED7B58) adds a warm, vibrant touch, creating a cozy and inviting palette that complements olive green's rusticcharm.
  • Soft Beige (#F5F5DC) creates a neutral backdrop that allows the richness of olive green to stand out, grounding the palette in natural simplicity.

Other colors worth considering include charcoal gray for a modern, chic look, soft lavender for a gentle, contrasting pop of color, and terracotta for a warm, earthy vibe that enhances the natural qualities ofolivegreen.

What colors conflict with olivegreen?

While olive green is versatile, it mayclashwith:

  • Bright Pink (#FFC0CB) can be too stark and vibrant, potentially overwhelming olive green's natural subtlety, leading to a discordant visualeffect.
  • Electric Blue (#00F0FF), with its intense vibrancy, may detract from olive green's earthy warmth, creating a jarring contrast.
  • Neon Yellow (#CCFF00) presents a high-intensity hue that can overshadow olive green's muted, natural essence.
  • Deep Purple (#800080), though rich and regal, might compete too strongly with olive green, overshadowing its natural serenity.
  • Lime Green (#89F336), being much brighter and more saturated, can create a visually unsettling combination with olive green's mutedtones.

What does olive green symbolize?

Olive green symbolizes peace and tranquility, rooted in the ancient tradition of offering an olive branch as a sign of harmony. Its earthy tones reflect stability, endurance, and resilience, echoing the olive tree's ability to thrive under harsh conditions. In military contexts, olive green stands for honor, wisdom, and dedication, showcasing the values of service andcommitment.

The color psychology of olive green ties to its natural undertones, fostering feelings of balance and renewal. It creates a grounded, secure environment, often enhancing well-being and stability. Olive green's link to the earth and sustainability identifies it as a color of eco-consciousness.

The calming effect of olive green and its connection to nature make it perfect for UI design in wellness apps, eco-friendly platforms, and digital spaces aiming to promote harmony and natural living. Olive green's ties to authenticity and reliability means it’s also an excellent choice for brands desiring to appear trustworthy and committed to environmental stewardship.

What’s the history of olivegreen?

The term olive, denoting the fruit, entered Middle English in the 14th century from the ancient Greek elaia. It wasn't until the 1600s that the term olive green, inspired by the hue of unripe olives, was recognized inEnglish.

Olive green became a staple in military attire in the 19th century. Its muted tones were ideal for camouflage, helping soldiers blend in with their surroundings. Although the U.S. military transitioned to a “woodland” camouflage pattern in 1981, countries like Israel, Cuba, India, Venezuela, and Austria continue to use olive drab foruniforms.

Olive green has been embraced in fashion, design, and art, reflecting evolving attitudes toward environmentalism and peace. Artists like Claude Monet and Thomas Wilmer Dewing explored its versatility in works like "Bridge Over a Pond of Water Lilies" (1899) and "Symphony in Green and Gold" (1912), showcasing the color's capacity to convey depth and natural beauty in landscapes and abstract compositions.

Color variations

Shades

Tints

Tones

Hues

Color harmonies

Complementary

Analogous

Monochromatic

Split

Triadic

Square

Custom palettes

Mossy Hollow

Enchanted Glade

Olive Branch

Accessibility

Contrast checker

Large Text
Figma
Normal Text
How you design, align, and build matters. Do it together with Figma.

5.71:1

WCAG 2.2 Simple Contrast

Normal Text

Pass
AA
4.5:1

Fail
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.

3.67:1

WCAG 2.2 Simple Contrast

Normal Text

Fail
AA
4.5:1

Fail
AAA
7:1

Large Text

Pass
AA
3:1

Fail
AAA
4.5:1

Color simulations

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

Color conversion

The hexadecimal color #636b2f, known as olive green, has RGB values of R:99, G:107, B:47 and CMYK values of C:0.07, M:0, Y:0.56,K:0.58.

VALUECSS
HEX636B2F#636B2F
RGB DECIMAL99, 107, 47rgb(99,107,47)
RGB PERCENTAGE38.8, 42, 18.4rgb(38.8%,42%,18.4%)
CMYK7, 0, 56, 58
HSL68°, 39, 30.2hsl(68,39%,30.2%)
HSV (OR HSB)68°, 56.1, 42
WEB SAFE666633#666633
CIE-LAB43.32, -12.649, 32.142
XYZ10.916, 13.373, 4.695
xyY0.377, 0.461, 13.373
CIE-LCH43.32, 34.541, 111.482
CIE-LUV43.32, -2.417, 36.701
HUNTER-LAB36.57, -10.713, 17.986
BINARY01100011, 01101011, 00101111
iOS - SwiftUIColor(red: 99/255, green: 107/255, blue: 47/255)
iOS - UIKitUIColor(red: 99/255.0, green: 107/255.0, blue: 47/255.0, alpha: 1.0)
Android - ComposeColor(0xFF636B2F)

Keep learning

Figma color wheelWant to find the perfect complementary or analogous colors to match olive green?Learn moreNavy BlueLearn more about the color navy blue.Learn moreMint greenLearn more about mint green.Learn more
Olive Green Color: Hex Code, Palettes & Meaning | Figma (2024)
Top Articles
Latest Posts
Article information

Author: Stevie Stamm

Last Updated:

Views: 5942

Rating: 5 / 5 (60 voted)

Reviews: 91% of readers found this page helpful

Author information

Name: Stevie Stamm

Birthday: 1996-06-22

Address: Apt. 419 4200 Sipes Estate, East Delmerview, WY 05617

Phone: +342332224300

Job: Future Advertising Analyst

Hobby: Leather crafting, Puzzles, Leather crafting, scrapbook, Urban exploration, Cabaret, Skateboarding

Introduction: My name is Stevie Stamm, I am a colorful, sparkling, splendid, vast, open, hilarious, tender person who loves writing and wants to share my knowledge and understanding with you.