Fresh Air to Swamp Thing Color Palette

About this palette

Fresh Air to Swamp Thing is a 4-color cool, gradient palette: #A9E6FF (Fresh Air), #43AFA6 (Waterfall), #27669B (Starry Night), #142B2B (Swamp Thing). It mixes blue, turquoise, gray tones and feels cool overall. The strongest text pairing is #A9E6FF on #142B2B with a contrast ratio of 10.96:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fresh Air	rgb(169, 230, 255)	hsl(197, 100%, 83%)
Waterfall	rgb(67, 175, 166)	hsl(175, 45%, 47%)
Starry Night	rgb(39, 102, 155)	hsl(207, 60%, 38%)
Swamp Thing	rgb(20, 43, 43)	hsl(180, 37%, 12%)

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.96:1 Very good#A9E6FF on #142B2B
Aa10.96:1 Very good#142B2B on #A9E6FF
Aa5.62:1 Good#43AFA6 on #142B2B
Aa5.62:1 Good#142B2B on #43AFA6
Aa4.47:1 Poor#A9E6FF on #27669B
Aa4.47:1 Poor#27669B on #A9E6FF

Color blindness preview

CSS variables

/* Fresh Air to Swamp Thing — https://swatchly.xyz/palette/a9e6ff-43afa6-27669b-142b2b */
:root {
  --fresh-air: #a9e6ff;
  --waterfall: #43afa6;
  --starry-night: #27669b;
  --swamp-thing: #142b2b;
}

Tailwind CSS v4

/* Fresh Air to Swamp Thing — https://swatchly.xyz/palette/a9e6ff-43afa6-27669b-142b2b */
@theme {
  --color-fresh-air: #a9e6ff;
  --color-fresh-air-50: #eefaff;
  --color-fresh-air-100: #d9f4ff;
  --color-fresh-air-200: #a9e6ff;
  --color-fresh-air-300: #9bcde1;
  --color-fresh-air-400: #75adc4;
  --color-fresh-air-500: #5691a8;
  --color-fresh-air-600: #3c758b;
  --color-fresh-air-700: #275d71;
  --color-fresh-air-800: #18495a;
  --color-fresh-air-900: #0d3847;
  --color-fresh-air-950: #05232e;
  --color-waterfall: #43afa6;
  --color-waterfall-50: #ccfff9;
  --color-waterfall-100: #b8f6ef;
  --color-waterfall-200: #98e4dc;
  --color-waterfall-300: #76cec5;
  --color-waterfall-400: #43afa6;
  --color-waterfall-500: #1e948c;
  --color-waterfall-600: #007871;
  --color-waterfall-700: #00605a;
  --color-waterfall-800: #004b47;
  --color-waterfall-900: #003b37;
  --color-waterfall-950: #002623;
  --color-starry-night: #27669b;
  --color-starry-night-50: #edf6ff;
  --color-starry-night-100: #d8ecff;
  --color-starry-night-200: #b1d9ff;
  --color-starry-night-300: #8bc1f5;
  --color-starry-night-400: #64a0d7;
  --color-starry-night-500: #4583ba;
  --color-starry-night-600: #27669b;
  --color-starry-night-700: #19517e;
  --color-starry-night-800: #0c3f66;
  --color-starry-night-900: #053152;
  --color-starry-night-950: #021e36;
  --color-swamp-thing: #142b2b;
  --color-swamp-thing-50: #eaf9f8;
  --color-swamp-thing-100: #deefef;
  --color-swamp-thing-200: #c8dcdc;
  --color-swamp-thing-300: #afc6c6;
  --color-swamp-thing-400: #8ea7a7;
  --color-swamp-thing-500: #748d8d;
  --color-swamp-thing-600: #5c7474;
  --color-swamp-thing-700: #485e5e;
  --color-swamp-thing-800: #384c4c;
  --color-swamp-thing-900: #2b3d3d;
  --color-swamp-thing-950: #142b2b;
}