Silken Chocolate to Butternut Color Palette

About this palette

Silken Chocolate to Butternut is a 5-color warm, earthy, vintage palette: #B97C56 (Silken Chocolate), #F0FAFF (Cotton Ball), #8D4600 (Otterly Brown), #00313C (Nordic Noir), #FFA172 (Butternut). It mixes orange, white, brown, blue tones and feels warm overall. The strongest text pairing is #F0FAFF on #00313C with a contrast ratio of 13.18:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Silken Chocolate	rgb(185, 124, 86)	hsl(23, 41%, 53%)
Cotton Ball	rgb(240, 250, 255)	hsl(200, 100%, 97%)
Otterly Brown	rgb(141, 70, 0)	hsl(30, 100%, 28%)
Nordic Noir	rgb(0, 49, 60)	hsl(191, 100%, 12%)
Butternut	rgb(255, 161, 114)	hsl(20, 100%, 72%)

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.18:1 Super#F0FAFF on #00313C
Aa13.18:1 Super#00313C on #F0FAFF
Aa7.04:1 Very good#00313C on #FFA172
Aa7.04:1 Very good#FFA172 on #00313C
Aa6.59:1 Good#F0FAFF on #8D4600
Aa6.59:1 Good#8D4600 on #F0FAFF
Aa4.04:1 Poor#B97C56 on #00313C
Aa4.04:1 Poor#00313C on #B97C56

Color blindness preview

CSS variables

/* Silken Chocolate to Butternut — https://swatchly.xyz/palette/b97c56-f0faff-8d4600-00313c-ffa172 */
:root {
  --silken-chocolate: #b97c56;
  --cotton-ball: #f0faff;
  --otterly-brown: #8d4600;
  --nordic-noir: #00313c;
  --butternut: #ffa172;
}

Tailwind CSS v4

/* Silken Chocolate to Butternut — https://swatchly.xyz/palette/b97c56-f0faff-8d4600-00313c-ffa172 */
@theme {
  --color-silken-chocolate: #b97c56;
  --color-silken-chocolate-50: #fff4ed;
  --color-silken-chocolate-100: #ffe8db;
  --color-silken-chocolate-200: #ffd0b3;
  --color-silken-chocolate-300: #eeb897;
  --color-silken-chocolate-400: #d39773;
  --color-silken-chocolate-500: #b97c56;
  --color-silken-chocolate-600: #9b613b;
  --color-silken-chocolate-700: #7f4a27;
  --color-silken-chocolate-800: #663718;
  --color-silken-chocolate-900: #50290e;
  --color-silken-chocolate-950: #331805;
  --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-otterly-brown: #8d4600;
  --color-otterly-brown-50: #fff2ea;
  --color-otterly-brown-100: #ffe6d5;
  --color-otterly-brown-200: #ffcdad;
  --color-otterly-brown-300: #f6b285;
  --color-otterly-brown-400: #dc915e;
  --color-otterly-brown-500: #c1763f;
  --color-otterly-brown-600: #a55c24;
  --color-otterly-brown-700: #8d4600;
  --color-otterly-brown-800: #6f3600;
  --color-otterly-brown-900: #572900;
  --color-otterly-brown-950: #391800;
  --color-nordic-noir: #00313c;
  --color-nordic-noir-50: #e6f9ff;
  --color-nordic-noir-100: #d4f1fa;
  --color-nordic-noir-200: #bcdee8;
  --color-nordic-noir-300: #a2c8d4;
  --color-nordic-noir-400: #7da8b5;
  --color-nordic-noir-500: #5f8b98;
  --color-nordic-noir-600: #446f7b;
  --color-nordic-noir-700: #305661;
  --color-nordic-noir-800: #20414a;
  --color-nordic-noir-900: #00313c;
  --color-nordic-noir-950: #0a1c21;
  --color-butternut: #ffa172;
  --color-butternut-50: #ffefe7;
  --color-butternut-100: #ffe0d2;
  --color-butternut-200: #ffc4a8;
  --color-butternut-300: #ffa172;
  --color-butternut-400: #dc8457;
  --color-butternut-500: #c06839;
  --color-butternut-600: #a24e1f;
  --color-butternut-700: #863a09;
  --color-butternut-800: #6c2b00;
  --color-butternut-900: #562100;
  --color-butternut-950: #381200;
}