Fresh Air to Midnight Dreams color palette

ACE9FFFresh Air 5DB2CCBlue Bobbin A4674BHot Cacao 672700Roastery 00222EMidnight Dreams

About this palette

Fresh Air to Midnight Dreams is a 5-color cool, vintage palette: #ACE9FF (Fresh Air), #5DB2CC (Blue Bobbin), #A4674B (Hot Cacao), #672700 (Roastery), #00222E (Midnight Dreams). It mixes blue, brown tones and feels cool overall. The strongest text pairing is #ACE9FF on #00222E with a contrast ratio of 12.50:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fresh Air	rgb(172, 233, 255)	hsl(196, 100%, 84%)
Blue Bobbin	rgb(93, 178, 204)	hsl(194, 52%, 58%)
Hot Cacao	rgb(164, 103, 75)	hsl(19, 37%, 47%)
Roastery	rgb(103, 39, 0)	hsl(23, 100%, 20%)
Midnight Dreams	rgb(0, 34, 46)	hsl(196, 100%, 9%)

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.50:1 Super#ACE9FF on #00222E
Aa12.50:1 Super#00222E on #ACE9FF
Aa8.49:1 Very good#ACE9FF on #672700
Aa8.49:1 Very good#672700 on #ACE9FF
Aa6.86:1 Good#5DB2CC on #00222E
Aa6.86:1 Good#00222E on #5DB2CC
Aa4.66:1 Good#5DB2CC on #672700
Aa4.66:1 Good#672700 on #5DB2CC

Color blindness preview

CSS variables

/* Fresh Air to Midnight Dreams — https://swatchly.xyz/palette/ace9ff-5db2cc-a4674b-672700-00222e */
:root {
  --fresh-air: #ace9ff;
  --blue-bobbin: #5db2cc;
  --hot-cacao: #a4674b;
  --roastery: #672700;
  --midnight-dreams: #00222e;
}

Tailwind CSS v4

/* Fresh Air to Midnight Dreams — https://swatchly.xyz/palette/ace9ff-5db2cc-a4674b-672700-00222e */
@theme {
  --color-fresh-air: #ace9ff;
  --color-fresh-air-50: #f2fbff;
  --color-fresh-air-100: #ddf6ff;
  --color-fresh-air-200: #ace9ff;
  --color-fresh-air-300: #9ecfe1;
  --color-fresh-air-400: #77afc3;
  --color-fresh-air-500: #5893a7;
  --color-fresh-air-600: #3d778a;
  --color-fresh-air-700: #285e70;
  --color-fresh-air-800: #184958;
  --color-fresh-air-900: #0e3845;
  --color-fresh-air-950: #05232d;
  --color-blue-bobbin: #5db2cc;
  --color-blue-bobbin-50: #e9faff;
  --color-blue-bobbin-100: #d2f4ff;
  --color-blue-bobbin-200: #a9e5f8;
  --color-blue-bobbin-300: #8bd0e6;
  --color-blue-bobbin-400: #5db2cc;
  --color-blue-bobbin-500: #3f95af;
  --color-blue-bobbin-600: #1e7992;
  --color-blue-bobbin-700: #006177;
  --color-blue-bobbin-800: #004b5d;
  --color-blue-bobbin-900: #003a48;
  --color-blue-bobbin-950: #00242e;
  --color-hot-cacao: #a4674b;
  --color-hot-cacao-50: #fff2ec;
  --color-hot-cacao-100: #ffe8de;
  --color-hot-cacao-200: #ffd1bc;
  --color-hot-cacao-300: #f1baa1;
  --color-hot-cacao-400: #d79a7f;
  --color-hot-cacao-500: #be8063;
  --color-hot-cacao-600: #a4674b;
  --color-hot-cacao-700: #874f35;
  --color-hot-cacao-800: #6c3b24;
  --color-hot-cacao-900: #552b17;
  --color-hot-cacao-950: #37190b;
  --color-roastery: #672700;
  --color-roastery-50: #fff2ec;
  --color-roastery-100: #ffe5da;
  --color-roastery-200: #ffcab2;
  --color-roastery-300: #f0ae90;
  --color-roastery-400: #d38c6b;
  --color-roastery-500: #b66f4d;
  --color-roastery-600: #975434;
  --color-roastery-700: #7a3e21;
  --color-roastery-800: #672700;
  --color-roastery-900: #4c210a;
  --color-roastery-950: #311204;
  --color-midnight-dreams: #00222e;
  --color-midnight-dreams-50: #e9f8ff;
  --color-midnight-dreams-100: #d9f0fa;
  --color-midnight-dreams-200: #c1dde8;
  --color-midnight-dreams-300: #a8c7d4;
  --color-midnight-dreams-400: #86a8b6;
  --color-midnight-dreams-500: #698c9b;
  --color-midnight-dreams-600: #50717f;
  --color-midnight-dreams-700: #3b5a66;
  --color-midnight-dreams-800: #2b4651;
  --color-midnight-dreams-900: #1f353f;
  --color-midnight-dreams-950: #00222e;
}