Breeze to Haunt Mist color palette

B1C4E5Breeze 303908Wasabi Nori 7A471CMilk Chocolate C68564Escalope F4F7DDSprig of Sage 5D6993Haunt Mist

Open in generator Export PNG, PDF, ASE…

About this palette

Breeze to Haunt Mist is a 6-color palette: #B1C4E5 (Breeze), #303908 (Wasabi Nori), #7A471C (Milk Chocolate), #C68564 (Escalope), #F4F7DD (Sprig of Sage), #5D6993 (Haunt Mist). It mixes blue, green, brown, orange, white tones and feels cool overall. The strongest text pairing is #303908 on #F4F7DD with a contrast ratio of 11.20:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Breeze	rgb(177, 196, 229)	hsl(218, 50%, 80%)
Wasabi Nori	rgb(48, 57, 8)	hsl(71, 75%, 13%)
Milk Chocolate	rgb(122, 71, 28)	hsl(27, 63%, 29%)
Escalope	rgb(198, 133, 100)	hsl(20, 46%, 58%)
Sprig of Sage	rgb(244, 247, 221)	hsl(67, 62%, 92%)
Haunt Mist	rgb(93, 105, 147)	hsl(227, 22%, 47%)

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.

Aa11.20:1 Very good#303908 on #F4F7DD
Aa11.20:1 Very good#F4F7DD on #303908
Aa6.99:1 Good#7A471C on #F4F7DD
Aa6.99:1 Good#F4F7DD on #7A471C
Aa6.94:1 Good#B1C4E5 on #303908
Aa6.94:1 Good#303908 on #B1C4E5
Aa4.91:1 Good#F4F7DD on #5D6993
Aa4.91:1 Good#5D6993 on #F4F7DD

Color blindness preview

CSS variables

/* Breeze to Haunt Mist — https://swatchly.xyz/palette/b1c4e5-303908-7a471c-c68564-f4f7dd-5d6993 */
:root {
  --breeze: #b1c4e5;
  --wasabi-nori: #303908;
  --milk-chocolate: #7a471c;
  --escalope: #c68564;
  --sprig-of-sage: #f4f7dd;
  --haunt-mist: #5d6993;
}

Tailwind CSS v4

/* Breeze to Haunt Mist — https://swatchly.xyz/palette/b1c4e5-303908-7a471c-c68564-f4f7dd-5d6993 */
@theme {
  --color-breeze: #b1c4e5;
  --color-breeze-50: #f2f7ff;
  --color-breeze-100: #e3edff;
  --color-breeze-200: #ccdaf3;
  --color-breeze-300: #b1c4e5;
  --color-breeze-400: #92a4c3;
  --color-breeze-500: #7788a7;
  --color-breeze-600: #5d6d8b;
  --color-breeze-700: #475671;
  --color-breeze-800: #36435a;
  --color-breeze-900: #283346;
  --color-breeze-950: #171f2d;
  --color-wasabi-nori: #303908;
  --color-wasabi-nori-50: #f2f9dd;
  --color-wasabi-nori-100: #e7f0d0;
  --color-wasabi-nori-200: #d3ddb7;
  --color-wasabi-nori-300: #bcc79c;
  --color-wasabi-nori-400: #9ca879;
  --color-wasabi-nori-500: #818d5d;
  --color-wasabi-nori-600: #687344;
  --color-wasabi-nori-700: #525c31;
  --color-wasabi-nori-800: #404822;
  --color-wasabi-nori-900: #303908;
  --color-wasabi-nori-950: #1e230b;
  --color-milk-chocolate: #7a471c;
  --color-milk-chocolate-50: #fff2ea;
  --color-milk-chocolate-100: #ffe6d4;
  --color-milk-chocolate-200: #facdad;
  --color-milk-chocolate-300: #e8b590;
  --color-milk-chocolate-400: #cb946b;
  --color-milk-chocolate-500: #af784e;
  --color-milk-chocolate-600: #925e35;
  --color-milk-chocolate-700: #7a471c;
  --color-milk-chocolate-800: #603714;
  --color-milk-chocolate-900: #4c290b;
  --color-milk-chocolate-950: #311804;
  --color-escalope: #c68564;
  --color-escalope-50: #ffede5;
  --color-escalope-100: #ffddcd;
  --color-escalope-200: #f9c2a7;
  --color-escalope-300: #e4a88a;
  --color-escalope-400: #c68564;
  --color-escalope-500: #ab6c4b;
  --color-escalope-600: #8f5435;
  --color-escalope-700: #754124;
  --color-escalope-800: #5f3118;
  --color-escalope-900: #4c250f;
  --color-escalope-950: #331606;
  --color-sprig-of-sage: #f4f7dd;
  --color-sprig-of-sage-50: #f4f7dd;
  --color-sprig-of-sage-100: #eaecdc;
  --color-sprig-of-sage-200: #d7d9c6;
  --color-sprig-of-sage-300: #c0c3ad;
  --color-sprig-of-sage-400: #a1a48c;
  --color-sprig-of-sage-500: #868871;
  --color-sprig-of-sage-600: #6c6e58;
  --color-sprig-of-sage-700: #555743;
  --color-sprig-of-sage-800: #424432;
  --color-sprig-of-sage-900: #333425;
  --color-sprig-of-sage-950: #1f2016;
  --color-haunt-mist: #5d6993;
  --color-haunt-mist-50: #f1f5ff;
  --color-haunt-mist-100: #e4eaff;
  --color-haunt-mist-200: #cbd6fa;
  --color-haunt-mist-300: #b3bfe7;
  --color-haunt-mist-400: #929fcb;
  --color-haunt-mist-500: #7784af;
  --color-haunt-mist-600: #5d6993;
  --color-haunt-mist-700: #485378;
  --color-haunt-mist-800: #374061;
  --color-haunt-mist-900: #29314c;
  --color-haunt-mist-950: #181e32;
}