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.
Hoe dit werk
Hoekom ons gebruik?
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