Blue Moon to Cotton Ball color palette

38919DBlue Moon D8B394Cashmere 342517Wood Bark 005260Raging Thunderstorm F3F5FFCotton Ball

About this palette

Blue Moon to Cotton Ball is a 5-color muted palette: #38919D (Blue Moon), #D8B394 (Cashmere), #342517 (Wood Bark), #005260 (Raging Thunderstorm), #F3F5FF (Cotton Ball). It mixes turquoise, orange, gray, white tones and feels cool overall. The strongest text pairing is #342517 on #F3F5FF with a contrast ratio of 13.57:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blue Moon	rgb(56, 145, 157)	hsl(187, 47%, 42%)
Cashmere	rgb(216, 179, 148)	hsl(27, 47%, 71%)
Wood Bark	rgb(52, 37, 23)	hsl(29, 39%, 15%)
Raging Thunderstorm	rgb(0, 82, 96)	hsl(189, 100%, 19%)
Cotton Ball	rgb(243, 245, 255)	hsl(230, 100%, 98%)

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.57:1 Super#342517 on #F3F5FF
Aa13.57:1 Super#F3F5FF on #342517
Aa8.13:1 Very good#005260 on #F3F5FF
Aa8.13:1 Very good#F3F5FF on #005260
Aa7.59:1 Very good#D8B394 on #342517
Aa7.59:1 Very good#342517 on #D8B394
Aa4.54:1 Good#D8B394 on #005260
Aa4.54:1 Good#005260 on #D8B394

Color blindness preview

CSS variables

/* Blue Moon to Cotton Ball — https://swatchly.xyz/palette/38919d-d8b394-342517-005260-f3f5ff */
:root {
  --blue-moon: #38919d;
  --cashmere: #d8b394;
  --wood-bark: #342517;
  --raging-thunderstorm: #005260;
  --cotton-ball: #f3f5ff;
}

Tailwind CSS v4

/* Blue Moon to Cotton Ball — https://swatchly.xyz/palette/38919d-d8b394-342517-005260-f3f5ff */
@theme {
  --color-blue-moon: #38919d;
  --color-blue-moon-50: #defbff;
  --color-blue-moon-100: #c1f5fc;
  --color-blue-moon-200: #a4e2eb;
  --color-blue-moon-300: #84ccd7;
  --color-blue-moon-400: #5aadb9;
  --color-blue-moon-500: #38919d;
  --color-blue-moon-600: #187682;
  --color-blue-moon-700: #005f69;
  --color-blue-moon-800: #004a52;
  --color-blue-moon-900: #003940;
  --color-blue-moon-950: #002429;
  --color-cashmere: #d8b394;
  --color-cashmere-50: #ffefe2;
  --color-cashmere-100: #fbe2cd;
  --color-cashmere-200: #eaccb4;
  --color-cashmere-300: #d8b394;
  --color-cashmere-400: #b89578;
  --color-cashmere-500: #9d7b5d;
  --color-cashmere-600: #826246;
  --color-cashmere-700: #6a4d33;
  --color-cashmere-800: #553b25;
  --color-cashmere-900: #432d1a;
  --color-cashmere-950: #2b1b0d;
  --color-wood-bark: #342517;
  --color-wood-bark-50: #fef3e9;
  --color-wood-bark-100: #f5e9de;
  --color-wood-bark-200: #e3d4c7;
  --color-wood-bark-300: #cebeaf;
  --color-wood-bark-400: #b09e8e;
  --color-wood-bark-500: #978474;
  --color-wood-bark-600: #7d6c5c;
  --color-wood-bark-700: #675749;
  --color-wood-bark-800: #554639;
  --color-wood-bark-900: #45382d;
  --color-wood-bark-950: #342517;
  --color-raging-thunderstorm: #005260;
  --color-raging-thunderstorm-50: #e4faff;
  --color-raging-thunderstorm-100: #cbf3fd;
  --color-raging-thunderstorm-200: #b1e1ed;
  --color-raging-thunderstorm-300: #95cdda;
  --color-raging-thunderstorm-400: #71afbe;
  --color-raging-thunderstorm-500: #5395a4;
  --color-raging-thunderstorm-600: #397b89;
  --color-raging-thunderstorm-700: #256472;
  --color-raging-thunderstorm-800: #005260;
  --color-raging-thunderstorm-900: #093f49;
  --color-raging-thunderstorm-950: #022830;
  --color-cotton-ball: #f3f5ff;
  --color-cotton-ball-50: #f3f5ff;
  --color-cotton-ball-100: #eaebf1;
  --color-cotton-ball-200: #d6d7de;
  --color-cotton-ball-300: #bfc1c9;
  --color-cotton-ball-400: #9fa1aa;
  --color-cotton-ball-500: #84868f;
  --color-cotton-ball-600: #6a6b74;
  --color-cotton-ball-700: #53555c;
  --color-cotton-ball-800: #414249;
  --color-cotton-ball-900: #313238;
  --color-cotton-ball-950: #1e1f23;
}