Cool palette

Lagoon

A cool base with two warm escapes, for when one accent is never quite enough.

Lagoon swatches

5 colors · 4 of 20 pairs carry body text

Cool

#002D36

very dark intense cyan

#8B1C42

dark vivid rose

#9B6D25

dark vivid orange

#0BA9C6

mid intense cyan

#FF87A6

light intense rose

CSS

:root {
  --lagoon-1: #002d36;
  --lagoon-2: #8b1c42;
  --lagoon-3: #9b6d25;
  --lagoon-4: #0ba9c6;
  --lagoon-5: #ff87a6;
}

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

4 of 20 pairs reach 4.5:1

Contrast ratio of every color in this palette against every other.
On ↓ / text → #002D36#8B1C42#9B6D25#0BA9C6#FF87A6
#002D36 Same 1.64 3.23 5.25 6.49
#8B1C42 1.64 Same 1.97 3.2 3.96
#9B6D25 3.23 1.97 Same 1.63 2.01
#0BA9C6 5.25 3.2 1.63 Same 1.23
#FF87A6 6.49 3.96 2.01 1.23 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.