Roastery to Blue Bikini Color Palette

About this palette

Roastery to Blue Bikini is a 5-color cool palette: #691900 (Roastery), #005B46 (Evergreen), #80E6D3 (Sea Foam), #B35843 (Hot Chilli), #00B9F3 (Blue Bikini). It mixes brown, turquoise, red, blue tones and feels cool overall. The strongest text pairing is #691900 on #80E6D3 with a contrast ratio of 8.15:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Roastery	rgb(105, 25, 0)	hsl(14, 100%, 21%)
Evergreen	rgb(0, 91, 70)	hsl(166, 100%, 18%)
Sea Foam	rgb(128, 230, 211)	hsl(169, 67%, 70%)
Hot Chilli	rgb(179, 88, 67)	hsl(11, 46%, 48%)
Blue Bikini	rgb(0, 185, 243)	hsl(194, 100%, 48%)

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.

Aa8.15:1 Very good#691900 on #80E6D3
Aa8.15:1 Very good#80E6D3 on #691900
Aa5.48:1 Good#005B46 on #80E6D3
Aa5.48:1 Good#80E6D3 on #005B46
Aa5.31:1 Good#691900 on #00B9F3
Aa5.31:1 Good#00B9F3 on #691900
Aa3.57:1 Poor#005B46 on #00B9F3
Aa3.57:1 Poor#00B9F3 on #005B46

Color blindness preview

CSS variables

/* Roastery to Blue Bikini — https://swatchly.xyz/palette/691900-005b46-80e6d3-b35843-00b9f3 */
:root {
  --roastery: #691900;
  --evergreen: #005b46;
  --sea-foam: #80e6d3;
  --hot-chilli: #b35843;
  --blue-bikini: #00b9f3;
}

Tailwind CSS v4

/* Roastery to Blue Bikini — https://swatchly.xyz/palette/691900-005b46-80e6d3-b35843-00b9f3 */
@theme {
  --color-roastery: #691900;
  --color-roastery-50: #fff2ee;
  --color-roastery-100: #ffe5dd;
  --color-roastery-200: #ffc9ba;
  --color-roastery-300: #faaa93;
  --color-roastery-400: #df8970;
  --color-roastery-500: #c56d55;
  --color-roastery-600: #a8543d;
  --color-roastery-700: #8d402a;
  --color-roastery-800: #75301d;
  --color-roastery-900: #691900;
  --color-roastery-950: #411408;
  --color-evergreen: #005b46;
  --color-evergreen-50: #dafff1;
  --color-evergreen-100: #caf7e6;
  --color-evergreen-200: #ade4d0;
  --color-evergreen-300: #8ecdb7;
  --color-evergreen-400: #67ad95;
  --color-evergreen-500: #479079;
  --color-evergreen-600: #2b735e;
  --color-evergreen-700: #005b46;
  --color-evergreen-800: #074736;
  --color-evergreen-900: #023729;
  --color-evergreen-950: #002219;
  --color-sea-foam: #80e6d3;
  --color-sea-foam-50: #c6fef2;
  --color-sea-foam-100: #b5f4e7;
  --color-sea-foam-200: #80e6d3;
  --color-sea-foam-300: #77cebd;
  --color-sea-foam-400: #4db19f;
  --color-sea-foam-500: #269685;
  --color-sea-foam-600: #007b6c;
  --color-sea-foam-700: #006356;
  --color-sea-foam-800: #004e44;
  --color-sea-foam-900: #003c34;
  --color-sea-foam-950: #002620;
  --color-hot-chilli: #b35843;
  --color-hot-chilli-50: #fff2ef;
  --color-hot-chilli-100: #ffe7e1;
  --color-hot-chilli-200: #ffcfc3;
  --color-hot-chilli-300: #ffb09d;
  --color-hot-chilli-400: #e88d78;
  --color-hot-chilli-500: #cf725c;
  --color-hot-chilli-600: #b35843;
  --color-hot-chilli-700: #94412e;
  --color-hot-chilli-800: #782e1d;
  --color-hot-chilli-900: #5f2012;
  --color-hot-chilli-950: #3f1107;
  --color-blue-bikini: #00b9f3;
  --color-blue-bikini-50: #f0faff;
  --color-blue-bikini-100: #ddf4ff;
  --color-blue-bikini-200: #b3e6ff;
  --color-blue-bikini-300: #7ad5ff;
  --color-blue-bikini-400: #00b9f3;
  --color-blue-bikini-500: #009acb;
  --color-blue-bikini-600: #007ba4;
  --color-blue-bikini-700: #006182;
  --color-blue-bikini-800: #004c66;
  --color-blue-bikini-900: #00394e;
  --color-blue-bikini-950: #002331;
}