ToolQuilt
Dark palette

Harbour Night

Deep blues with enough separation to keep panels distinct in a dark theme.

5 colors · 6 of 20 pairs carry body text

Dark

#183538

very dark soft cyan

#426071

dark muted azure

#6C8BAD

mid muted azure

#9FB2DF

light soft azure

#DEE0FF

very light intense blue

CSS

:root {
  --harbour_night-1: #183538;
  --harbour_night-2: #426071;
  --harbour_night-3: #6c8bad;
  --harbour_night-4: #9fb2df;
  --harbour_night-5: #dee0ff;
}

Drop these into :root and reference them anywhere. The names follow the palette so a second palette will not collide with this one.

Take it further

This palette is a starting point. Open it in the generator to change the harmony rule, lock the colors you like and shuffle the rest.

Open in the palette generator Check the first pair for contrast

Which color can sit on which

6 of 20 pairs reach 4.5:1

On ↓ / text → #183538#426071#6C8BAD#9FB2DF#DEE0FF
#183538 Same 1.96 3.7 6.17 10.1
#426071 1.96 Same 1.89 3.15 5.16
#6C8BAD 3.7 1.89 Same 1.67 2.73
#9FB2DF 6.17 3.15 1.67 Same 1.64
#DEE0FF 10.1 5.16 2.73 1.64 Same

Read a row as the background and a column as the text on it. Anything at 4.5:1 or above carries body text; 3:1 covers large text and interface parts.

More dark palettes