Nightly Voyager to Fresh Air color palette

33172ANightly Voyager B2A973Bamboo Forest 443C23Madras 885A7AIndian Silk A7E8FFFresh Air

About this palette

Nightly Voyager to Fresh Air is a 5-color warm, vintage palette: #33172A (Nightly Voyager), #B2A973 (Bamboo Forest), #443C23 (Madras), #885A7A (Indian Silk), #A7E8FF (Fresh Air). It mixes red, yellow, brown, pink, blue tones and feels warm overall. The strongest text pairing is #33172A on #A7E8FF with a contrast ratio of 12.05:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightly Voyager	rgb(51, 23, 42)	hsl(319, 38%, 15%)
Bamboo Forest	rgb(178, 169, 115)	hsl(51, 29%, 57%)
Madras	rgb(68, 60, 35)	hsl(45, 32%, 20%)
Indian Silk	rgb(136, 90, 122)	hsl(318, 20%, 44%)
Fresh Air	rgb(167, 232, 255)	hsl(196, 100%, 83%)

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.

Aa12.05:1 Super#33172A on #A7E8FF
Aa12.05:1 Super#A7E8FF on #33172A
Aa8.16:1 Very good#443C23 on #A7E8FF
Aa8.16:1 Very good#A7E8FF on #443C23
Aa6.80:1 Good#33172A on #B2A973
Aa6.80:1 Good#B2A973 on #33172A
Aa4.60:1 Good#B2A973 on #443C23
Aa4.60:1 Good#443C23 on #B2A973

Color blindness preview

CSS variables

/* Nightly Voyager to Fresh Air — https://swatchly.xyz/palette/33172a-b2a973-443c23-885a7a-a7e8ff */
:root {
  --nightly-voyager: #33172a;
  --bamboo-forest: #b2a973;
  --madras: #443c23;
  --indian-silk: #885a7a;
  --fresh-air: #a7e8ff;
}

Tailwind CSS v4

/* Nightly Voyager to Fresh Air — https://swatchly.xyz/palette/33172a-b2a973-443c23-885a7a-a7e8ff */
@theme {
  --color-nightly-voyager: #33172a;
  --color-nightly-voyager-50: #fff0f9;
  --color-nightly-voyager-100: #fce3f2;
  --color-nightly-voyager-200: #ebcedf;
  --color-nightly-voyager-300: #d6b6ca;
  --color-nightly-voyager-400: #b995ab;
  --color-nightly-voyager-500: #9e7a91;
  --color-nightly-voyager-600: #836176;
  --color-nightly-voyager-700: #6a4c60;
  --color-nightly-voyager-800: #563b4c;
  --color-nightly-voyager-900: #442d3c;
  --color-nightly-voyager-950: #33172a;
  --color-bamboo-forest: #b2a973;
  --color-bamboo-forest-50: #fdf8db;
  --color-bamboo-forest-100: #f5f0cf;
  --color-bamboo-forest-200: #e3ddb6;
  --color-bamboo-forest-300: #cfc89a;
  --color-bamboo-forest-400: #b2a973;
  --color-bamboo-forest-500: #958c58;
  --color-bamboo-forest-600: #79713d;
  --color-bamboo-forest-700: #615929;
  --color-bamboo-forest-800: #4c451a;
  --color-bamboo-forest-900: #3a340f;
  --color-bamboo-forest-950: #242006;
  --color-madras: #443c23;
  --color-madras-50: #faf5e5;
  --color-madras-100: #f1ebd9;
  --color-madras-200: #ded7c2;
  --color-madras-300: #c8c0a7;
  --color-madras-400: #a89f84;
  --color-madras-500: #8b8367;
  --color-madras-600: #70674d;
  --color-madras-700: #575039;
  --color-madras-800: #443c23;
  --color-madras-900: #332e1d;
  --color-madras-950: #1f1c10;
  --color-indian-silk: #885a7a;
  --color-indian-silk-50: #fff0fa;
  --color-indian-silk-100: #ffe1f5;
  --color-indian-silk-200: #f1cae4;
  --color-indian-silk-300: #ddb1cf;
  --color-indian-silk-400: #c090b0;
  --color-indian-silk-500: #a47495;
  --color-indian-silk-600: #885a7a;
  --color-indian-silk-700: #6e4562;
  --color-indian-silk-800: #58344d;
  --color-indian-silk-900: #45273c;
  --color-indian-silk-950: #2c1726;
  --color-fresh-air: #a7e8ff;
  --color-fresh-air-50: #effbff;
  --color-fresh-air-100: #d9f5ff;
  --color-fresh-air-200: #a7e8ff;
  --color-fresh-air-300: #9acee1;
  --color-fresh-air-400: #73afc4;
  --color-fresh-air-500: #5493a8;
  --color-fresh-air-600: #38778b;
  --color-fresh-air-700: #235e71;
  --color-fresh-air-800: #134959;
  --color-fresh-air-900: #093946;
  --color-fresh-air-950: #03232d;
}