Solarpunk Color Psychology & Meaning
Solarpunk is optimistic futurism — renewable energy, living buildings, community gardens, and bright skies. It says: the future can be green and joyful.
#2D6A4F
#FFD166
#06D6A0
#FFFFFF
Background
Primary Accent
Secondary
Body Text
Solarpunk
earthyvibrantcool springsummer brandingweb
AA
WCAG Grade
6.4:1
Contrast Ratio
2,134
Saves
5,892
AI Copies
Use #2D6A4F as the background. Use #FFD166 as the primary accent. Use #06D6A0 as secondary. Use #FFFFFF as body text/supporting color. Palette mood: Solarpunk — earthy, vibrant, cool.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Solarpunk 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: 11.4% | 45, 106, 79 | 58%, 0%, 25%, 58% | 153°, 40%, 30% | ||
| Primary Accent Luminance: 67.8% | 255, 209, 102 | 0%, 18%, 60%, 0% | 42°, 100%, 70% | ||
| Secondary Luminance: 50.7% | 6, 214, 160 | 97%, 0%, 25%, 16% | 164°, 95%, 43% | ||
| Body Text Luminance: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% |
Color Harmony: Split-Complementary Scheme
The Solarpunk palette is built using a split-complementary relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A split-complementary palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Solarpunk emerged as a literary and visual aesthetic around 2014 as a reaction to dystopian sci-fi. It imagines technology and nature in harmony.
Best Design Use Cases
Deep forest green as the grounding color. Bright yellow for solar energy and optimism. Teal for water and technology. White for air and possibility.
Industries This Palette Suits
Sustainability brands, renewable energy, urban farming, activism.
How to Implement the Solarpunk Color Scheme
To use this Solarpunk 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 #2D6A4F for the main background and #FFD166 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #FFFFFF and #2D6A4F is 6.39:1 (AA). Ensure your body text remains legible.