Trail Running Color Psychology & Meaning
Trail running is the palette of dirt paths and dawn light through forest canopy — these greens and creams are the colors of moving through nature at speed.
#1A2010
#4A6A28
#98C860
#F0E8D0
Background
Primary Accent
Secondary
Body Text
Trail Running
naturalenergeticoutdoor all sportoutdoorbranding
AAA
WCAG Grade
13.6:1
Contrast Ratio
2,200
Saves
5,900
AI Copies
Use #1A2010 as the background. Use #4A6A28 as the primary accent. Use #98C860 as secondary. Use #F0E8D0 as body text/supporting color. Palette mood: Trail Running — natural, energetic, outdoor.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Trail Running color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 1.3% | 26, 32, 16 | 19%, 0%, 50%, 87% | 83°, 33%, 9% | ||
| Primary Accent Luminance: 11.9% | 74, 106, 40 | 30%, 0%, 62%, 58% | 89°, 45%, 29% | ||
| Secondary Luminance: 48.8% | 152, 200, 96 | 24%, 0%, 52%, 22% | 88°, 49%, 58% | ||
| Body Text Luminance: 80.8% | 240, 232, 208 | 0%, 3%, 13%, 6% | 45°, 52%, 88% |
Color Harmony: Custom Scheme
The Trail Running palette is built using a custom relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A custom palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Trail running has grown from a niche sport to a mainstream activity, with dedicated gear brands (Salomon, Hoka, Inov-8) developing distinct visual identities connecting performance to nature.
Best Design Use Cases
Dark forest green for backgrounds. Mid green for surfaces and brand elements. Bright trail-green for interactive elements. Warm cream for text on dark.
Industries This Palette Suits
Trail running brands, outdoor sports, athletics, natural performance, running communities.
How to Implement the Trail Running Color Scheme
To use this Trail Running color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #1A2010 for the main background and #4A6A28 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #F0E8D0 and #1A2010 is 13.64:1 (AAA). Ensure your body text remains legible.