Cool palette

Tidepool

Green teal shallows going clear. Every step here can hold text on the one below.

5 colors · 6 of 20 pairs carry body text

Cool

#004A08

very dark intense green

#007144

dark intense spring green

#499C8A

mid soft spring green

#73C1CE

light soft cyan

#BBF2FF

very light intense cyan

CSS

:root {
  --tidepool-1: #004a08;
  --tidepool-2: #007144;
  --tidepool-3: #499c8a;
  --tidepool-4: #73c1ce;
  --tidepool-5: #bbf2ff;
}

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

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.

6 of 20 pairs reach 4.5:1

Contrast ratio of every color in this palette against every other.
On ↓ / text →	#004A08	#007144	#499C8A	#73C1CE	#BBF2FF
#004A08	Same	1.74	3.23	5.17	8.7
#007144	1.74	Same	1.86	2.97	5.01
#499C8A	3.23	1.86	Same	1.6	2.69
#73C1CE	5.17	2.97	1.6	Same	1.68
#BBF2FF	8.7	5.01	2.69	1.68	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.