Midnight Ocean Color Psychology & Meaning
Midnight ocean is the 3am sea — no horizon visible, just the gradation from absolute black to deep blue. Something vast is happening below the surface.
#000A14
#0A2A4A
#0A5A8A
#1A90BF
Background
Primary Accent
Secondary
Body Text
Midnight Ocean
darkdeepmysterious winterautumn brandingwellnesstech
AA
WCAG Grade
5.5:1
Contrast Ratio
2,100
Saves
5,500
AI Copies
Use #000A14 as the background. Use #0A2A4A as the primary accent. Use #0A5A8A as secondary. Use #1A90BF as body text/supporting color. Palette mood: Midnight Ocean — dark, deep, mysterious.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Midnight Ocean 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: 0.3% | 0, 10, 20 | 100%, 50%, 0%, 92% | 210°, 100%, 4% | ||
| Primary Accent Luminance: 2.2% | 10, 42, 74 | 86%, 43%, 0%, 71% | 210°, 76%, 16% | ||
| Secondary Luminance: 9.2% | 10, 90, 138 | 93%, 35%, 0%, 46% | 203°, 86%, 29% | ||
| Body Text Luminance: 23.9% | 26, 144, 191 | 86%, 25%, 0%, 25% | 197°, 76%, 43% |
Color Harmony: Analogous Scheme
The Midnight Ocean palette is built using a analogous relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A analogous palette is often preferred by professional designers because it creates a calm, serene atmosphere by using neighboring colors.
History & Design Context
Deep ocean imagery has been used in wellness, science, and tech branding to signal depth of thinking and the mystery of unexplored territories.
Best Design Use Cases
Near-black for backgrounds. Very dark blue for surfaces. Deep ocean blue for cards. Bright blue for interactive and accent elements. White for content.
Industries This Palette Suits
Ocean conservation, wellness apps, deep research, premium tech, maritime brands.
How to Implement the Midnight Ocean Color Scheme
To use this Midnight Ocean 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 #000A14 for the main background and #0A2A4A for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #1A90BF and #000A14 is 5.49:1 (AA). Ensure your body text remains legible.