Design · Framework
uxdam Shades of Gray — Light vs. Dark Mode Palette
Matched gray color palette cheat sheet for light and dark UI modes
This reference palette pairs five light-mode neutral tones with five corresponding dark-mode tones, complete with hex values. It helps designers quickly map background, surface, and border levels across inverted interface themes.
The framework
Light Mode: White 60 #BFC6D4; White 70 #D1D6E0; White 80 #E0E4EB; White 90 #F0F1F5; White 100 #FFFFFF. Dark Mode: Black 60 #667085; Black 70 #4E5766; Black 80 #37404F; Black 90 #202531; Black 100 #0A0E15.
What it's for
- Map interface surface elevations between light and dark themes
- Set up neutral color tokens in design systems or CSS variables
- Pick balanced neutral backgrounds for UI card and container components
Key points
- Light-mode scale: White 60 (#BFC6D4) to White 100 (#FFFFFF)
- Dark-mode scale: Black 60 (#667085) to Black 100 (#0A0E15)
- Paired step-by-step contrast scaling (60 to 100)
- Subtle cool undertones for modern interface styling
Pricing
Free
Details
- Type
- Framework
- Category
- Design
- Topic
- Color Palettes
- Open source
- No
- Platforms
- other
- For
- UI/UX designers and frontend developers
- Tags
- colors, dark mode, light mode, design tokens, ui design, palette
Why it was saved
- @UiSavior: Gives ready, matched hex values for building gray scales that work across light and dark themes.
Related
Fast color palette generator, scheme explorer, and contrast tool for designers.
Brand design reference guide explaining color theory and color spaces.
AI-powered color scheme generator that previews palettes on UI templates
Four ready-to-use 4-color palettes with hex codes for branding and design
Curated accent and neutral hex color palette for dark-themed designs
Create a cohesive UI palette from one brand color using opacity overlays
Updated