Grizzly to York Plum Color Palette

About this palette

Grizzly to York Plum is a 5-color cool, vintage palette: #835400 (Grizzly), #095455 (Cape Verde), #A97F5B (Café au Lait), #A1FCF6 (Eternal Winter), #D0BFF1 (York Plum). It mixes brown, turquoise, orange, purple tones and feels cool overall. The strongest text pairing is #095455 on #A1FCF6 with a contrast ratio of 7.37:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Grizzly	rgb(131, 84, 0)	hsl(38, 100%, 26%)
Cape Verde	rgb(9, 84, 85)	hsl(181, 81%, 18%)
Café au Lait	rgb(169, 127, 91)	hsl(28, 31%, 51%)
Eternal Winter	rgb(161, 252, 246)	hsl(176, 94%, 81%)
York Plum	rgb(208, 191, 241)	hsl(260, 64%, 85%)

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.

Aa7.37:1 Very good#095455 on #A1FCF6
Aa7.37:1 Very good#A1FCF6 on #095455
Aa5.50:1 Good#835400 on #A1FCF6
Aa5.50:1 Good#A1FCF6 on #835400
Aa5.15:1 Good#095455 on #D0BFF1
Aa5.15:1 Good#D0BFF1 on #095455
Aa3.84:1 Poor#835400 on #D0BFF1
Aa3.84:1 Poor#D0BFF1 on #835400

Color blindness preview

CSS variables

/* Grizzly to York Plum — https://swatchly.xyz/palette/835400-095455-a97f5b-a1fcf6-d0bff1 */
:root {
  --grizzly: #835400;
  --cape-verde: #095455;
  --caf-au-lait: #a97f5b;
  --eternal-winter: #a1fcf6;
  --york-plum: #d0bff1;
}

Tailwind CSS v4

/* Grizzly to York Plum — https://swatchly.xyz/palette/835400-095455-a97f5b-a1fcf6-d0bff1 */
@theme {
  --color-grizzly: #835400;
  --color-grizzly-50: #fff3e5;
  --color-grizzly-100: #ffe7ca;
  --color-grizzly-200: #f9d2a2;
  --color-grizzly-300: #e8bc85;
  --color-grizzly-400: #ce9d5f;
  --color-grizzly-500: #b48340;
  --color-grizzly-600: #9a6924;
  --color-grizzly-700: #835400;
  --color-grizzly-800: #674100;
  --color-grizzly-900: #503200;
  --color-grizzly-950: #341e00;
  --color-cape-verde: #095455;
  --color-cape-verde-50: #dafdfd;
  --color-cape-verde-100: #cdf4f4;
  --color-cape-verde-200: #b3e2e2;
  --color-cape-verde-300: #98cece;
  --color-cape-verde-400: #74b1b1;
  --color-cape-verde-500: #579797;
  --color-cape-verde-600: #3d7d7d;
  --color-cape-verde-700: #296667;
  --color-cape-verde-800: #095455;
  --color-cape-verde-900: #0e4041;
  --color-cape-verde-950: #04292a;
  --color-caf-au-lait: #a97f5b;
  --color-caf-au-lait-50: #fff3ea;
  --color-caf-au-lait-100: #ffe7d4;
  --color-caf-au-lait-200: #f3d2b6;
  --color-caf-au-lait-300: #e1bb9b;
  --color-caf-au-lait-400: #c49a77;
  --color-caf-au-lait-500: #a97f5b;
  --color-caf-au-lait-600: #8c6442;
  --color-caf-au-lait-700: #724e2e;
  --color-caf-au-lait-800: #5b3c1f;
  --color-caf-au-lait-900: #472d14;
  --color-caf-au-lait-950: #2e1b09;
  --color-eternal-winter: #a1fcf6;
  --color-eternal-winter-50: #cefefb;
  --color-eternal-winter-100: #a1fcf6;
  --color-eternal-winter-200: #a3e4df;
  --color-eternal-winter-300: #84cfca;
  --color-eternal-winter-400: #5bb1ac;
  --color-eternal-winter-500: #389691;
  --color-eternal-winter-600: #157b77;
  --color-eternal-winter-700: #00635f;
  --color-eternal-winter-800: #004d4a;
  --color-eternal-winter-900: #003c39;
  --color-eternal-winter-950: #002524;
  --color-york-plum: #d0bff1;
  --color-york-plum-50: #faf8ff;
  --color-york-plum-100: #f3edff;
  --color-york-plum-200: #e3d7fb;
  --color-york-plum-300: #d0bff1;
  --color-york-plum-400: #ae9fcc;
  --color-york-plum-500: #9282b0;
  --color-york-plum-600: #766692;
  --color-york-plum-700: #5d4f77;
  --color-york-plum-800: #493c5f;
  --color-york-plum-900: #372c4a;
  --color-york-plum-950: #221b30;
}