Cotton Ball to Wood Bark Color Palette

About this palette

Cotton Ball to Wood Bark is a 4-color muted palette: #EFF9FF (Cotton Ball), #88B4CE (Crystal Lake), #7E5843 (Brownstone), #332721 (Wood Bark). It mixes white, blue, brown, gray tones and feels balanced overall. The strongest text pairing is #EFF9FF on #332721 with a contrast ratio of 13.53:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cotton Ball	rgb(239, 249, 255)	hsl(203, 100%, 97%)
Crystal Lake	rgb(136, 180, 206)	hsl(202, 42%, 67%)
Brownstone	rgb(126, 88, 67)	hsl(21, 31%, 38%)
Wood Bark	rgb(51, 39, 33)	hsl(20, 21%, 16%)

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.

Aa13.53:1 Super#EFF9FF on #332721
Aa13.53:1 Super#332721 on #EFF9FF
Aa6.52:1 Good#88B4CE on #332721
Aa6.52:1 Good#332721 on #88B4CE
Aa5.85:1 Good#EFF9FF on #7E5843
Aa5.85:1 Good#7E5843 on #EFF9FF

Color blindness preview

CSS variables

/* Cotton Ball to Wood Bark — https://swatchly.xyz/palette/eff9ff-88b4ce-7e5843-332721 */
:root {
  --cotton-ball: #eff9ff;
  --crystal-lake: #88b4ce;
  --brownstone: #7e5843;
  --wood-bark: #332721;
}

Tailwind CSS v4

/* Cotton Ball to Wood Bark — https://swatchly.xyz/palette/eff9ff-88b4ce-7e5843-332721 */
@theme {
  --color-cotton-ball: #eff9ff;
  --color-cotton-ball-50: #eff9ff;
  --color-cotton-ball-100: #e8eef2;
  --color-cotton-ball-200: #d3dade;
  --color-cotton-ball-300: #bbc3c8;
  --color-cotton-ball-400: #9ba4a9;
  --color-cotton-ball-500: #7f888d;
  --color-cotton-ball-600: #656d72;
  --color-cotton-ball-700: #4f575b;
  --color-cotton-ball-800: #3d4347;
  --color-cotton-ball-900: #2e3437;
  --color-cotton-ball-950: #1c2022;
  --color-crystal-lake: #88b4ce;
  --color-crystal-lake-50: #f3fbff;
  --color-crystal-lake-100: #e3f4ff;
  --color-crystal-lake-200: #c6e5f8;
  --color-crystal-lake-300: #add1e6;
  --color-crystal-lake-400: #88b4ce;
  --color-crystal-lake-500: #6b96af;
  --color-crystal-lake-600: #4f7991;
  --color-crystal-lake-700: #396076;
  --color-crystal-lake-800: #284a5d;
  --color-crystal-lake-900: #1b3848;
  --color-crystal-lake-950: #0d222d;
  --color-brownstone: #7e5843;
  --color-brownstone-50: #fff2eb;
  --color-brownstone-100: #ffe3d4;
  --color-brownstone-200: #eeccba;
  --color-brownstone-300: #d8b29e;
  --color-brownstone-400: #b9907a;
  --color-brownstone-500: #9b745e;
  --color-brownstone-600: #7e5843;
  --color-brownstone-700: #654533;
  --color-brownstone-800: #513525;
  --color-brownstone-900: #40281b;
  --color-brownstone-950: #29180e;
  --color-wood-bark: #332721;
  --color-wood-bark-50: #fcf3ef;
  --color-wood-bark-100: #f3e9e4;
  --color-wood-bark-200: #e1d5cf;
  --color-wood-bark-300: #cbbeb7;
  --color-wood-bark-400: #ab9c95;
  --color-wood-bark-500: #8e7f78;
  --color-wood-bark-600: #71635d;
  --color-wood-bark-700: #584c46;
  --color-wood-bark-800: #423833;
  --color-wood-bark-900: #332721;
  --color-wood-bark-950: #1d1714;
}