Cotton Ball to Roastery color palette

F0FAFFCotton Ball 72C9FCNevermind Nirvana 5FA9C4Frozen Wave 8C542CPrecious Copper 622105Roastery

About this palette

Cotton Ball to Roastery is a 5-color vintage palette: #F0FAFF (Cotton Ball), #72C9FC (Nevermind Nirvana), #5FA9C4 (Frozen Wave), #8C542C (Precious Copper), #622105 (Roastery). It mixes white, blue, brown tones and feels balanced overall. The strongest text pairing is #F0FAFF on #622105 with a contrast ratio of 11.40:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cotton Ball	rgb(240, 250, 255)	hsl(200, 100%, 97%)
Nevermind Nirvana	rgb(114, 201, 252)	hsl(202, 96%, 72%)
Frozen Wave	rgb(95, 169, 196)	hsl(196, 46%, 57%)
Precious Copper	rgb(140, 84, 44)	hsl(25, 52%, 36%)
Roastery	rgb(98, 33, 5)	hsl(18, 90%, 20%)

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.40:1 Very good#F0FAFF on #622105
Aa11.40:1 Very good#622105 on #F0FAFF
Aa6.60:1 Good#72C9FC on #622105
Aa6.60:1 Good#622105 on #72C9FC
Aa5.80:1 Good#F0FAFF on #8C542C
Aa5.80:1 Good#8C542C on #F0FAFF
Aa4.58:1 Good#5FA9C4 on #622105
Aa4.58:1 Good#622105 on #5FA9C4

Color blindness preview

CSS variables

/* Cotton Ball to Roastery — https://swatchly.xyz/palette/f0faff-72c9fc-5fa9c4-8c542c-622105 */
:root {
  --cotton-ball: #f0faff;
  --nevermind-nirvana: #72c9fc;
  --frozen-wave: #5fa9c4;
  --precious-copper: #8c542c;
  --roastery: #622105;
}

Tailwind CSS v4

/* Cotton Ball to Roastery — https://swatchly.xyz/palette/f0faff-72c9fc-5fa9c4-8c542c-622105 */
@theme {
  --color-cotton-ball: #f0faff;
  --color-cotton-ball-50: #f0faff;
  --color-cotton-ball-100: #e9eff2;
  --color-cotton-ball-200: #d4dbde;
  --color-cotton-ball-300: #bcc4c8;
  --color-cotton-ball-400: #9ba4a8;
  --color-cotton-ball-500: #7f888d;
  --color-cotton-ball-600: #656d72;
  --color-cotton-ball-700: #4f575a;
  --color-cotton-ball-800: #3d4447;
  --color-cotton-ball-900: #2e3437;
  --color-cotton-ball-950: #1c2022;
  --color-nevermind-nirvana: #72c9fc;
  --color-nevermind-nirvana-50: #e8f6ff;
  --color-nevermind-nirvana-100: #d3eeff;
  --color-nevermind-nirvana-200: #a7ddff;
  --color-nevermind-nirvana-300: #72c9fc;
  --color-nevermind-nirvana-400: #56a9d9;
  --color-nevermind-nirvana-500: #338ebe;
  --color-nevermind-nirvana-600: #0f73a1;
  --color-nevermind-nirvana-700: #005b82;
  --color-nevermind-nirvana-800: #004867;
  --color-nevermind-nirvana-900: #003751;
  --color-nevermind-nirvana-950: #002234;
  --color-frozen-wave: #5fa9c4;
  --color-frozen-wave-50: #e5f7ff;
  --color-frozen-wave-100: #cbf0ff;
  --color-frozen-wave-200: #a8def4;
  --color-frozen-wave-300: #89c8e0;
  --color-frozen-wave-400: #5fa9c4;
  --color-frozen-wave-500: #438ea8;
  --color-frozen-wave-600: #28738c;
  --color-frozen-wave-700: #125c73;
  --color-frozen-wave-800: #02495c;
  --color-frozen-wave-900: #003849;
  --color-frozen-wave-950: #00242f;
  --color-precious-copper: #8c542c;
  --color-precious-copper-50: #fff2ea;
  --color-precious-copper-100: #ffe4d2;
  --color-precious-copper-200: #fac9a9;
  --color-precious-copper-300: #e6af8b;
  --color-precious-copper-400: #c88d65;
  --color-precious-copper-500: #aa7048;
  --color-precious-copper-600: #8c542c;
  --color-precious-copper-700: #71411e;
  --color-precious-copper-800: #5b3111;
  --color-precious-copper-900: #482509;
  --color-precious-copper-950: #2f1503;
  --color-roastery: #622105;
  --color-roastery-50: #fff2ed;
  --color-roastery-100: #ffe5db;
  --color-roastery-200: #ffcab7;
  --color-roastery-300: #f2ae96;
  --color-roastery-400: #d78e74;
  --color-roastery-500: #bc7358;
  --color-roastery-600: #a05a40;
  --color-roastery-700: #86452e;
  --color-roastery-800: #6e3520;
  --color-roastery-900: #622105;
  --color-roastery-950: #3c180a;
}