Silk Star to Muddy Yellow color palette

F0F0C9Silk Star C4B9EEPurple Illusion 632E00Count Chocula 0090B1Munsell Blue 914A00Brownie BEAC00Muddy Yellow

Open in generator Export PNG, PDF, ASE…

About this palette

Silk Star to Muddy Yellow is a 6-color warm palette: #F0F0C9 (Silk Star), #C4B9EE (Purple Illusion), #632E00 (Count Chocula), #0090B1 (Munsell Blue), #914A00 (Brownie), #BEAC00 (Muddy Yellow). It mixes white, purple, brown, blue, yellow tones and feels warm overall. The strongest text pairing is #F0F0C9 on #632E00 with a contrast ratio of 9.38:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Silk Star	rgb(240, 240, 201)	hsl(60, 57%, 86%)
Purple Illusion	rgb(196, 185, 238)	hsl(252, 61%, 83%)
Count Chocula	rgb(99, 46, 0)	hsl(28, 100%, 19%)
Munsell Blue	rgb(0, 144, 177)	hsl(191, 100%, 35%)
Brownie	rgb(145, 74, 0)	hsl(31, 100%, 28%)
Muddy Yellow	rgb(190, 172, 0)	hsl(54, 100%, 37%)

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.

Aa9.38:1 Very good#F0F0C9 on #632E00
Aa9.38:1 Very good#632E00 on #F0F0C9
Aa6.00:1 Good#C4B9EE on #632E00
Aa6.00:1 Good#632E00 on #C4B9EE
Aa5.66:1 Good#F0F0C9 on #914A00
Aa5.66:1 Good#914A00 on #F0F0C9
Aa4.73:1 Good#632E00 on #BEAC00
Aa4.73:1 Good#BEAC00 on #632E00

Color blindness preview

CSS variables

/* Silk Star to Muddy Yellow — https://swatchly.xyz/palette/f0f0c9-c4b9ee-632e00-0090b1-914a00-beac00 */
:root {
  --silk-star: #f0f0c9;
  --purple-illusion: #c4b9ee;
  --count-chocula: #632e00;
  --munsell-blue: #0090b1;
  --brownie: #914a00;
  --muddy-yellow: #beac00;
}

Tailwind CSS v4

/* Silk Star to Muddy Yellow — https://swatchly.xyz/palette/f0f0c9-c4b9ee-632e00-0090b1-914a00-beac00 */
@theme {
  --color-silk-star: #f0f0c9;
  --color-silk-star-50: #f8f8e3;
  --color-silk-star-100: #f0f0c9;
  --color-silk-star-200: #dbdbbf;
  --color-silk-star-300: #c5c5a5;
  --color-silk-star-400: #a5a582;
  --color-silk-star-500: #8a8966;
  --color-silk-star-600: #6f6e4c;
  --color-silk-star-700: #585738;
  --color-silk-star-800: #454429;
  --color-silk-star-900: #35341d;
  --color-silk-star-950: #212010;
  --color-purple-illusion: #c4b9ee;
  --color-purple-illusion-50: #f6f4ff;
  --color-purple-illusion-100: #ece8ff;
  --color-purple-illusion-200: #dad2fa;
  --color-purple-illusion-300: #c4b9ee;
  --color-purple-illusion-400: #a49acb;
  --color-purple-illusion-500: #897eb0;
  --color-purple-illusion-600: #6e6493;
  --color-purple-illusion-700: #584e78;
  --color-purple-illusion-800: #443c61;
  --color-purple-illusion-900: #352d4c;
  --color-purple-illusion-950: #201b31;
  --color-count-chocula: #632e00;
  --color-count-chocula-50: #fff2eb;
  --color-count-chocula-100: #ffe5d6;
  --color-count-chocula-200: #fdccae;
  --color-count-chocula-300: #eab390;
  --color-count-chocula-400: #cc916b;
  --color-count-chocula-500: #b0744d;
  --color-count-chocula-600: #925a34;
  --color-count-chocula-700: #764421;
  --color-count-chocula-800: #632e00;
  --color-count-chocula-900: #49250a;
  --color-count-chocula-950: #2f1504;
  --color-munsell-blue: #0090b1;
  --color-munsell-blue-50: #e5f8ff;
  --color-munsell-blue-100: #caf1ff;
  --color-munsell-blue-200: #95e2fd;
  --color-munsell-blue-300: #71ccea;
  --color-munsell-blue-400: #3fadcd;
  --color-munsell-blue-500: #0090b1;
  --color-munsell-blue-600: #00748f;
  --color-munsell-blue-700: #005c72;
  --color-munsell-blue-800: #00485a;
  --color-munsell-blue-900: #003847;
  --color-munsell-blue-950: #00232d;
  --color-brownie: #914a00;
  --color-brownie-50: #fff2ea;
  --color-brownie-100: #ffe6d5;
  --color-brownie-200: #ffcead;
  --color-brownie-300: #f7b485;
  --color-brownie-400: #dd945e;
  --color-brownie-500: #c47940;
  --color-brownie-600: #a86024;
  --color-brownie-700: #914a00;
  --color-brownie-800: #733900;
  --color-brownie-900: #592b00;
  --color-brownie-950: #3a1a00;
  --color-muddy-yellow: #beac00;
  --color-muddy-yellow-50: #fffad0;
  --color-muddy-yellow-100: #fbf3ab;
  --color-muddy-yellow-200: #ece089;
  --color-muddy-yellow-300: #d9cb63;
  --color-muddy-yellow-400: #beac00;
  --color-muddy-yellow-500: #9e8f00;
  --color-muddy-yellow-600: #7f7200;
  --color-muddy-yellow-700: #645a00;
  --color-muddy-yellow-800: #4e4600;
  --color-muddy-yellow-900: #3b3500;
  --color-muddy-yellow-950: #242000;
}