Pristine Oceanic to Lilac color palette

00C8B6Pristine Oceanic 009CB1Rainy Mood B5AB00Muddy Yellow E73461Bat’s Blood Soup 008A49Later Gator CFA3FFLilac

Open in generator Export PNG, PDF, ASE…

About this palette

Pristine Oceanic to Lilac is a 6-color vibrant, cool palette: #00C8B6 (Pristine Oceanic), #009CB1 (Rainy Mood), #B5AB00 (Muddy Yellow), #E73461 (Bat’s Blood Soup), #008A49 (Later Gator), #CFA3FF (Lilac). It mixes turquoise, yellow, red, green, purple tones and feels cool overall. The strongest text pairing is #008A49 on #CFA3FF with a contrast ratio of 2.18:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pristine Oceanic	rgb(0, 200, 182)	hsl(175, 100%, 39%)
Rainy Mood	rgb(0, 156, 177)	hsl(187, 100%, 35%)
Muddy Yellow	rgb(181, 171, 0)	hsl(57, 100%, 35%)
Bat’s Blood Soup	rgb(231, 52, 97)	hsl(345, 79%, 55%)
Later Gator	rgb(0, 138, 73)	hsl(152, 100%, 27%)
Lilac	rgb(207, 163, 255)	hsl(269, 100%, 82%)

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.

Color blindness preview

CSS variables

/* Pristine Oceanic to Lilac — https://swatchly.xyz/palette/00c8b6-009cb1-b5ab00-e73461-008a49-cfa3ff */
:root {
  --pristine-oceanic: #00c8b6;
  --rainy-mood: #009cb1;
  --muddy-yellow: #b5ab00;
  --bat-s-blood-soup: #e73461;
  --later-gator: #008a49;
  --lilac: #cfa3ff;
}

Tailwind CSS v4

/* Pristine Oceanic to Lilac — https://swatchly.xyz/palette/00c8b6-009cb1-b5ab00-e73461-008a49-cfa3ff */
@theme {
  --color-pristine-oceanic: #00c8b6;
  --color-pristine-oceanic-50: #e9fffb;
  --color-pristine-oceanic-100: #c7fff5;
  --color-pristine-oceanic-200: #97f4e6;
  --color-pristine-oceanic-300: #70e2d2;
  --color-pristine-oceanic-400: #00c8b6;
  --color-pristine-oceanic-500: #00a697;
  --color-pristine-oceanic-600: #008579;
  --color-pristine-oceanic-700: #00695f;
  --color-pristine-oceanic-800: #00524a;
  --color-pristine-oceanic-900: #003e37;
  --color-pristine-oceanic-950: #002621;
  --color-rainy-mood: #009cb1;
  --color-rainy-mood-50: #e5fbff;
  --color-rainy-mood-100: #caf6ff;
  --color-rainy-mood-200: #9ae9f9;
  --color-rainy-mood-300: #77d5e7;
  --color-rainy-mood-400: #44b7cb;
  --color-rainy-mood-500: #009cb1;
  --color-rainy-mood-600: #007e8f;
  --color-rainy-mood-700: #006472;
  --color-rainy-mood-800: #004e59;
  --color-rainy-mood-900: #003c45;
  --color-rainy-mood-950: #00252b;
  --color-muddy-yellow: #b5ab00;
  --color-muddy-yellow-50: #fefbba;
  --color-muddy-yellow-100: #f6f2a9;
  --color-muddy-yellow-200: #e5e087;
  --color-muddy-yellow-300: #d1ca5f;
  --color-muddy-yellow-400: #b5ab00;
  --color-muddy-yellow-500: #968e00;
  --color-muddy-yellow-600: #797200;
  --color-muddy-yellow-700: #605a00;
  --color-muddy-yellow-800: #4a4600;
  --color-muddy-yellow-900: #393500;
  --color-muddy-yellow-950: #232000;
  --color-bat-s-blood-soup: #e73461;
  --color-bat-s-blood-soup-50: #fff1f2;
  --color-bat-s-blood-soup-100: #ffe3e5;
  --color-bat-s-blood-soup-200: #ffc5cb;
  --color-bat-s-blood-soup-300: #ffa1ac;
  --color-bat-s-blood-soup-400: #ff6380;
  --color-bat-s-blood-soup-500: #e73461;
  --color-bat-s-blood-soup-600: #c50249;
  --color-bat-s-blood-soup-700: #9f0038;
  --color-bat-s-blood-soup-800: #7e002b;
  --color-bat-s-blood-soup-900: #630020;
  --color-bat-s-blood-soup-950: #410012;
  --color-later-gator: #008a49;
  --color-later-gator-50: #deffe7;
  --color-later-gator-100: #c0fed2;
  --color-later-gator-200: #a4efba;
  --color-later-gator-300: #85dca1;
  --color-later-gator-400: #5abf7e;
  --color-later-gator-500: #34a562;
  --color-later-gator-600: #008a49;
  --color-later-gator-700: #006e39;
  --color-later-gator-800: #00562b;
  --color-later-gator-900: #004220;
  --color-later-gator-950: #002a12;
  --color-lilac: #cfa3ff;
  --color-lilac-50: #f5eeff;
  --color-lilac-100: #ede0ff;
  --color-lilac-200: #dfc4ff;
  --color-lilac-300: #cfa3ff;
  --color-lilac-400: #b086dd;
  --color-lilac-500: #966bc2;
  --color-lilac-600: #7b52a4;
  --color-lilac-700: #643e89;
  --color-lilac-800: #502e70;
  --color-lilac-900: #3f225a;
  --color-lilac-950: #28133c;
}