Create Dark Mode Color Palettes
Generate light and dark variants of your color palette for building dark mode support.
Dark Mode tips
Generate a shades palette and use the light end (high lightness) for light mode text, dark end for dark mode backgrounds, and mid-tones for accents.
For dark mode, desaturate slightly (lower the S value in HSL) and increase lightness for text. Pure saturated colors on dark backgrounds are hard to read.
The shades palette's 7-step scale maps naturally to dark mode: steps 1–3 for backgrounds, 4 for borders, 5–7 for text — and reverse for light mode.
Always check contrast ratios after generating your palette. Use the Color Converter tool to get RGB values for contrast ratio checking.
Conas a Oibríonn sé
Cén fáth ár gceann a úsáid?
Also check out…
Generate Color Palettes for Web Design
Create harmonious color schemes for websites, web
Create Brand Color Palettes
Develop a complete brand color system from a singl
Generate Color Palettes for Art and Illustration
Create harmonious color combinations for digital a
Generate Color Styles for Figma
Create color palettes to use as Figma Color Styles