Fresh Air to Harem Silk Color Palette

About this palette

Fresh Air to Harem Silk is a 5-color cool, monochromatic palette: #AFECFC (Fresh Air), #24ABC5 (Pacific Blue), #004E5C (Nocturnal Expedition), #3AD8FF (Neon Blue), #006783 (Harem Silk). It mixes blue, turquoise tones and feels cool overall. The strongest text pairing is #AFECFC on #004E5C with a contrast ratio of 7.23:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fresh Air	rgb(175, 236, 252)	hsl(192, 93%, 84%)
Pacific Blue	rgb(36, 171, 197)	hsl(190, 69%, 46%)
Nocturnal Expedition	rgb(0, 78, 92)	hsl(189, 100%, 18%)
Neon Blue	rgb(58, 216, 255)	hsl(192, 100%, 61%)
Harem Silk	rgb(0, 103, 131)	hsl(193, 100%, 26%)

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.

Aa7.23:1 Very good#AFECFC on #004E5C
Aa7.23:1 Very good#004E5C on #AFECFC
Aa5.55:1 Good#004E5C on #3AD8FF
Aa5.55:1 Good#3AD8FF on #004E5C
Aa4.97:1 Good#AFECFC on #006783
Aa4.97:1 Good#006783 on #AFECFC
Aa3.81:1 Poor#3AD8FF on #006783
Aa3.81:1 Poor#006783 on #3AD8FF

Color blindness preview

CSS variables

/* Fresh Air to Harem Silk — https://swatchly.xyz/palette/afecfc-24abc5-004e5c-3ad8ff-006783 */
:root {
  --fresh-air: #afecfc;
  --pacific-blue: #24abc5;
  --nocturnal-expedition: #004e5c;
  --neon-blue: #3ad8ff;
  --harem-silk: #006783;
}

Tailwind CSS v4

/* Fresh Air to Harem Silk — https://swatchly.xyz/palette/afecfc-24abc5-004e5c-3ad8ff-006783 */
@theme {
  --color-fresh-air: #afecfc;
  --color-fresh-air-50: #f5fdff;
  --color-fresh-air-100: #def8ff;
  --color-fresh-air-200: #afecfc;
  --color-fresh-air-300: #a1d2de;
  --color-fresh-air-400: #7ab1c0;
  --color-fresh-air-500: #5a94a3;
  --color-fresh-air-600: #3e7886;
  --color-fresh-air-700: #295f6c;
  --color-fresh-air-800: #194a55;
  --color-fresh-air-900: #0e3942;
  --color-fresh-air-950: #05242a;
  --color-pacific-blue: #24abc5;
  --color-pacific-blue-50: #ddf8ff;
  --color-pacific-blue-100: #bcf2ff;
  --color-pacific-blue-200: #8be1f6;
  --color-pacific-blue-300: #65cbe2;
  --color-pacific-blue-400: #24abc5;
  --color-pacific-blue-500: #008fa7;
  --color-pacific-blue-600: #007487;
  --color-pacific-blue-700: #005c6c;
  --color-pacific-blue-800: #004956;
  --color-pacific-blue-900: #003943;
  --color-pacific-blue-950: #00242c;
  --color-nocturnal-expedition: #004e5c;
  --color-nocturnal-expedition-50: #e5faff;
  --color-nocturnal-expedition-100: #ccf3fd;
  --color-nocturnal-expedition-200: #b2e1ed;
  --color-nocturnal-expedition-300: #96ccd9;
  --color-nocturnal-expedition-400: #71aebc;
  --color-nocturnal-expedition-500: #5393a2;
  --color-nocturnal-expedition-600: #397886;
  --color-nocturnal-expedition-700: #25616e;
  --color-nocturnal-expedition-800: #004e5c;
  --color-nocturnal-expedition-900: #0b3c46;
  --color-nocturnal-expedition-950: #03262d;
  --color-neon-blue: #3ad8ff;
  --color-neon-blue-50: #eafaff;
  --color-neon-blue-100: #d2f4ff;
  --color-neon-blue-200: #9ae8ff;
  --color-neon-blue-300: #3ad8ff;
  --color-neon-blue-400: #02b6da;
  --color-neon-blue-500: #0097b6;
  --color-neon-blue-600: #007a93;
  --color-neon-blue-700: #006075;
  --color-neon-blue-800: #004b5c;
  --color-neon-blue-900: #003947;
  --color-neon-blue-950: #00242d;
  --color-harem-silk: #006783;
  --color-harem-silk-50: #e8f8ff;
  --color-harem-silk-100: #d1f1ff;
  --color-harem-silk-200: #aae3fa;
  --color-harem-silk-300: #8dcfe9;
  --color-harem-silk-400: #66b1ce;
  --color-harem-silk-500: #4697b5;
  --color-harem-silk-600: #297d9a;
  --color-harem-silk-700: #006783;
  --color-harem-silk-800: #005167;
  --color-harem-silk-900: #003e50;
  --color-harem-silk-950: #002734;
}