True Sky Blue to Olive color palette

00A3B5True Sky Blue E63CFCEpink 00CDBFPristine Oceanic FF9884Mona Lisa 8033E8Hokkaido Lavender 848700Olive

Open in generator Export PNG, PDF, ASE…

About this palette

True Sky Blue to Olive is a 6-color vibrant, cool, neon palette: #00A3B5 (True Sky Blue), #E63CFC (Epink), #00CDBF (Pristine Oceanic), #FF9884 (Mona Lisa), #8033E8 (Hokkaido Lavender), #848700 (Olive). It mixes turquoise, pink, purple, yellow tones and feels cool overall. The strongest text pairing is #00CDBF on #8033E8 with a contrast ratio of 2.95:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
True Sky Blue	rgb(0, 163, 181)	hsl(186, 100%, 35%)
Epink	rgb(230, 60, 252)	hsl(293, 97%, 61%)
Pristine Oceanic	rgb(0, 205, 191)	hsl(176, 100%, 40%)
Mona Lisa	rgb(255, 152, 132)	hsl(10, 100%, 76%)
Hokkaido Lavender	rgb(128, 51, 232)	hsl(266, 80%, 55%)
Olive	rgb(132, 135, 0)	hsl(61, 100%, 26%)

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

/* True Sky Blue to Olive — https://swatchly.xyz/palette/00a3b5-e63cfc-00cdbf-ff9884-8033e8-848700 */
:root {
  --true-sky-blue: #00a3b5;
  --epink: #e63cfc;
  --pristine-oceanic: #00cdbf;
  --mona-lisa: #ff9884;
  --hokkaido-lavender: #8033e8;
  --olive: #848700;
}

Tailwind CSS v4

/* True Sky Blue to Olive — https://swatchly.xyz/palette/00a3b5-e63cfc-00cdbf-ff9884-8033e8-848700 */
@theme {
  --color-true-sky-blue: #00a3b5;
  --color-true-sky-blue-50: #e7fcff;
  --color-true-sky-blue-100: #cef8ff;
  --color-true-sky-blue-200: #9decf9;
  --color-true-sky-blue-300: #7ad9e8;
  --color-true-sky-blue-400: #48bdce;
  --color-true-sky-blue-500: #00a3b5;
  --color-true-sky-blue-600: #008392;
  --color-true-sky-blue-700: #006874;
  --color-true-sky-blue-800: #00515a;
  --color-true-sky-blue-900: #003e45;
  --color-true-sky-blue-950: #00262b;
  --color-epink: #e63cfc;
  --color-epink-50: #fdecff;
  --color-epink-100: #fbdaff;
  --color-epink-200: #f7b8ff;
  --color-epink-300: #f28dff;
  --color-epink-400: #e63cfc;
  --color-epink-500: #c800de;
  --color-epink-600: #a300b5;
  --color-epink-700: #830091;
  --color-epink-800: #680074;
  --color-epink-900: #52005c;
  --color-epink-950: #36003d;
  --color-pristine-oceanic: #00cdbf;
  --color-pristine-oceanic-50: #b1fff5;
  --color-pristine-oceanic-100: #97f5ea;
  --color-pristine-oceanic-200: #6de2d6;
  --color-pristine-oceanic-300: #00cdbf;
  --color-pristine-oceanic-400: #00aca1;
  --color-pristine-oceanic-500: #009086;
  --color-pristine-oceanic-600: #00756d;
  --color-pristine-oceanic-700: #005e57;
  --color-pristine-oceanic-800: #004b46;
  --color-pristine-oceanic-900: #003c37;
  --color-pristine-oceanic-950: #002622;
  --color-mona-lisa: #ff9884;
  --color-mona-lisa-50: #ffece7;
  --color-mona-lisa-100: #ffdcd5;
  --color-mona-lisa-200: #ffbeb0;
  --color-mona-lisa-300: #ff9884;
  --color-mona-lisa-400: #dc7b69;
  --color-mona-lisa-500: #c1604e;
  --color-mona-lisa-600: #a34837;
  --color-mona-lisa-700: #873426;
  --color-mona-lisa-800: #6f2619;
  --color-mona-lisa-900: #591b10;
  --color-mona-lisa-950: #3b0e07;
  --color-hokkaido-lavender: #8033e8;
  --color-hokkaido-lavender-50: #f6f3ff;
  --color-hokkaido-lavender-100: #ede8ff;
  --color-hokkaido-lavender-200: #dbd0ff;
  --color-hokkaido-lavender-300: #c7b4ff;
  --color-hokkaido-lavender-400: #ad89ff;
  --color-hokkaido-lavender-500: #985bff;
  --color-hokkaido-lavender-600: #8033e8;
  --color-hokkaido-lavender-700: #6819c4;
  --color-hokkaido-lavender-800: #5300a2;
  --color-hokkaido-lavender-900: #400080;
  --color-hokkaido-lavender-950: #290055;
  --color-olive: #848700;
  --color-olive-50: #f5fac1;
  --color-olive-100: #eaefae;
  --color-olive-200: #d6db8d;
  --color-olive-300: #bfc469;
  --color-olive-400: #a0a439;
  --color-olive-500: #848700;
  --color-olive-600: #6a6d00;
  --color-olive-700: #545600;
  --color-olive-800: #424300;
  --color-olive-900: #333400;
  --color-olive-950: #202100;
}