Shades & UI Hierarchy Guide - Master gray scale design, visual hierarchy, and professional interface systems
Gray is the most versatile tool in a designer's kit. It defines the Visual Hierarchy of a website—using different shades of gray allows users to distinguish between primary headers, secondary text, and disabled buttons. In 2026, we see a move toward "Warm Grays" (Greige) to add a human touch to digital interfaces.
Cool Grays (with blue undertones) project modernism and efficiency, often used in SaaS and FinTech. Warm Grays (with brown/yellow undertones) feel organic and inviting, perfect for e-commerce and wellness platforms.
Blue undertones create a modern, efficient feel
Best for: Tech SaaS, FinTech, Corporate
Brown/yellow undertones add organic warmth
Best for: E-commerce, Wellness, Lifestyle
5-step gray scale for visual depth
Cool grays for SaaS interfaces
Warm grays (Greige) for organic feel
Professional and balanced - perfect for corporate UI
#708090
rgb(112, 128, 144)
hsl(210, 13%, 50%)
Best Use Cases:
Reflective and premium - adds elegance to designs
#C0C0C0
rgb(192, 192, 192)
hsl(0, 0%, 75%)
Best Use Cases:
Modern and efficient - ideal for tech interfaces
#909090
rgb(144, 144, 144)
hsl(0, 0%, 56%)
Best Use Cases:
Organic and inviting - human touch to digital interfaces
#B8A99A
rgb(184, 169, 154)
hsl(30, 17%, 66%)
Best Use Cases:
Smoke
#F5F5F5
Platinum
#E0E0E0
Light Gray
#D3D3D3
Silver
#C0C0C0
Dark Gray
#A9A9A9
Gray
#808080
Dim Gray
#696969
Medium Gray
#505050
Deep Gray
#404040
Charcoal
#303030
Dark Charcoal
#202020
Near Black
#101010
Header backgrounds
linear-gradient(135deg, #2D3748 0%, #718096 100%)Card overlays
linear-gradient(180deg, #4A5568 0%, #A0AEC0 100%)Organic backgrounds
linear-gradient(135deg, #6B5B52 0%, #C4B8AC 100%)Premium accents
linear-gradient(135deg, #C0C0C0 0%, #E8E8E8 100%)#FFFFFF
Clean contrast - minimalist appeal
#000000
Bold statement - dramatic effect
#000080
Corporate - professional trust
#8B4513
Earthy - organic warmth
Gray represents balance, neutrality, and compromise. It sits between black and white, creating a bridge between extremes.
Gray conveys professionalism, maturity, and authority. It's widely used in corporate environments to communicate stability.
Silver and cool grays suggest sophistication and high-end quality. They're associated with luxury brands and premium experiences.
Cool grays dominate modern tech design, representing innovation, efficiency, and forward-thinking approaches.
Create a gray scale with 5-9 shades from near-white to near-black. Use them consistently for text, borders, backgrounds, and disabled states.
Choose cool grays (blue-tinted) for tech/finance. Use warm grays (Greige) for lifestyle, wellness, and e-commerce brands.
Use gray shades to establish hierarchy: darker for headings, medium for body text, lighter for metadata and captions.
Pure 50% gray (#808080) can appear flat. Add subtle warmth or coolness to your grays for more natural, appealing results.
| Color Name | HEX | RGB | HSL | Contrast on White |
|---|---|---|---|---|
| Slate Gray | #708090 | rgb(112, 128, 144) | hsl(210, 13%, 50%) | AA |
| Silver | #C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) | AA |
| Cool Gray | #909090 | rgb(144, 144, 144) | hsl(0, 0%, 56%) | AA |
| Warm Gray (Greige) | #B8A99A | rgb(184, 169, 154) | hsl(30, 17%, 66%) | AA |
.gray-scale {
/* 5-step corporate gray scale */
background: linear-gradient(135deg, #2D3748 0%, #CBD5E0 100%);
}.tech-gray {
/* Cool gray for SaaS interfaces */
background: linear-gradient(180deg, #4A5568 0%, #A0AEC0 100%);
}.warm-gray {
/* Greige - warm gray for organic feel */
background: linear-gradient(135deg, #6B5B52 0%, #C4B8AC 100%);
}Gray is the foundation of visual hierarchy. Use it strategically to guide users through your interface.
Discover our complete collection of color guides with HEX codes, palettes, and design inspiration.