Kissed by Mist to Grizzly Color Palette

About this palette

Kissed by Mist to Grizzly is a 5-color cool palette: #F4D3FF (Kissed by Mist), #00DED3 (Fish Boy), #AE54E3 (Magenta Affair), #004E4E (Tropical Forest), #885B00 (Grizzly). It mixes purple, turquoise, brown tones and feels cool overall. The strongest text pairing is #F4D3FF on #004E4E with a contrast ratio of 7.10:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Kissed by Mist	rgb(244, 211, 255)	hsl(285, 100%, 91%)
Fish Boy	rgb(0, 222, 211)	hsl(177, 100%, 44%)
Magenta Affair	rgb(174, 84, 227)	hsl(278, 72%, 61%)
Tropical Forest	rgb(0, 78, 78)	hsl(180, 100%, 15%)
Grizzly	rgb(136, 91, 0)	hsl(40, 100%, 27%)

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.10:1 Very good#F4D3FF on #004E4E
Aa7.10:1 Very good#004E4E on #F4D3FF
Aa5.63:1 Good#00DED3 on #004E4E
Aa5.63:1 Good#004E4E on #00DED3
Aa4.41:1 Poor#F4D3FF on #885B00
Aa4.41:1 Poor#885B00 on #F4D3FF
Aa3.50:1 Poor#00DED3 on #885B00
Aa3.50:1 Poor#885B00 on #00DED3

Color blindness preview

CSS variables

/* Kissed by Mist to Grizzly — https://swatchly.xyz/palette/f4d3ff-00ded3-ae54e3-004e4e-885b00 */
:root {
  --kissed-by-mist: #f4d3ff;
  --fish-boy: #00ded3;
  --magenta-affair: #ae54e3;
  --tropical-forest: #004e4e;
  --grizzly: #885b00;
}

Tailwind CSS v4

/* Kissed by Mist to Grizzly — https://swatchly.xyz/palette/f4d3ff-00ded3-ae54e3-004e4e-885b00 */
@theme {
  --color-kissed-by-mist: #f4d3ff;
  --color-kissed-by-mist-50: #fefaff;
  --color-kissed-by-mist-100: #fbeeff;
  --color-kissed-by-mist-200: #f4d3ff;
  --color-kissed-by-mist-300: #d8bde1;
  --color-kissed-by-mist-400: #b99bc2;
  --color-kissed-by-mist-500: #9c7ea6;
  --color-kissed-by-mist-600: #7f6288;
  --color-kissed-by-mist-700: #654b6e;
  --color-kissed-by-mist-800: #4f3856;
  --color-kissed-by-mist-900: #3e2a44;
  --color-kissed-by-mist-950: #27192b;
  --color-fish-boy: #00ded3;
  --color-fish-boy-50: #d7fffb;
  --color-fish-boy-100: #a5fff7;
  --color-fish-boy-200: #7eeee5;
  --color-fish-boy-300: #00ded3;
  --color-fish-boy-400: #00bab1;
  --color-fish-boy-500: #009b93;
  --color-fish-boy-600: #007d76;
  --color-fish-boy-700: #00635e;
  --color-fish-boy-800: #004d49;
  --color-fish-boy-900: #003c38;
  --color-fish-boy-950: #002523;
  --color-magenta-affair: #ae54e3;
  --color-magenta-affair-50: #f9f2ff;
  --color-magenta-affair-100: #f3e4ff;
  --color-magenta-affair-200: #e8c9ff;
  --color-magenta-affair-300: #dba8ff;
  --color-magenta-affair-400: #c974fe;
  --color-magenta-affair-500: #ae54e3;
  --color-magenta-affair-600: #9137c3;
  --color-magenta-affair-700: #771fa4;
  --color-magenta-affair-800: #600d86;
  --color-magenta-affair-900: #4c026c;
  --color-magenta-affair-950: #310048;
  --color-tropical-forest: #004e4e;
  --color-tropical-forest-50: #dbfdfc;
  --color-tropical-forest-100: #cdf4f3;
  --color-tropical-forest-200: #b3e2e1;
  --color-tropical-forest-300: #97cdcc;
  --color-tropical-forest-400: #72afae;
  --color-tropical-forest-500: #549393;
  --color-tropical-forest-600: #3a7878;
  --color-tropical-forest-700: #256160;
  --color-tropical-forest-800: #004e4e;
  --color-tropical-forest-900: #0c3b3b;
  --color-tropical-forest-950: #042525;
  --color-grizzly: #885b00;
  --color-grizzly-50: #fff3e4;
  --color-grizzly-100: #ffe6c3;
  --color-grizzly-200: #f4ce99;
  --color-grizzly-300: #e0b578;
  --color-grizzly-400: #c2934e;
  --color-grizzly-500: #a5772c;
  --color-grizzly-600: #885b00;
  --color-grizzly-700: #6c4800;
  --color-grizzly-800: #553800;
  --color-grizzly-900: #432a00;
  --color-grizzly-950: #2b1a00;
}