Pink to Grizzly Color Palette

About this palette

Pink to Grizzly is a 5-color warm palette: #FFC2CF (Pink), #D96034 (Koi), #762042 (Beet Red), #FF874C (Tiger of Mysore), #845800 (Grizzly). It mixes pink, red, orange, brown tones and feels warm overall. The strongest text pairing is #FFC2CF on #762042 with a contrast ratio of 6.75:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pink	rgb(255, 194, 207)	hsl(347, 100%, 88%)
Koi	rgb(217, 96, 52)	hsl(16, 68%, 53%)
Beet Red	rgb(118, 32, 66)	hsl(336, 57%, 29%)
Tiger of Mysore	rgb(255, 135, 76)	hsl(20, 100%, 65%)
Grizzly	rgb(132, 88, 0)	hsl(40, 100%, 26%)

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.

Aa6.75:1 Good#FFC2CF on #762042
Aa6.75:1 Good#762042 on #FFC2CF
Aa4.29:1 Poor#762042 on #FF874C
Aa4.29:1 Poor#FF874C on #762042
Aa4.11:1 Poor#FFC2CF on #845800
Aa4.11:1 Poor#845800 on #FFC2CF

Color blindness preview

CSS variables

/* Pink to Grizzly — https://swatchly.xyz/palette/ffc2cf-d96034-762042-ff874c-845800 */
:root {
  --pink: #ffc2cf;
  --koi: #d96034;
  --beet-red: #762042;
  --tiger-of-mysore: #ff874c;
  --grizzly: #845800;
}

Tailwind CSS v4

/* Pink to Grizzly — https://swatchly.xyz/palette/ffc2cf-d96034-762042-ff874c-845800 */
@theme {
  --color-pink: #ffc2cf;
  --color-pink-50: #ffeff2;
  --color-pink-100: #ffe0e6;
  --color-pink-200: #ffc2cf;
  --color-pink-300: #e3afba;
  --color-pink-400: #c68e9a;
  --color-pink-500: #aa7380;
  --color-pink-600: #8e5a66;
  --color-pink-700: #744550;
  --color-pink-800: #5d343e;
  --color-pink-900: #49272f;
  --color-pink-950: #2f171d;
  --color-koi: #d96034;
  --color-koi-50: #fff3ef;
  --color-koi-100: #ffe7de;
  --color-koi-200: #ffccbb;
  --color-koi-300: #ffac90;
  --color-koi-400: #f47f56;
  --color-koi-500: #d96034;
  --color-koi-600: #b84413;
  --color-koi-700: #973000;
  --color-koi-800: #772400;
  --color-koi-900: #5d1a00;
  --color-koi-950: #3c0e00;
  --color-beet-red: #762042;
  --color-beet-red-50: #fff1f4;
  --color-beet-red-100: #ffe3ea;
  --color-beet-red-200: #ffc5d5;
  --color-beet-red-300: #faa5be;
  --color-beet-red-400: #de829f;
  --color-beet-red-500: #c36684;
  --color-beet-red-600: #a54c6a;
  --color-beet-red-700: #893855;
  --color-beet-red-800: #762042;
  --color-beet-red-900: #591c33;
  --color-beet-red-950: #3b0e1f;
  --color-tiger-of-mysore: #ff874c;
  --color-tiger-of-mysore-50: #fff7f4;
  --color-tiger-of-mysore-100: #ffede5;
  --color-tiger-of-mysore-200: #ffd5c3;
  --color-tiger-of-mysore-300: #ffb898;
  --color-tiger-of-mysore-400: #ff874c;
  --color-tiger-of-mysore-500: #dd692c;
  --color-tiger-of-mysore-600: #ba4c00;
  --color-tiger-of-mysore-700: #943b00;
  --color-tiger-of-mysore-800: #742c00;
  --color-tiger-of-mysore-900: #592000;
  --color-tiger-of-mysore-950: #381100;
  --color-grizzly: #845800;
  --color-grizzly-50: #fff3e4;
  --color-grizzly-100: #ffe5c2;
  --color-grizzly-200: #f3cd99;
  --color-grizzly-300: #deb377;
  --color-grizzly-400: #bf914e;
  --color-grizzly-500: #a2742c;
  --color-grizzly-600: #845800;
  --color-grizzly-700: #694500;
  --color-grizzly-800: #533600;
  --color-grizzly-900: #412900;
  --color-grizzly-950: #2a1900;
}