Glow Up Color Psychology & Meaning
Glow up is the before-after aesthetic of self-transformation — dark background with vibrant pink and gold signals that change is dramatic, visible, and worth celebrating.
#1A0A2E
#FF6B9D
#FFD166
#FFFFFF
Background
Primary Accent
Secondary
Body Text
Glow Up
darkvibranttransformative all beautylifestylesocial
AAA
WCAG Grade
18.6:1
Contrast Ratio
2,500
Saves
6,800
AI Copies
Use #1A0A2E as the background. Use #FF6B9D as the primary accent. Use #FFD166 as secondary. Use #FFFFFF as body text. Palette: Glow Up.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Glow Up 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.6% | 26, 10, 46 | 43%, 78%, 0%, 82% | 267°, 64%, 11% | ||
| Primary Accent Luminance: 34.2% | 255, 107, 157 | 0%, 58%, 38%, 0% | 340°, 100%, 71% | ||
| Secondary Luminance: 67.8% | 255, 209, 102 | 0%, 18%, 60%, 0% | 42°, 100%, 70% | ||
| Body Text Luminance: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% |
Color Harmony: Triadic Scheme
The Glow Up 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
The 'glow up' concept became a dominant social media trope around 2015-2020, particularly in beauty culture. Its visual grammar draws from before-after photography and transformation narrative.
Best Design Use Cases
Dark purple-black for backgrounds. Hot pink for primary transformation elements. Gold for achievement and highlights. White for content.
Industries This Palette Suits
Beauty brands, fitness transformation, personal development, social media content.
How to Implement the Glow Up Color Scheme
To use this Glow Up 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 #1A0A2E for the main background and #FF6B9D for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #FFFFFF and #1A0A2E is 18.64:1 (AAA). Ensure your body text remains legible.