# 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 is 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](https://xiry.app/topics/design.md)
- Topic: [Color Palettes](https://xiry.app/topics/design/color-palettes.md)
- 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, 9 September 2025](https://x.com/UiSavior/status/1965332921705005331): Gives ready, matched hex values for building gray scales that work across light and dark themes.

## Related

- [Coolors](https://xiry.app/resources/coolors): Fast color palette generator, scheme explorer, and contrast tool for designers. (Web app, Freemium)
- [A Guide to Choosing Color Palette for Brand](https://xiry.app/resources/a-guide-to-choosing-color-palette-for-brand): Brand design reference guide explaining color theory and color spaces. (Article or course, Free)
- [Colormind](https://xiry.app/resources/colormind): AI-powered color scheme generator that previews palettes on UI templates (Web app, Free)
- [Curated Graphic Design Color Palettes](https://xiry.app/resources/curated-graphic-design-color-palettes): Four ready-to-use 4-color palettes with hex codes for branding and design (Tip, Free)
- [Kalypso's Dark-Mode Design Color Palette](https://xiry.app/resources/kalypso-s-dark-mode-design-color-palette): Curated accent and neutral hex color palette for dark-themed designs (Tip, Free)
- [Single-Color UI Palette Overlay Technique](https://xiry.app/resources/single-color-ui-palette-overlay-technique): Create a cohesive UI palette from one brand color using opacity overlays (Tip, Free)

Updated 11 October 2026. Page: https://xiry.app/resources/uxdam-shades-of-gray-light-vs-dark-mode-palette

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.