Walnut to Sugar Milk Color Palette

About this palette

Walnut to Sugar Milk is a 5-color warm, vintage, gradient palette: #6F3D1A (Walnut), #9D4060 (Velvet Wine), #BF7696 (Prehistoric Pink), #FAB6AA (Peach Bud), #FFF6F4 (Sugar Milk). It mixes brown, red, pink, white tones and feels warm overall. The strongest text pairing is #6F3D1A on #FFF6F4 with a contrast ratio of 8.37:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Walnut	rgb(111, 61, 26)	hsl(25, 62%, 27%)
Velvet Wine	rgb(157, 64, 96)	hsl(339, 42%, 43%)
Prehistoric Pink	rgb(191, 118, 150)	hsl(334, 36%, 61%)
Peach Bud	rgb(250, 182, 170)	hsl(9, 89%, 82%)
Sugar Milk	rgb(255, 246, 244)	hsl(11, 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.

Aa8.37:1 Very good#6F3D1A on #FFF6F4
Aa8.37:1 Very good#FFF6F4 on #6F3D1A
Aa5.92:1 Good#9D4060 on #FFF6F4
Aa5.92:1 Good#FFF6F4 on #9D4060
Aa5.23:1 Good#6F3D1A on #FAB6AA
Aa5.23:1 Good#FAB6AA on #6F3D1A
Aa3.70:1 Poor#9D4060 on #FAB6AA
Aa3.70:1 Poor#FAB6AA on #9D4060

Color blindness preview

CSS variables

/* Walnut to Sugar Milk — https://swatchly.xyz/palette/6f3d1a-9d4060-bf7696-fab6aa-fff6f4 */
:root {
  --walnut: #6f3d1a;
  --velvet-wine: #9d4060;
  --prehistoric-pink: #bf7696;
  --peach-bud: #fab6aa;
  --sugar-milk: #fff6f4;
}

Tailwind CSS v4

/* Walnut to Sugar Milk — https://swatchly.xyz/palette/6f3d1a-9d4060-bf7696-fab6aa-fff6f4 */
@theme {
  --color-walnut: #6f3d1a;
  --color-walnut-50: #fff2eb;
  --color-walnut-100: #ffe5d6;
  --color-walnut-200: #facdb2;
  --color-walnut-300: #e9b798;
  --color-walnut-400: #ce9775;
  --color-walnut-500: #b47d5a;
  --color-walnut-600: #996442;
  --color-walnut-700: #81502f;
  --color-walnut-800: #6f3d1a;
  --color-walnut-900: #552f16;
  --color-walnut-950: #391d09;
  --color-velvet-wine: #9d4060;
  --color-velvet-wine-50: #fff1f4;
  --color-velvet-wine-100: #ffe1e8;
  --color-velvet-wine-200: #ffc1d2;
  --color-velvet-wine-300: #f99eb8;
  --color-velvet-wine-400: #db7a97;
  --color-velvet-wine-500: #bc5c7b;
  --color-velvet-wine-600: #9d4060;
  --color-velvet-wine-700: #802f4c;
  --color-velvet-wine-800: #67213a;
  --color-velvet-wine-900: #52162d;
  --color-velvet-wine-950: #360b1b;
  --color-prehistoric-pink: #bf7696;
  --color-prehistoric-pink-50: #fff3f8;
  --color-prehistoric-pink-100: #ffe8f1;
  --color-prehistoric-pink-200: #ffcde1;
  --color-prehistoric-pink-300: #f3b2cd;
  --color-prehistoric-pink-400: #d892b0;
  --color-prehistoric-pink-500: #bf7696;
  --color-prehistoric-pink-600: #a05a79;
  --color-prehistoric-pink-700: #834361;
  --color-prehistoric-pink-800: #69314b;
  --color-prehistoric-pink-900: #522339;
  --color-prehistoric-pink-950: #351323;
  --color-peach-bud: #fab6aa;
  --color-peach-bud-50: #fff8f6;
  --color-peach-bud-100: #ffece9;
  --color-peach-bud-200: #ffd3cb;
  --color-peach-bud-300: #fab6aa;
  --color-peach-bud-400: #d4968c;
  --color-peach-bud-500: #b8796e;
  --color-peach-bud-600: #995d53;
  --color-peach-bud-700: #7d473e;
  --color-peach-bud-800: #63342d;
  --color-peach-bud-900: #4d2620;
  --color-peach-bud-950: #321612;
  --color-sugar-milk: #fff6f4;
  --color-sugar-milk-50: #fff6f4;
  --color-sugar-milk-100: #f2eceb;
  --color-sugar-milk-200: #ded8d6;
  --color-sugar-milk-300: #c8c0bf;
  --color-sugar-milk-400: #a8a09f;
  --color-sugar-milk-500: #8d8583;
  --color-sugar-milk-600: #716a68;
  --color-sugar-milk-700: #5a5352;
  --color-sugar-milk-800: #47413f;
  --color-sugar-milk-900: #363230;
  --color-sugar-milk-950: #221e1d;
}