handl_ /lab/palette-generator
← All tools

Palette for light and dark mode

Enter one brand colour. We generate shades 50 to 950 from it and show which of them are readable on both light and dark backgrounds.

In light mode, use shade 700 or darker for buttons with white text. In dark mode switch to shade 500 with dark text.

50
white 1,1 dark 16,7 ✓
100
white 1,2 dark 15,2 ✓
200
white 1,4 dark 12,6 ✓
300
white 1,8 dark 9,9 ✓
400
white 2,4 dark 7,5 ✓
500
white 3,0 dark 6,0 ✓
600
white 4,1 dark 4,4
700
white 5,7 ✓ dark 3,1
800
white 8,7 ✓ dark 2,1
900
white 13,0 ✓ dark 1,4
950
white 17,9 ✓ dark 1,0

Light mode

New A new version of the app is out See what is new and try it free for 14 days.
Try it free What is new
  • Text on a card 950 / 50 ✓ 16,7 : 1
  • Secondary text 800 / 50 ✓ 8,1 : 1
  • White text on a button white / 700 ✓ 5,7 : 1
  • Button outline 700 / 50 ✓ 5,3 : 1

Dark mode

New A new version of the app is out See what is new and try it free for 14 days.
Try it free What is new
  • Text on a card 50 / 900 ✓ 12,1 : 1
  • Secondary text 200 / 900 ✓ 9,1 : 1
  • Dark text on a button 950 / 500 ✓ 6,0 : 1
  • Button outline 500 / 900 ✓ 4,4 : 1
Export to CSS (light and dark mode) 
:root {
  --c-50: #fff5f0;
  --c-100: #ffe8db;
  --c-200: #ffceb3;
  --c-300: #ffae80;
  --c-400: #ff8742;
  --c-500: #ff630a;
  --c-600: #db5000;
  --c-700: #b34100;
  --c-800: #853000;
  --c-900: #572000;
  --c-950: #1f150f;

  --bg: #ffffff;
  --surface: var(--c-50);
  --text: var(--c-950);
  --text-muted: var(--c-800);
  --accent: var(--c-700);
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--c-950);
    --surface: var(--c-900);
    --text: var(--c-50);
    --text-muted: var(--c-200);
    --accent: var(--c-500);
    --on-accent: var(--c-950);
  }
}

Why you can’t just invert a colour

A shade that works as a button on white is usually too dark on a dark background. In dark mode lighter shades of the same colour are used instead.

A tinted background instead of pure black

A dark mode with a background gently tinted towards the brand colour (shade 950) feels softer and is less tiring for the eyes than #000.

How to read the numbers on the shades

The contrast of a shade against a white and a dark (950) background; ✓ means it passes for body text. Body text needs at least 4.5 : 1, large text and icons 3 : 1.