Celestial to Lilac Color Palette

About this palette

Celestial to Lilac is a 6-color vibrant, cool palette: #00788E (Celestial), #AB55DB (Magenta Affair), #DE6400 (Ferocious Fox), #00A4E5 (Homeworld), #ACB900 (Leafy Woodland), #D19DFF (Lilac). It mixes blue, purple, orange, green tones and feels cool overall. The strongest text pairing is #00788E on #D19DFF with a contrast ratio of 2.45:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Celestial	rgb(0, 120, 142)	hsl(189, 100%, 28%)
Magenta Affair	rgb(171, 85, 219)	hsl(279, 65%, 60%)
Ferocious Fox	rgb(222, 100, 0)	hsl(27, 100%, 44%)
Homeworld	rgb(0, 164, 229)	hsl(197, 100%, 45%)
Leafy Woodland	rgb(172, 185, 0)	hsl(64, 100%, 36%)
Lilac	rgb(209, 157, 255)	hsl(272, 100%, 81%)

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

/* Celestial to Lilac — https://swatchly.xyz/palette/00788e-ab55db-de6400-00a4e5-acb900-d19dff */
:root {
  --celestial: #00788e;
  --magenta-affair: #ab55db;
  --ferocious-fox: #de6400;
  --homeworld: #00a4e5;
  --leafy-woodland: #acb900;
  --lilac: #d19dff;
}

Tailwind CSS v4

/* Celestial to Lilac — https://swatchly.xyz/palette/00788e-ab55db-de6400-00a4e5-acb900-d19dff */
@theme {
  --color-celestial: #00788e;
  --color-celestial-50: #e5f9ff;
  --color-celestial-100: #caf3ff;
  --color-celestial-200: #a2e3f5;
  --color-celestial-300: #82cee2;
  --color-celestial-400: #57afc5;
  --color-celestial-500: #3293aa;
  --color-celestial-600: #00788e;
  --color-celestial-700: #005f71;
  --color-celestial-800: #004a59;
  --color-celestial-900: #003945;
  --color-celestial-950: #00242c;
  --color-magenta-affair: #ab55db;
  --color-magenta-affair-50: #f9f1ff;
  --color-magenta-affair-100: #f3e3ff;
  --color-magenta-affair-200: #e8c7ff;
  --color-magenta-affair-300: #dca5ff;
  --color-magenta-affair-400: #c775f7;
  --color-magenta-affair-500: #ab55db;
  --color-magenta-affair-600: #8f39bc;
  --color-magenta-affair-700: #75239d;
  --color-magenta-affair-800: #5e1381;
  --color-magenta-affair-900: #4a0768;
  --color-magenta-affair-950: #300245;
  --color-ferocious-fox: #de6400;
  --color-ferocious-fox-50: #fff4ee;
  --color-ferocious-fox-100: #ffe9dd;
  --color-ferocious-fox-200: #ffd0b8;
  --color-ferocious-fox-300: #ffb188;
  --color-ferocious-fox-400: #f8833d;
  --color-ferocious-fox-500: #de6400;
  --color-ferocious-fox-600: #b45000;
  --color-ferocious-fox-700: #903e00;
  --color-ferocious-fox-800: #712f00;
  --color-ferocious-fox-900: #582300;
  --color-ferocious-fox-950: #381400;
  --color-homeworld: #00a4e5;
  --color-homeworld-50: #e4f5ff;
  --color-homeworld-100: #ccebff;
  --color-homeworld-200: #9ddaff;
  --color-homeworld-300: #5cc5ff;
  --color-homeworld-400: #00a4e5;
  --color-homeworld-500: #0089c0;
  --color-homeworld-600: #006e9c;
  --color-homeworld-700: #00587d;
  --color-homeworld-800: #004564;
  --color-homeworld-900: #00364f;
  --color-homeworld-950: #002234;
  --color-leafy-woodland: #acb900;
  --color-leafy-woodland-50: #f8ffd2;
  --color-leafy-woodland-100: #effaae;
  --color-leafy-woodland-200: #deea8d;
  --color-leafy-woodland-300: #c9d667;
  --color-leafy-woodland-400: #acb900;
  --color-leafy-woodland-500: #8f9900;
  --color-leafy-woodland-600: #727b00;
  --color-leafy-woodland-700: #5a6100;
  --color-leafy-woodland-800: #454b00;
  --color-leafy-woodland-900: #343800;
  --color-leafy-woodland-950: #1f2200;
  --color-lilac: #d19dff;
  --color-lilac-50: #f5ecff;
  --color-lilac-100: #eeddff;
  --color-lilac-200: #e0c0ff;
  --color-lilac-300: #d19dff;
  --color-lilac-400: #b280dd;
  --color-lilac-500: #9865c2;
  --color-lilac-600: #7e4da5;
  --color-lilac-700: #67398a;
  --color-lilac-800: #532a71;
  --color-lilac-900: #421f5c;
  --color-lilac-950: #2a113d;
}