ColorPaletteXYZ Logo
ColorPaletteXYZ
Palettes/Nature· Curated

Olympic Rainforest

Misty Pacific Northwest evergreen forest palette featuring moss greens, cedar boughs, and cool fog.

#Nature
Open in Generator
COLOR 1
#1C3127
Pine Needle
COLOR 2
#2D4A3E
Juniper
COLOR 3
#4E6E5D
Agate Green
COLOR 4
#8FA998
Laurel Green
COLOR 5
#DCE5DF
Gainsboro

Suitable Design Applications

Outdoor Gear OutfittersBotanical SanctuariesTrail Navigation AppsEnvironmental Non-Profits

Visual Psychology & Mood

Deep wilderness reverence, vitality, resilience, and clean air.

Editorial Application Advice

Lush moss, cedar bark, and filtered canopy sunlight. Natural, breathable greens calibrated for outdoor readability under varied lighting.

Recommended UI Role Architecture

Optimal visual hierarchy assignment for digital product interfaces:

Primary Canvas Background
#0D1711
Card & Elevated Surface
#17291F
Primary Brand CTA Accent
#22C55E
Secondary Accent & Focus
#84CC16
Typography & Headings
#F0FDF4

Color Values & Codes

HEX · RGB · HSL
rgb(28, 49, 39)hsl(151, 27%, 15%)Color details →
Juniper
#2D4A3E
rgb(45, 74, 62)hsl(155, 24%, 23%)Color details →
rgb(78, 110, 93)hsl(148, 17%, 37%)Color details →
rgb(143, 169, 152)hsl(141, 13%, 61%)Color details →
Gainsboro
#DCE5DF
rgb(220, 229, 223)hsl(140, 15%, 88%)Color details →

Open In Design Tools

Palette Generator
Lock & shuffle colors
Contrast Checker
Test WCAG compliance
Shades & Tints
Generate tonal steps
Nature Palettes
Explore category schemes

CSS Variables

Copy & paste directly into your stylesheet
:root {
  --color-1: #1C3127;
  --color-2: #2D4A3E;
  --color-3: #4E6E5D;
  --color-4: #8FA998;
  --color-5: #DCE5DF;
}

Role-Based WCAG Contrast Audit

Accessibility contrast depends on assigned UI roles. Here are the contrast ratios and WCAG compliance ratings when pairing palette colors as Foreground Text against Background surfaces:

Sample Text
#1C3127 on #8FA9985.47:1
Normal Text AA Pass
Sample Text
#1C3127 on #DCE5DF10.75:1
Normal Text AA Pass
Sample Text
#2D4A3E on #8FA9983.84:1
Large Text Only (Pass)
Sample Text
#2D4A3E on #DCE5DF7.55:1
Normal Text AA Pass
Sample Text
#4E6E5D on #8FA9982.23:1
Large Text Only (Fail)
Sample Text
#4E6E5D on #DCE5DF4.40:1
Large Text Only (Pass)

Related Palettes in Nature

Explore Nature
#022C22Copy
#065F46Copy
#10B981Copy
#6EE7B7Copy
#ECFDF5Copy
cp-featured-11Business
Fintech Emerald Vault
BusinessLuxuryNature
#3D1E16Copy
#773828Copy
#B85D3FCopy
#DD9675Copy
#F6DCC9Copy
cp-featured-23Nature
Deep Canyon Clay
NatureEarthy
#E8F8F5Copy
#D1F2EBCopy
#A3E4D7Copy
#48C9B0Copy
#16A085Copy
cp-featured-26Pastel
Mint Cream Sorbet
PastelFreshNature
#27246CCopy
#7131CFCopy
#E17AC9Copy
#E3CBB4Copy
#EFF5E8Copy
cp-0201Nature
Meadow Stone
NatureOrganicCalm

Frequently Asked Questions About Olympic Rainforest

Production design guidance and accessibility rules for applying the Olympic Rainforest (Nature) color palette.

What is the recommended role hierarchy for the Olympic Rainforest palette?
In digital interface design, allocate #1C3127 and #DCE5DF for structural surface canvas and typography hierarchy (the 60% and 30% layers of the design), while using standout swatches like #2D4A3E or #4E6E5D as your 10% primary action accent for buttons, badges, and interactive highlights.
Are the colors in Olympic Rainforest WCAG accessible for web body copy?
Always verify contrast ratios against WCAG 2.2 AA standards (minimum 4.5:1 for regular body copy and 3.0:1 for large text or graphical controls). Consult the Role-Based WCAG Contrast Audit section above to see exact scores for every foreground/background combination in this palette.
How can I export the Olympic Rainforest palette to my frontend codebase?
You can copy CSS Custom Properties directly from the CSS Variables code block above, export Tailwind CSS configuration tokens, download a high-resolution PNG card, or open the entire palette inside the interactive Palette Generator to experiment with tints and harmonies.