Nature color palettes

Where nature palettes work

• Outdoor gear shops, hiking apps, and trail guides
• Garden, farm, and plant-based food brands
• Sustainability reports and environmental nonprofits
• Spa, retreat, and wellness booking pages

Natural greens lean yellow and grey

Pure greens make up less than a tenth of this collection. The biggest groups are yellow-greens and olives (#87a922, #b2b377), ochres and straw (#fda403, #ebc49f), and soft sage (#c6dcba, #adbc9f). Saturation averages about 55%, well below a screen green like #00ff00.

When you build a nature palette from scratch, move greens toward yellow and reduce their saturation. A slightly yellowed, greyed green such as #436850 usually reads more like foliage than a pure green does.

Forest palette, mapped

#12372a, #436850, #adbc9f, #fbfada is a complete light theme with no added colors.

• #fbfada as the page. #12372a for text at 12.32:1.
• #436850 for links and buttons: 5.93:1 as text on the page, 6.30:1 with white labels.
• #adbc9f for dividers, tags, and illustration. It is only 1.89:1 against the page, so it should not be the only edge of an input.

:root {
  --bg: #fbfada;
  --text: #12372a;
  --action: #436850;
  --muted: #adbc9f; /* decorative */
}

When green means two things

In most interfaces, green also signals success. If the brand color is green, success messages and primary buttons can look the same. Give success states an icon and wording, or use a noticeably different green for them.

Bright yellow-greens need care. In #114232, #87a922, #fcdc2a, #f7f6bb, white on #87a922 is 2.72:1, and the dark forest #114232 on it reaches only 4.18:1. Use the forest green for text on the lighter yellows instead: 8.33:1 on #fcdc2a.

Pairing the colors

Pair greens with an earth or sky color so the palette does not rely on one hue: forest with cream, sage with apricot, olive with straw. Decide which green is the brand color and which, if any, means success, and keep the two visibly different.

Contrast and readability

Green-on-green pairs measure lower than they look. In #d9edbf, #ff9800, #2c7865, #90d26d, the deep green #2c7865 is only 2.92:1 on #90d26d and 4.22:1 on the pale #d9edbf, though it holds white text at 5.27:1. In the forest set, #436850 on the sage #adbc9f is 3.14:1.

Questions

What colors go with sage green?

Cream and warm off-whites, dusty rose, and apricot. Examples from this collection: #b0c5a4 with #d37676 and #ebc49f, or #748e63 with #f9b572 and #faf8ed. Use a dark forest or brown for text, as sage is too light for it.

What colors go with olive green?

Amber, orange, and sand: the collection pairs olive #898121 with #fda403, #e8751a, and #e5c287. For a quieter set, use olive in a single-hue ramp such as #b2b377, #d2d180, #e5e483, #f1f5a8, and add a dark brown or forest for text.

Are nature palettes good for sustainability brands?

They are a common choice, which is a reason to differentiate. Since many green products look alike, consider leading with a non-green swatch from the palette, such as ochre or clay, and using green as the secondary color.