Lights Out to Casper Color Palette

About this palette

Lights Out to Casper is a 5-color muted palette: #344A4E (Lights Out), #759387 (Yucca), #C2D7CD (Aquatic Edge), #637580 (Night Rendezvous), #A0B6B5 (Casper). It mixes gray, turquoise tones and feels cool overall. The strongest text pairing is #344A4E on #C2D7CD with a contrast ratio of 6.22:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lights Out	rgb(52, 74, 78)	hsl(189, 20%, 25%)
Yucca	rgb(117, 147, 135)	hsl(156, 12%, 52%)
Aquatic Edge	rgb(194, 215, 205)	hsl(151, 21%, 80%)
Night Rendezvous	rgb(99, 117, 128)	hsl(203, 13%, 45%)
Casper	rgb(160, 182, 181)	hsl(177, 13%, 67%)

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.

Aa6.22:1 Good#344A4E on #C2D7CD
Aa6.22:1 Good#C2D7CD on #344A4E
Aa4.41:1 Poor#344A4E on #A0B6B5
Aa4.41:1 Poor#A0B6B5 on #344A4E
Aa3.17:1 Poor#C2D7CD on #637580
Aa3.17:1 Poor#637580 on #C2D7CD

Color blindness preview

CSS variables

/* Lights Out to Casper — https://swatchly.xyz/palette/344a4e-759387-c2d7cd-637580-a0b6b5 */
:root {
  --lights-out: #344a4e;
  --yucca: #759387;
  --aquatic-edge: #c2d7cd;
  --night-rendezvous: #637580;
  --casper: #a0b6b5;
}

Tailwind CSS v4

/* Lights Out to Casper — https://swatchly.xyz/palette/344a4e-759387-c2d7cd-637580-a0b6b5 */
@theme {
  --color-lights-out: #344a4e;
  --color-lights-out-50: #eaf8fb;
  --color-lights-out-100: #dfeff2;
  --color-lights-out-200: #c9dcdf;
  --color-lights-out-300: #b1c6ca;
  --color-lights-out-400: #90a8ac;
  --color-lights-out-500: #758d91;
  --color-lights-out-600: #5c7377;
  --color-lights-out-700: #475c60;
  --color-lights-out-800: #344a4e;
  --color-lights-out-900: #29393c;
  --color-lights-out-950: #182326;
  --color-yucca: #759387;
  --color-yucca-50: #e9fbf4;
  --color-yucca-100: #dff2ea;
  --color-yucca-200: #c9e0d7;
  --color-yucca-300: #b1ccc1;
  --color-yucca-400: #90aea2;
  --color-yucca-500: #759387;
  --color-yucca-600: #5a776c;
  --color-yucca-700: #455f55;
  --color-yucca-800: #334a41;
  --color-yucca-900: #253932;
  --color-yucca-950: #15231e;
  --color-aquatic-edge: #c2d7cd;
  --color-aquatic-edge-50: #e8f4ee;
  --color-aquatic-edge-100: #dceae3;
  --color-aquatic-edge-200: #c2d7cd;
  --color-aquatic-edge-300: #afc1b8;
  --color-aquatic-edge-400: #8fa39a;
  --color-aquatic-edge-500: #75897f;
  --color-aquatic-edge-600: #5c6f66;
  --color-aquatic-edge-700: #485951;
  --color-aquatic-edge-800: #384640;
  --color-aquatic-edge-900: #2a3630;
  --color-aquatic-edge-950: #19221e;
  --color-night-rendezvous: #637580;
  --color-night-rendezvous-50: #ecf7fe;
  --color-night-rendezvous-100: #e2eef6;
  --color-night-rendezvous-200: #cedce5;
  --color-night-rendezvous-300: #b7c7d1;
  --color-night-rendezvous-400: #97a9b4;
  --color-night-rendezvous-500: #7c8f9a;
  --color-night-rendezvous-600: #637580;
  --color-night-rendezvous-700: #4d5d67;
  --color-night-rendezvous-800: #3a4851;
  --color-night-rendezvous-900: #2b383f;
  --color-night-rendezvous-950: #1a2228;
  --color-casper: #a0b6b5;
  --color-casper-50: #f2fdfd;
  --color-casper-100: #eaf6f6;
  --color-casper-200: #d6e6e5;
  --color-casper-300: #c1d2d1;
  --color-casper-400: #a0b6b5;
  --color-casper-500: #829796;
  --color-casper-600: #657a79;
  --color-casper-700: #4e6060;
  --color-casper-800: #3a4a4a;
  --color-casper-900: #2a3837;
  --color-casper-950: #182121;
}