Ocean Solarpunk Color Psychology & Meaning
Ocean solarpunk imagines tidal power and floating kelp farms and cities built on the water with the humility of people who know they are guests on a living planet.
#0A2A3A
#00C8A8
#60E8D0
#F0FFFA
Background
Primary Accent
Secondary
Body Text
Ocean Solarpunk
hopefuloceanicfuturistic all sustainabilitytechbranding
AAA
WCAG Grade
14.5:1
Contrast Ratio
1,900
Saves
5,100
AI Copies
Use #0A2A3A as the background. Use #00C8A8 as the primary accent. Use #60E8D0 as secondary. Use #F0FFFA as body text. Palette: Ocean Solarpunk.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Ocean 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: 2.0% | 10, 42, 58 | 83%, 28%, 0%, 77% | 200°, 71%, 13% | ||
| Primary Accent Luminance: 44.1% | 0, 200, 168 | 100%, 0%, 16%, 22% | 170°, 100%, 39% | ||
| Secondary Luminance: 64.8% | 96, 232, 208 | 59%, 0%, 10%, 9% | 169°, 75%, 64% | ||
| Body Text Luminance: 96.9% | 240, 255, 250 | 6%, 0%, 2%, 0% | 160°, 100%, 97% |
Color Harmony: Custom Scheme
The Ocean Solarpunk 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
Ocean solarpunk draws from floating architecture concepts, tidal and wave energy technology, and speculative visions of coastal communities adapting to sea-level rise with grace.
Best Design Use Cases
Very dark ocean for backgrounds. Bright teal for interactive and brand. Light teal for secondary. Near-white for content.
Industries This Palette Suits
Ocean tech, sustainability, climate adaptation, marine innovation brands.
How to Implement the Ocean Solarpunk Color Scheme
To use this Ocean 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 #0A2A3A for the main background and #00C8A8 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #F0FFFA and #0A2A3A is 14.51:1 (AAA). Ensure your body text remains legible.