Ethereum Color Psychology & Meaning
Ethereum's medium blue on dark navy is the palette of programmable money — serious enough for financial infrastructure, expressive enough to signal an ecosystem of innovation.
#1B1B3A
#627EEA
#FFFFFF
#A0A8C0
Background
Primary Accent
Secondary
Body Text
Ethereum
darktechnicalpremium all cryptotechbranding
AAA
WCAG Grade
7.0:1
Contrast Ratio
3,000
Saves
8,100
AI Copies
Use #1B1B3A as the background. Use #627EEA as the primary accent. Use #FFFFFF as secondary. Use #A0A8C0 as body text. Palette: Ethereum.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Ethereum 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% | 27, 27, 58 | 53%, 53%, 0%, 77% | 240°, 36%, 17% | ||
| Primary Accent Luminance: 23.5% | 98, 126, 234 | 58%, 46%, 0%, 8% | 228°, 76%, 65% | ||
| Secondary Luminance: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% | ||
| Body Text Luminance: 39.3% | 160, 168, 192 | 17%, 13%, 0%, 25% | 225°, 20%, 69% |
Color Harmony: Triadic Scheme
The Ethereum palette is built using a triadic relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A triadic palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Ethereum launched in 2015 and its visual identity has been refined over multiple years. The specific blue value was chosen to differentiate from Bitcoin's gold while maintaining technological authority.
Best Design Use Cases
Dark navy for all backgrounds. Medium blue for primary elements. White for content. Blue-gray for secondary info.
Industries This Palette Suits
Ethereum ecosystem, DeFi, NFTs, blockchain development, smart contracts.
How to Implement the Ethereum Color Scheme
To use this Ethereum 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 #1B1B3A for the main background and #627EEA for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #A0A8C0 and #1B1B3A is 7.00:1 (AAA). Ensure your body text remains legible.