Glassomorphism Color Psychology & Meaning
Glassomorphism is the aesthetic of frosted glass over gradient backgrounds — the semi-transparent white panels with blue tones signal modern, layered interface design.
#F0F4FF
#FFFFFF
#6688CC
#2244AA
Background
Primary Accent
Secondary
Body Text
Glassomorphism
modernsofttech all webappdesign
AAA
WCAG Grade
7.7:1
Contrast Ratio
2,400
Saves
6,400
AI Copies
Use #F0F4FF as the background. Use #FFFFFF as the primary accent. Use #6688CC as secondary. Use #2244AA as body text/supporting color. Palette mood: Glassomorphism — modern, soft, tech.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Glassomorphism 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: 90.4% | 240, 244, 255 | 6%, 4%, 0%, 0% | 224°, 100%, 97% | ||
| Primary Accent Luminance: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% | ||
| Secondary Luminance: 24.8% | 102, 136, 204 | 50%, 33%, 0%, 20% | 220°, 50%, 60% | ||
| Body Text Luminance: 7.4% | 34, 68, 170 | 80%, 60%, 0%, 33% | 225°, 67%, 40% |
Color Harmony: Triadic Scheme
The Glassomorphism 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
Glassmorphism became a major UI trend following Apple's Big Sur (2020) which heavily featured frosted glass elements. It represents a reaction against flat design's lack of depth.
Best Design Use Cases
Light blue-white for primary surfaces. Pure white for elevated card elements (with transparency). Blue for interactive elements. Deep blue for text.
Industries This Palette Suits
App design, SaaS, Apple ecosystem products, modern web design, tech startups.
How to Implement the Glassomorphism Color Scheme
To use this Glassomorphism 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 #F0F4FF for the main background and #FFFFFF for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #2244AA and #F0F4FF is 7.71:1 (AAA). Ensure your body text remains legible.