Up in the Air to Swamp Thing Color Palette

About this palette

Up in the Air to Swamp Thing is a 4-color muted, gradient palette: #BFD7DA (Up in the Air), #8094A5 (Inland Waters), #3E625D (Rosemary), #112927 (Swamp Thing). It mixes gray, turquoise tones and feels cool overall. The strongest text pairing is #BFD7DA on #112927 with a contrast ratio of 10.18:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Up in the Air	rgb(191, 215, 218)	hsl(187, 27%, 80%)
Inland Waters	rgb(128, 148, 165)	hsl(208, 17%, 57%)
Rosemary	rgb(62, 98, 93)	hsl(172, 23%, 31%)
Swamp Thing	rgb(17, 41, 39)	hsl(175, 41%, 11%)

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.18:1 Very good#BFD7DA on #112927
Aa10.18:1 Very good#112927 on #BFD7DA
Aa4.89:1 Good#8094A5 on #112927
Aa4.89:1 Good#112927 on #8094A5
Aa4.48:1 Poor#BFD7DA on #3E625D
Aa4.48:1 Poor#3E625D on #BFD7DA

Color blindness preview

CSS variables

/* Up in the Air to Swamp Thing — https://swatchly.xyz/palette/bfd7da-8094a5-3e625d-112927 */
:root {
  --up-in-the-air: #bfd7da;
  --inland-waters: #8094a5;
  --rosemary: #3e625d;
  --swamp-thing: #112927;
}

Tailwind CSS v4

/* Up in the Air to Swamp Thing — https://swatchly.xyz/palette/bfd7da-8094a5-3e625d-112927 */
@theme {
  --color-up-in-the-air: #bfd7da;
  --color-up-in-the-air-50: #e6f4f6;
  --color-up-in-the-air-100: #daeaec;
  --color-up-in-the-air-200: #bfd7da;
  --color-up-in-the-air-300: #acc1c3;
  --color-up-in-the-air-400: #8ca3a5;
  --color-up-in-the-air-500: #72888b;
  --color-up-in-the-air-600: #596f71;
  --color-up-in-the-air-700: #45595b;
  --color-up-in-the-air-800: #354648;
  --color-up-in-the-air-900: #273638;
  --color-up-in-the-air-950: #172123;
  --color-inland-waters: #8094a5;
  --color-inland-waters-50: #f1f8ff;
  --color-inland-waters-100: #e4f1fc;
  --color-inland-waters-200: #d1e0ed;
  --color-inland-waters-300: #bacbda;
  --color-inland-waters-400: #9baebe;
  --color-inland-waters-500: #8094a5;
  --color-inland-waters-600: #647788;
  --color-inland-waters-700: #4d5e6d;
  --color-inland-waters-800: #3a4956;
  --color-inland-waters-900: #2b3843;
  --color-inland-waters-950: #19222a;
  --color-rosemary: #3e625d;
  --color-rosemary-50: #e5fbf7;
  --color-rosemary-100: #d9f1ed;
  --color-rosemary-200: #c3e0db;
  --color-rosemary-300: #aacbc6;
  --color-rosemary-400: #89ada7;
  --color-rosemary-500: #6d928d;
  --color-rosemary-600: #547873;
  --color-rosemary-700: #3e625d;
  --color-rosemary-800: #2f4d49;
  --color-rosemary-900: #223b38;
  --color-rosemary-950: #132523;
  --color-swamp-thing: #112927;
  --color-swamp-thing-50: #e9f9f7;
  --color-swamp-thing-100: #deefed;
  --color-swamp-thing-200: #c8ddda;
  --color-swamp-thing-300: #afc7c4;
  --color-swamp-thing-400: #8ea8a5;
  --color-swamp-thing-500: #738d8b;
  --color-swamp-thing-600: #5a7471;
  --color-swamp-thing-700: #465e5b;
  --color-swamp-thing-800: #364b49;
  --color-swamp-thing-900: #293b3a;
  --color-swamp-thing-950: #112927;
}