Shadows of Time to Frogger Color Palette

About this palette

Shadows of Time to Frogger is a 5-color vibrant, cool, neon palette: #008066 (Shadows of Time), #D922D3 (Drunk-Tank Pink), #C68000 (Harvest at Dusk), #B1AF00 (Honey and Thyme), #82D400 (Frogger). It mixes turquoise, pink, orange, yellow, green tones and feels cool overall. The strongest text pairing is #008066 on #82D400 with a contrast ratio of 2.66:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Shadows of Time	rgb(0, 128, 102)	hsl(168, 100%, 25%)
Drunk-Tank Pink	rgb(217, 34, 211)	hsl(302, 73%, 49%)
Harvest at Dusk	rgb(198, 128, 0)	hsl(39, 100%, 39%)
Honey and Thyme	rgb(177, 175, 0)	hsl(59, 100%, 35%)
Frogger	rgb(130, 212, 0)	hsl(83, 100%, 42%)

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 Frogger — https://swatchly.xyz/palette/008066-d922d3-c68000-b1af00-82d400 */
:root {
  --shadows-of-time: #008066;
  --drunk-tank-pink: #d922d3;
  --harvest-at-dusk: #c68000;
  --honey-and-thyme: #b1af00;
  --frogger: #82d400;
}

Tailwind CSS v4

/* Shadows of Time to Frogger — https://swatchly.xyz/palette/008066-d922d3-c68000-b1af00-82d400 */
@theme {
  --color-shadows-of-time: #008066;
  --color-shadows-of-time-50: #dafff2;
  --color-shadows-of-time-100: #c1fae6;
  --color-shadows-of-time-200: #a4e9d2;
  --color-shadows-of-time-300: #83d5bb;
  --color-shadows-of-time-400: #58b79b;
  --color-shadows-of-time-500: #339b80;
  --color-shadows-of-time-600: #008066;
  --color-shadows-of-time-700: #006651;
  --color-shadows-of-time-800: #00503e;
  --color-shadows-of-time-900: #003d30;
  --color-shadows-of-time-950: #00271d;
  --color-drunk-tank-pink: #d922d3;
  --color-drunk-tank-pink-50: #fff0fd;
  --color-drunk-tank-pink-100: #ffe1fb;
  --color-drunk-tank-pink-200: #ffc1f9;
  --color-drunk-tank-pink-300: #ff96f7;
  --color-drunk-tank-pink-400: #f552ee;
  --color-drunk-tank-pink-500: #d922d3;
  --color-drunk-tank-pink-600: #b300af;
  --color-drunk-tank-pink-700: #8f008c;
  --color-drunk-tank-pink-800: #71006e;
  --color-drunk-tank-pink-900: #580056;
  --color-drunk-tank-pink-950: #390038;
  --color-harvest-at-dusk: #c68000;
  --color-harvest-at-dusk-50: #fff6eb;
  --color-harvest-at-dusk-100: #ffecd6;
  --color-harvest-at-dusk-200: #ffd6a4;
  --color-harvest-at-dusk-300: #f8bc71;
  --color-harvest-at-dusk-400: #df9c40;
  --color-harvest-at-dusk-500: #c68000;
  --color-harvest-at-dusk-600: #a06600;
  --color-harvest-at-dusk-700: #7f5100;
  --color-harvest-at-dusk-800: #643e00;
  --color-harvest-at-dusk-900: #4d2f00;
  --color-harvest-at-dusk-950: #301c00;
  --color-honey-and-thyme: #b1af00;
  --color-honey-and-thyme-50: #fbfdbb;
  --color-honey-and-thyme-100: #f3f5aa;
  --color-honey-and-thyme-200: #e2e388;
  --color-honey-and-thyme-300: #cecd61;
  --color-honey-and-thyme-400: #b1af00;
  --color-honey-and-thyme-500: #939100;
  --color-honey-and-thyme-600: #767500;
  --color-honey-and-thyme-700: #5d5c00;
  --color-honey-and-thyme-800: #484700;
  --color-honey-and-thyme-900: #373600;
  --color-honey-and-thyme-950: #212100;
  --color-frogger: #82d400;
  --color-frogger-50: #daffbe;
  --color-frogger-100: #c3fa94;
  --color-frogger-200: #a7e86c;
  --color-frogger-300: #82d400;
  --color-frogger-400: #6cb200;
  --color-frogger-500: #5a9500;
  --color-frogger-600: #477800;
  --color-frogger-700: #386000;
  --color-frogger-800: #2b4c00;
  --color-frogger-900: #213b00;
  --color-frogger-950: #132500;
}