Turquoise Pearl to Beyond the Stars color palette

95F4CFTurquoise Pearl C7AA66Ginger Ale 2983DBSoothing Sapphire 7C3C68Bruise 00365DBeyond the Stars

About this palette

Turquoise Pearl to Beyond the Stars is a 5-color cool palette: #95F4CF (Turquoise Pearl), #C7AA66 (Ginger Ale), #2983DB (Soothing Sapphire), #7C3C68 (Bruise), #00365D (Beyond the Stars). It mixes turquoise, yellow, blue, red tones and feels cool overall. The strongest text pairing is #95F4CF on #00365D with a contrast ratio of 9.56:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Turquoise Pearl	rgb(149, 244, 207)	hsl(157, 81%, 77%)
Ginger Ale	rgb(199, 170, 102)	hsl(42, 46%, 59%)
Soothing Sapphire	rgb(41, 131, 219)	hsl(210, 71%, 51%)
Bruise	rgb(124, 60, 104)	hsl(319, 35%, 36%)
Beyond the Stars	rgb(0, 54, 93)	hsl(205, 100%, 18%)

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.

Aa9.56:1 Very good#95F4CF on #00365D
Aa9.56:1 Very good#00365D on #95F4CF
Aa5.96:1 Good#95F4CF on #7C3C68
Aa5.96:1 Good#7C3C68 on #95F4CF
Aa5.56:1 Good#C7AA66 on #00365D
Aa5.56:1 Good#00365D on #C7AA66
Aa3.47:1 Poor#C7AA66 on #7C3C68
Aa3.47:1 Poor#7C3C68 on #C7AA66

Color blindness preview

CSS variables

/* Turquoise Pearl to Beyond the Stars — https://swatchly.xyz/palette/95f4cf-c7aa66-2983db-7c3c68-00365d */
:root {
  --turquoise-pearl: #95f4cf;
  --ginger-ale: #c7aa66;
  --soothing-sapphire: #2983db;
  --bruise: #7c3c68;
  --beyond-the-stars: #00365d;
}

Tailwind CSS v4

/* Turquoise Pearl to Beyond the Stars — https://swatchly.xyz/palette/95f4cf-c7aa66-2983db-7c3c68-00365d */
@theme {
  --color-turquoise-pearl: #95f4cf;
  --color-turquoise-pearl-50: #eafff5;
  --color-turquoise-pearl-100: #c9fee8;
  --color-turquoise-pearl-200: #95f4cf;
  --color-turquoise-pearl-300: #8cd8ba;
  --color-turquoise-pearl-400: #60b998;
  --color-turquoise-pearl-500: #3b9d7c;
  --color-turquoise-pearl-600: #168061;
  --color-turquoise-pearl-700: #00664b;
  --color-turquoise-pearl-800: #004f3a;
  --color-turquoise-pearl-900: #003d2c;
  --color-turquoise-pearl-950: #00261a;
  --color-ginger-ale: #c7aa66;
  --color-ginger-ale-50: #fff9eb;
  --color-ginger-ale-100: #fff0cf;
  --color-ginger-ale-200: #f2deaf;
  --color-ginger-ale-300: #e0c993;
  --color-ginger-ale-400: #c7aa66;
  --color-ginger-ale-500: #a88c49;
  --color-ginger-ale-600: #8b6f2b;
  --color-ginger-ale-700: #705712;
  --color-ginger-ale-800: #584200;
  --color-ginger-ale-900: #433200;
  --color-ginger-ale-950: #291d00;
  --color-soothing-sapphire: #2983db;
  --color-soothing-sapphire-50: #edf5ff;
  --color-soothing-sapphire-100: #daebff;
  --color-soothing-sapphire-200: #b6d8ff;
  --color-soothing-sapphire-300: #8bc2ff;
  --color-soothing-sapphire-400: #4da0f8;
  --color-soothing-sapphire-500: #2983db;
  --color-soothing-sapphire-600: #0168bc;
  --color-soothing-sapphire-700: #005397;
  --color-soothing-sapphire-800: #004078;
  --color-soothing-sapphire-900: #00325f;
  --color-soothing-sapphire-950: #001f3f;
  --color-bruise: #7c3c68;
  --color-bruise-50: #fff0f9;
  --color-bruise-100: #ffe1f3;
  --color-bruise-200: #fcc4e8;
  --color-bruise-300: #eaabd3;
  --color-bruise-400: #cd89b5;
  --color-bruise-500: #b16d9a;
  --color-bruise-600: #94537f;
  --color-bruise-700: #7c3c68;
  --color-bruise-800: #622e52;
  --color-bruise-900: #4d2140;
  --color-bruise-950: #321228;
  --color-beyond-the-stars: #00365d;
  --color-beyond-the-stars-50: #edf6ff;
  --color-beyond-the-stars-100: #dceeff;
  --color-beyond-the-stars-200: #b8dcff;
  --color-beyond-the-stars-300: #9bc6ef;
  --color-beyond-the-stars-400: #77a7d3;
  --color-beyond-the-stars-500: #5b8bb8;
  --color-beyond-the-stars-600: #42719b;
  --color-beyond-the-stars-700: #2e5a80;
  --color-beyond-the-stars-800: #1f4668;
  --color-beyond-the-stars-900: #00365d;
  --color-beyond-the-stars-950: #092236;
}