Green Dynasty to Pristine Oceanic color palette

009A89Green Dynasty FFD0DBLight Pink 713259Grape 002920Swamp Thing 00D4BDPristine Oceanic

About this palette

Green Dynasty to Pristine Oceanic is a 5-color cool, vintage palette: #009A89 (Green Dynasty), #FFD0DB (Light Pink), #713259 (Grape), #002920 (Swamp Thing), #00D4BD (Pristine Oceanic). It mixes turquoise, pink, red tones and feels cool overall. The strongest text pairing is #FFD0DB on #002920 with a contrast ratio of 11.43:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Green Dynasty	rgb(0, 154, 137)	hsl(173, 100%, 30%)
Light Pink	rgb(255, 208, 219)	hsl(346, 100%, 91%)
Grape	rgb(113, 50, 89)	hsl(323, 39%, 32%)
Swamp Thing	rgb(0, 41, 32)	hsl(167, 100%, 8%)
Pristine Oceanic	rgb(0, 212, 189)	hsl(173, 100%, 42%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa11.43:1 Very good#FFD0DB on #002920
Aa11.43:1 Very good#002920 on #FFD0DB
Aa8.33:1 Very good#002920 on #00D4BD
Aa8.33:1 Very good#00D4BD on #002920
Aa6.64:1 Good#FFD0DB on #713259
Aa6.64:1 Good#713259 on #FFD0DB
Aa4.84:1 Good#713259 on #00D4BD
Aa4.84:1 Good#00D4BD on #713259

Color blindness preview

CSS variables

/* Green Dynasty to Pristine Oceanic — https://swatchly.xyz/palette/009a89-ffd0db-713259-002920-00d4bd */
:root {
  --green-dynasty: #009a89;
  --light-pink: #ffd0db;
  --grape: #713259;
  --swamp-thing: #002920;
  --pristine-oceanic: #00d4bd;
}

Tailwind CSS v4

/* Green Dynasty to Pristine Oceanic — https://swatchly.xyz/palette/009a89-ffd0db-713259-002920-00d4bd */
@theme {
  --color-green-dynasty: #009a89;
  --color-green-dynasty-50: #d7fff7;
  --color-green-dynasty-100: #b8faed;
  --color-green-dynasty-200: #98e9da;
  --color-green-dynasty-300: #74d4c4;
  --color-green-dynasty-400: #42b6a4;
  --color-green-dynasty-500: #009a89;
  --color-green-dynasty-600: #007c6e;
  --color-green-dynasty-700: #006357;
  --color-green-dynasty-800: #004d44;
  --color-green-dynasty-900: #003c34;
  --color-green-dynasty-950: #002620;
  --color-light-pink: #ffd0db;
  --color-light-pink-50: #fff8f9;
  --color-light-pink-100: #ffebf0;
  --color-light-pink-200: #ffd0db;
  --color-light-pink-300: #e1bbc4;
  --color-light-pink-400: #c399a3;
  --color-light-pink-500: #a67c86;
  --color-light-pink-600: #89616b;
  --color-light-pink-700: #6f4a54;
  --color-light-pink-800: #573840;
  --color-light-pink-900: #442a31;
  --color-light-pink-950: #2c191e;
  --color-grape: #713259;
  --color-grape-50: #fff0f8;
  --color-grape-100: #ffe2f1;
  --color-grape-200: #fbc2e2;
  --color-grape-300: #e7a7cb;
  --color-grape-400: #c883ab;
  --color-grape-500: #aa668e;
  --color-grape-600: #8a4b71;
  --color-grape-700: #713259;
  --color-grape-800: #572745;
  --color-grape-900: #451d35;
  --color-grape-950: #2c1021;
  --color-swamp-thing: #002920;
  --color-swamp-thing-50: #e4fbf4;
  --color-swamp-thing-100: #d8f2ea;
  --color-swamp-thing-200: #c1e0d6;
  --color-swamp-thing-300: #a7cabf;
  --color-swamp-thing-400: #84ab9f;
  --color-swamp-thing-500: #699084;
  --color-swamp-thing-600: #50766b;
  --color-swamp-thing-700: #3c5f55;
  --color-swamp-thing-800: #2c4b43;
  --color-swamp-thing-900: #203b34;
  --color-swamp-thing-950: #002920;
  --color-pristine-oceanic: #00d4bd;
  --color-pristine-oceanic-50: #c1fff3;
  --color-pristine-oceanic-100: #9cf9e8;
  --color-pristine-oceanic-200: #73e7d4;
  --color-pristine-oceanic-300: #00d4bd;
  --color-pristine-oceanic-400: #00b29f;
  --color-pristine-oceanic-500: #009584;
  --color-pristine-oceanic-600: #00796b;
  --color-pristine-oceanic-700: #006055;
  --color-pristine-oceanic-800: #004c43;
  --color-pristine-oceanic-900: #003c35;
  --color-pristine-oceanic-950: #002620;
}