Shadows of Time to Green Not Found color palette

About this palette

Shadows of Time to Green Not Found is a 4-color cool palette: #00856D (Shadows of Time), #CA86DF (Fake Love), #FCE0FF (Bunny Tail), #414700 (Green Not Found). It mixes turquoise, purple, pink, green tones and feels cool overall. The strongest text pairing is #FCE0FF on #414700 with a contrast ratio of 8.11:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Shadows of Timergb(0, 133, 109)hsl(169, 100%, 26%)
Fake Lovergb(202, 134, 223)hsl(286, 58%, 70%)
Bunny Tailrgb(252, 224, 255)hsl(294, 100%, 94%)
Green Not Foundrgb(65, 71, 0)hsl(65, 100%, 14%)

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.

  • Aa8.11:1 Very good#FCE0FF on #414700
  • Aa8.11:1 Very good#414700 on #FCE0FF
  • Aa3.77:1 Poor#00856D on #FCE0FF
  • Aa3.77:1 Poor#FCE0FF on #00856D
  • Aa3.76:1 Poor#CA86DF on #414700
  • Aa3.76:1 Poor#414700 on #CA86DF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Shadows of Time to Green Not Found — https://swatchly.xyz/palette/00856d-ca86df-fce0ff-414700 */
:root {
  --shadows-of-time: #00856d;
  --fake-love: #ca86df;
  --bunny-tail: #fce0ff;
  --green-not-found: #414700;
}

Tailwind CSS v4

/* Shadows of Time to Green Not Found — https://swatchly.xyz/palette/00856d-ca86df-fce0ff-414700 */
@theme {
  --color-shadows-of-time: #00856d;
  --color-shadows-of-time-50: #d9fff3;
  --color-shadows-of-time-100: #c0fbe9;
  --color-shadows-of-time-200: #a4ebd6;
  --color-shadows-of-time-300: #85d7c0;
  --color-shadows-of-time-400: #59baa1;
  --color-shadows-of-time-500: #34a086;
  --color-shadows-of-time-600: #00856d;
  --color-shadows-of-time-700: #006a56;
  --color-shadows-of-time-800: #005343;
  --color-shadows-of-time-900: #004033;
  --color-shadows-of-time-950: #00281f;
  --color-fake-love: #ca86df;
  --color-fake-love-50: #fcf3ff;
  --color-fake-love-100: #f9e5ff;
  --color-fake-love-200: #f2c9ff;
  --color-fake-love-300: #e5abf7;
  --color-fake-love-400: #ca86df;
  --color-fake-love-500: #ac6ac1;
  --color-fake-love-600: #8f4fa3;
  --color-fake-love-700: #753a86;
  --color-fake-love-800: #5d296c;
  --color-fake-love-900: #491c56;
  --color-fake-love-950: #2f0f38;
  --color-bunny-tail: #fce0ff;
  --color-bunny-tail-50: #feefff;
  --color-bunny-tail-100: #fce0ff;
  --color-bunny-tail-200: #e4cfe6;
  --color-bunny-tail-300: #cfb8d1;
  --color-bunny-tail-400: #b198b3;
  --color-bunny-tail-500: #957c98;
  --color-bunny-tail-600: #7a627d;
  --color-bunny-tail-700: #624d65;
  --color-bunny-tail-800: #4e3b50;
  --color-bunny-tail-900: #3c2c3e;
  --color-bunny-tail-950: #261b27;
  --color-green-not-found: #414700;
  --color-green-not-found-50: #f3fad6;
  --color-green-not-found-100: #e9f0c8;
  --color-green-not-found-200: #d5ddad;
  --color-green-not-found-300: #bfc790;
  --color-green-not-found-400: #9fa86b;
  --color-green-not-found-500: #848c4e;
  --color-green-not-found-600: #6a7134;
  --color-green-not-found-700: #545a21;
  --color-green-not-found-800: #414700;
  --color-green-not-found-900: #32360a;
  --color-green-not-found-950: #1e2203;
}

Similar palettes