Celadon to Stone Age Queen Color Palette

About this palette

Celadon to Stone Age Queen is a 4-color cool palette: #96E4B4 (Celadon), #968CCD (Petrified Purple), #1F1D36 (Eclipse Elixir), #7E3723 (Stone Age Queen). It mixes green, purple, red tones and feels cool overall. The strongest text pairing is #96E4B4 on #1F1D36 with a contrast ratio of 10.92:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Celadon	rgb(150, 228, 180)	hsl(143, 59%, 74%)
Petrified Purple	rgb(150, 140, 205)	hsl(249, 39%, 68%)
Eclipse Elixir	rgb(31, 29, 54)	hsl(245, 30%, 16%)
Stone Age Queen	rgb(126, 55, 35)	hsl(13, 57%, 32%)

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.

Aa10.92:1 Very good#96E4B4 on #1F1D36
Aa10.92:1 Very good#1F1D36 on #96E4B4
Aa5.72:1 Good#96E4B4 on #7E3723
Aa5.72:1 Good#7E3723 on #96E4B4
Aa5.38:1 Good#968CCD on #1F1D36
Aa5.38:1 Good#1F1D36 on #968CCD

Color blindness preview

CSS variables

/* Celadon to Stone Age Queen — https://swatchly.xyz/palette/96e4b4-968ccd-1f1d36-7e3723 */
:root {
  --celadon: #96e4b4;
  --petrified-purple: #968ccd;
  --eclipse-elixir: #1f1d36;
  --stone-age-queen: #7e3723;
}

Tailwind CSS v4

/* Celadon to Stone Age Queen — https://swatchly.xyz/palette/96e4b4-968ccd-1f1d36-7e3723 */
@theme {
  --color-celadon: #96e4b4;
  --color-celadon-50: #d0fcdf;
  --color-celadon-100: #c0f3d2;
  --color-celadon-200: #96e4b4;
  --color-celadon-300: #89cca3;
  --color-celadon-400: #65af83;
  --color-celadon-500: #489569;
  --color-celadon-600: #2e7a51;
  --color-celadon-700: #1a633e;
  --color-celadon-800: #0a502f;
  --color-celadon-900: #013e22;
  --color-celadon-950: #002713;
  --color-petrified-purple: #968ccd;
  --color-petrified-purple-50: #f1efff;
  --color-petrified-purple-100: #e4e1ff;
  --color-petrified-purple-200: #cfc8fe;
  --color-petrified-purple-300: #b7aeea;
  --color-petrified-purple-400: #968ccd;
  --color-petrified-purple-500: #7d73b2;
  --color-petrified-purple-600: #655b96;
  --color-petrified-purple-700: #51477c;
  --color-petrified-purple-800: #3f3765;
  --color-petrified-purple-900: #322a52;
  --color-petrified-purple-950: #201a37;
  --color-eclipse-elixir: #1f1d36;
  --color-eclipse-elixir-50: #f4f4ff;
  --color-eclipse-elixir-100: #e9e9fe;
  --color-eclipse-elixir-200: #d5d5ee;
  --color-eclipse-elixir-300: #bebeda;
  --color-eclipse-elixir-400: #9f9ebd;
  --color-eclipse-elixir-500: #8483a2;
  --color-eclipse-elixir-600: #6a6986;
  --color-eclipse-elixir-700: #54536e;
  --color-eclipse-elixir-800: #414158;
  --color-eclipse-elixir-900: #323246;
  --color-eclipse-elixir-950: #1f1d36;
  --color-stone-age-queen: #7e3723;
  --color-stone-age-queen-50: #fff2ee;
  --color-stone-age-queen-100: #ffe5dd;
  --color-stone-age-queen-200: #ffc8b8;
  --color-stone-age-queen-300: #f2ab96;
  --color-stone-age-queen-400: #d58772;
  --color-stone-age-queen-500: #b76a55;
  --color-stone-age-queen-600: #97503b;
  --color-stone-age-queen-700: #7e3723;
  --color-stone-age-queen-800: #622b1b;
  --color-stone-age-queen-900: #4e1f12;
  --color-stone-age-queen-950: #321108;
}