Aphrodite Aqua to Shadows of Time Color Palette

About this palette

Aphrodite Aqua to Shadows of Time is a 4-color cool palette: #65E4B6 (Aphrodite Aqua), #9188F8 (Periwinkle), #794000 (Hazelnut Chocolate), #00816C (Shadows of Time). It mixes turquoise, purple, brown tones and feels cool overall. The strongest text pairing is #65E4B6 on #794000 with a contrast ratio of 5.23:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Aphrodite Aqua	rgb(101, 228, 182)	hsl(158, 70%, 65%)
Periwinkle	rgb(145, 136, 248)	hsl(245, 89%, 75%)
Hazelnut Chocolate	rgb(121, 64, 0)	hsl(32, 100%, 24%)
Shadows of Time	rgb(0, 129, 108)	hsl(170, 100%, 25%)

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.

Aa5.23:1 Good#65E4B6 on #794000
Aa5.23:1 Good#794000 on #65E4B6
Aa3.06:1 Poor#65E4B6 on #00816C
Aa3.06:1 Poor#00816C on #65E4B6

Color blindness preview

CSS variables

/* Aphrodite Aqua to Shadows of Time — https://swatchly.xyz/palette/65e4b6-9188f8-794000-00816c */
:root {
  --aphrodite-aqua: #65e4b6;
  --periwinkle: #9188f8;
  --hazelnut-chocolate: #794000;
  --shadows-of-time: #00816c;
}

Tailwind CSS v4

/* Aphrodite Aqua to Shadows of Time — https://swatchly.xyz/palette/65e4b6-9188f8-794000-00816c */
@theme {
  --color-aphrodite-aqua: #65e4b6;
  --color-aphrodite-aqua-50: #eafff6;
  --color-aphrodite-aqua-100: #c9ffe7;
  --color-aphrodite-aqua-200: #a1f2d1;
  --color-aphrodite-aqua-300: #65e4b6;
  --color-aphrodite-aqua-400: #48c097;
  --color-aphrodite-aqua-500: #00a479;
  --color-aphrodite-aqua-600: #008361;
  --color-aphrodite-aqua-700: #00684c;
  --color-aphrodite-aqua-800: #00503a;
  --color-aphrodite-aqua-900: #003d2b;
  --color-aphrodite-aqua-950: #00271a;
  --color-periwinkle: #9188f8;
  --color-periwinkle-50: #f0f1ff;
  --color-periwinkle-100: #e4e4ff;
  --color-periwinkle-200: #ccccff;
  --color-periwinkle-300: #b2b0ff;
  --color-periwinkle-400: #9188f8;
  --color-periwinkle-500: #786ddb;
  --color-periwinkle-600: #6154bc;
  --color-periwinkle-700: #4d3f9e;
  --color-periwinkle-800: #3c2f82;
  --color-periwinkle-900: #2f236a;
  --color-periwinkle-950: #1d1448;
  --color-hazelnut-chocolate: #794000;
  --color-hazelnut-chocolate-50: #fff3e9;
  --color-hazelnut-chocolate-100: #ffe6d3;
  --color-hazelnut-chocolate-200: #fdcba5;
  --color-hazelnut-chocolate-300: #ebb285;
  --color-hazelnut-chocolate-400: #cd905e;
  --color-hazelnut-chocolate-500: #b0733f;
  --color-hazelnut-chocolate-600: #925825;
  --color-hazelnut-chocolate-700: #794000;
  --color-hazelnut-chocolate-800: #5e3203;
  --color-hazelnut-chocolate-900: #4b2500;
  --color-hazelnut-chocolate-950: #301600;
  --color-shadows-of-time: #00816c;
  --color-shadows-of-time-50: #d9fff4;
  --color-shadows-of-time-100: #c1faea;
  --color-shadows-of-time-200: #a4e9d6;
  --color-shadows-of-time-300: #84d5c0;
  --color-shadows-of-time-400: #59b7a1;
  --color-shadows-of-time-500: #339c86;
  --color-shadows-of-time-600: #00816c;
  --color-shadows-of-time-700: #006755;
  --color-shadows-of-time-800: #005042;
  --color-shadows-of-time-900: #003e33;
  --color-shadows-of-time-950: #00271f;
}