All Nighter to Spa Color Palette

About this palette

All Nighter to Spa is a 5-color muted palette: #3E544E (All Nighter), #283933 (Aztec), #A0BBB2 (Seafoam Whisper), #518272 (Clouded Pine), #CBEBDF (Spa). It mixes gray, turquoise tones and feels cool overall. The strongest text pairing is #283933 on #CBEBDF with a contrast ratio of 9.57:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
All Nighter	rgb(62, 84, 78)	hsl(164, 15%, 29%)
Aztec	rgb(40, 57, 51)	hsl(159, 18%, 19%)
Seafoam Whisper	rgb(160, 187, 178)	hsl(160, 17%, 68%)
Clouded Pine	rgb(81, 130, 114)	hsl(160, 23%, 41%)
Spa	rgb(203, 235, 223)	hsl(158, 44%, 86%)

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.57:1 Very good#283933 on #CBEBDF
Aa9.57:1 Very good#CBEBDF on #283933
Aa6.38:1 Good#3E544E on #CBEBDF
Aa6.38:1 Good#CBEBDF on #3E544E
Aa5.95:1 Good#283933 on #A0BBB2
Aa5.95:1 Good#A0BBB2 on #283933
Aa3.97:1 Poor#3E544E on #A0BBB2
Aa3.97:1 Poor#A0BBB2 on #3E544E

Color blindness preview

CSS variables

/* All Nighter to Spa — https://swatchly.xyz/palette/3e544e-283933-a0bbb2-518272-cbebdf */
:root {
  --all-nighter: #3e544e;
  --aztec: #283933;
  --seafoam-whisper: #a0bbb2;
  --clouded-pine: #518272;
  --spa: #cbebdf;
}

Tailwind CSS v4

/* All Nighter to Spa — https://swatchly.xyz/palette/3e544e-283933-a0bbb2-518272-cbebdf */
@theme {
  --color-all-nighter: #3e544e;
  --color-all-nighter-50: #ebf9f5;
  --color-all-nighter-100: #e0efeb;
  --color-all-nighter-200: #c8dbd6;
  --color-all-nighter-300: #aec4be;
  --color-all-nighter-400: #8ca49d;
  --color-all-nighter-500: #708781;
  --color-all-nighter-600: #556c65;
  --color-all-nighter-700: #3e544e;
  --color-all-nighter-800: #30413d;
  --color-all-nighter-900: #24322e;
  --color-all-nighter-950: #151f1c;
  --color-aztec: #283933;
  --color-aztec-50: #edf8f4;
  --color-aztec-100: #e2efea;
  --color-aztec-200: #ccdcd6;
  --color-aztec-300: #b4c6bf;
  --color-aztec-400: #94a7a0;
  --color-aztec-500: #798c85;
  --color-aztec-600: #5f726b;
  --color-aztec-700: #4a5b55;
  --color-aztec-800: #394842;
  --color-aztec-900: #283933;
  --color-aztec-950: #1a2320;
  --color-seafoam-whisper: #a0bbb2;
  --color-seafoam-whisper-50: #e2f3ed;
  --color-seafoam-whisper-100: #d4e7e1;
  --color-seafoam-whisper-200: #bcd2cb;
  --color-seafoam-whisper-300: #a0bbb2;
  --color-seafoam-whisper-400: #849e95;
  --color-seafoam-whisper-500: #6b857c;
  --color-seafoam-whisper-600: #546c64;
  --color-seafoam-whisper-700: #415750;
  --color-seafoam-whisper-800: #32453f;
  --color-seafoam-whisper-900: #263732;
  --color-seafoam-whisper-950: #16221e;
  --color-clouded-pine: #518272;
  --color-clouded-pine-50: #e1fdf2;
  --color-clouded-pine-100: #d6f5ea;
  --color-clouded-pine-200: #c0e5d8;
  --color-clouded-pine-300: #a8d2c3;
  --color-clouded-pine-400: #86b5a5;
  --color-clouded-pine-500: #6a9b8b;
  --color-clouded-pine-600: #518272;
  --color-clouded-pine-700: #3a685a;
  --color-clouded-pine-800: #295245;
  --color-clouded-pine-900: #1c3f34;
  --color-clouded-pine-950: #0e2820;
  --color-spa: #cbebdf;
  --color-spa-50: #e0f3ec;
  --color-spa-100: #cbebdf;
  --color-spa-200: #bed7ce;
  --color-spa-300: #a7c2b8;
  --color-spa-400: #88a59a;
  --color-spa-500: #6e8b80;
  --color-spa-600: #557268;
  --color-spa-700: #425c53;
  --color-spa-800: #314840;
  --color-spa-900: #243831;
  --color-spa-950: #15231e;
}