Otterly Brown to Frozen Periwinkle color palette

814515Otterly Brown 906149Weathered Leather 9E7D76Hemp AC98A2Walkway B8B4D0Pastel Lilac C4D0FFFrozen Periwinkle

Open in generator Export PNG, PDF, ASE…

About this palette

Otterly Brown to Frozen Periwinkle is a 6-color muted, vintage palette: #814515 (Otterly Brown), #906149 (Weathered Leather), #9E7D76 (Hemp), #AC98A2 (Walkway), #B8B4D0 (Pastel Lilac), #C4D0FF (Frozen Periwinkle). It mixes brown, red, gray, purple, blue tones and feels warm overall. The strongest text pairing is #814515 on #C4D0FF with a contrast ratio of 4.94:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Otterly Brown	rgb(129, 69, 21)	hsl(27, 72%, 29%)
Weathered Leather	rgb(144, 97, 73)	hsl(20, 33%, 43%)
Hemp	rgb(158, 125, 118)	hsl(10, 17%, 54%)
Walkway	rgb(172, 152, 162)	hsl(330, 11%, 64%)
Pastel Lilac	rgb(184, 180, 208)	hsl(249, 23%, 76%)
Frozen Periwinkle	rgb(196, 208, 255)	hsl(228, 100%, 88%)

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.

Aa4.94:1 Good#814515 on #C4D0FF
Aa4.94:1 Good#C4D0FF on #814515
Aa3.75:1 Poor#814515 on #B8B4D0
Aa3.75:1 Poor#B8B4D0 on #814515
Aa3.46:1 Poor#906149 on #C4D0FF
Aa3.46:1 Poor#C4D0FF on #906149

Color blindness preview

CSS variables

/* Otterly Brown to Frozen Periwinkle — https://swatchly.xyz/palette/814515-906149-9e7d76-ac98a2-b8b4d0-c4d0ff */
:root {
  --otterly-brown: #814515;
  --weathered-leather: #906149;
  --hemp: #9e7d76;
  --walkway: #ac98a2;
  --pastel-lilac: #b8b4d0;
  --frozen-periwinkle: #c4d0ff;
}

Tailwind CSS v4

/* Otterly Brown to Frozen Periwinkle — https://swatchly.xyz/palette/814515-906149-9e7d76-ac98a2-b8b4d0-c4d0ff */
@theme {
  --color-otterly-brown: #814515;
  --color-otterly-brown-50: #fff2ea;
  --color-otterly-brown-100: #ffe6d5;
  --color-otterly-brown-200: #ffccaa;
  --color-otterly-brown-300: #eeb38c;
  --color-otterly-brown-400: #d29267;
  --color-otterly-brown-500: #b67649;
  --color-otterly-brown-600: #995c30;
  --color-otterly-brown-700: #814515;
  --color-otterly-brown-800: #66350e;
  --color-otterly-brown-900: #512705;
  --color-otterly-brown-950: #351701;
  --color-weathered-leather: #906149;
  --color-weathered-leather-50: #fff2ec;
  --color-weathered-leather-100: #ffe6d9;
  --color-weathered-leather-200: #f6cfbb;
  --color-weathered-leather-300: #e4b7a1;
  --color-weathered-leather-400: #c7977e;
  --color-weathered-leather-500: #ac7b62;
  --color-weathered-leather-600: #906149;
  --color-weathered-leather-700: #754b36;
  --color-weathered-leather-800: #5e3926;
  --color-weathered-leather-900: #4a2b1b;
  --color-weathered-leather-950: #30190e;
  --color-hemp: #9e7d76;
  --color-hemp-50: #fff2ef;
  --color-hemp-100: #fce5e0;
  --color-hemp-200: #ebd0cb;
  --color-hemp-300: #d7b9b2;
  --color-hemp-400: #b99992;
  --color-hemp-500: #9e7d76;
  --color-hemp-600: #82635c;
  --color-hemp-700: #694d47;
  --color-hemp-800: #543b36;
  --color-hemp-900: #412d29;
  --color-hemp-950: #2a1b18;
  --color-walkway: #ac98a2;
  --color-walkway-50: #fcf0f6;
  --color-walkway-100: #f3e5ec;
  --color-walkway-200: #e0d0d8;
  --color-walkway-300: #cab9c1;
  --color-walkway-400: #ac98a2;
  --color-walkway-500: #917d87;
  --color-walkway-600: #76646d;
  --color-walkway-700: #5f4f57;
  --color-walkway-800: #4b3d44;
  --color-walkway-900: #3a2e35;
  --color-walkway-950: #251c21;
  --color-pastel-lilac: #b8b4d0;
  --color-pastel-lilac-50: #f0eeff;
  --color-pastel-lilac-100: #e5e2f6;
  --color-pastel-lilac-200: #d0cde3;
  --color-pastel-lilac-300: #b8b4d0;
  --color-pastel-lilac-400: #9a96b1;
  --color-pastel-lilac-500: #817d97;
  --color-pastel-lilac-600: #68647d;
  --color-pastel-lilac-700: #534f66;
  --color-pastel-lilac-800: #413e52;
  --color-pastel-lilac-900: #333041;
  --color-pastel-lilac-950: #1f1d29;
  --color-frozen-periwinkle: #c4d0ff;
  --color-frozen-periwinkle-50: #edf1ff;
  --color-frozen-periwinkle-100: #dfe6ff;
  --color-frozen-periwinkle-200: #c4d0ff;
  --color-frozen-periwinkle-300: #b0bbe3;
  --color-frozen-periwinkle-400: #919cc7;
  --color-frozen-periwinkle-500: #7781ac;
  --color-frozen-periwinkle-600: #5e6890;
  --color-frozen-periwinkle-700: #4a5277;
  --color-frozen-periwinkle-800: #394060;
  --color-frozen-periwinkle-900: #2b314c;
  --color-frozen-periwinkle-950: #191e31;
}