Shadows of Time to Pastel Blue Color Palette

About this palette

Shadows of Time to Pastel Blue is a 5-color vibrant, cool palette: #008765 (Shadows of Time), #009A57 (Militant Vegan), #AD6FFF (Illicit Purple), #00C49B (Macau), #A0C0FF (Pastel Blue). It mixes turquoise, green, purple, blue tones and feels cool overall. The strongest text pairing is #008765 on #A0C0FF with a contrast ratio of 2.47:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Shadows of Time	rgb(0, 135, 101)	hsl(165, 100%, 26%)
Militant Vegan	rgb(0, 154, 87)	hsl(154, 100%, 30%)
Illicit Purple	rgb(173, 111, 255)	hsl(266, 100%, 72%)
Macau	rgb(0, 196, 155)	hsl(167, 100%, 38%)
Pastel Blue	rgb(160, 192, 255)	hsl(220, 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

/* Shadows of Time to Pastel Blue — https://swatchly.xyz/palette/008765-009a57-ad6fff-00c49b-a0c0ff */
:root {
  --shadows-of-time: #008765;
  --militant-vegan: #009a57;
  --illicit-purple: #ad6fff;
  --macau: #00c49b;
  --pastel-blue: #a0c0ff;
}

Tailwind CSS v4

/* Shadows of Time to Pastel Blue — https://swatchly.xyz/palette/008765-009a57-ad6fff-00c49b-a0c0ff */
@theme {
  --color-shadows-of-time: #008765;
  --color-shadows-of-time-50: #dbffef;
  --color-shadows-of-time-100: #c0fce3;
  --color-shadows-of-time-200: #a4eccf;
  --color-shadows-of-time-300: #85d9b8;
  --color-shadows-of-time-400: #5abc99;
  --color-shadows-of-time-500: #34a17e;
  --color-shadows-of-time-600: #008765;
  --color-shadows-of-time-700: #006b50;
  --color-shadows-of-time-800: #00543e;
  --color-shadows-of-time-900: #00412f;
  --color-shadows-of-time-950: #00291c;
  --color-militant-vegan: #009a57;
  --color-militant-vegan-50: #daffe5;
  --color-militant-vegan-100: #b7fdce;
  --color-militant-vegan-200: #96ebb4;
  --color-militant-vegan-300: #72d698;
  --color-militant-vegan-400: #40b774;
  --color-militant-vegan-500: #009a57;
  --color-militant-vegan-600: #007c45;
  --color-militant-vegan-700: #006336;
  --color-militant-vegan-800: #004e29;
  --color-militant-vegan-900: #003c1f;
  --color-militant-vegan-950: #002611;
  --color-illicit-purple: #ad6fff;
  --color-illicit-purple-50: #f3eeff;
  --color-illicit-purple-100: #eadfff;
  --color-illicit-purple-200: #d8c3ff;
  --color-illicit-purple-300: #c5a2ff;
  --color-illicit-purple-400: #ad6fff;
  --color-illicit-purple-500: #9454e2;
  --color-illicit-purple-600: #7a3ac3;
  --color-illicit-purple-700: #6426a4;
  --color-illicit-purple-800: #501788;
  --color-illicit-purple-900: #400d70;
  --color-illicit-purple-950: #2a054d;
  --color-macau: #00c49b;
  --color-macau-50: #e3fff4;
  --color-macau-100: #beffe8;
  --color-macau-200: #92f2d2;
  --color-macau-300: #6adfbb;
  --color-macau-400: #00c49b;
  --color-macau-500: #00a380;
  --color-macau-600: #008367;
  --color-macau-700: #006851;
  --color-macau-800: #00513e;
  --color-macau-900: #003e2f;
  --color-macau-950: #00261c;
  --color-pastel-blue: #a0c0ff;
  --color-pastel-blue-50: #f0f5ff;
  --color-pastel-blue-100: #e1ebff;
  --color-pastel-blue-200: #c3d7ff;
  --color-pastel-blue-300: #a0c0ff;
  --color-pastel-blue-400: #83a1db;
  --color-pastel-blue-500: #6785c0;
  --color-pastel-blue-600: #4f6aa2;
  --color-pastel-blue-700: #3b5486;
  --color-pastel-blue-800: #2b416d;
  --color-pastel-blue-900: #1f3157;
  --color-pastel-blue-950: #111e39;
}