Kissed by Mist to Tropical Forest color palette

F5D3FFKissed by Mist BBB1CEPastel Lilac 83909FInland Waters 4B6F72Winter Storm 004F48Tropical Forest

Open in generator Export PNG, PDF, ASE…

About this palette

Kissed by Mist to Tropical Forest is a 5-color muted, cool palette: #F5D3FF (Kissed by Mist), #BBB1CE (Pastel Lilac), #83909F (Inland Waters), #4B6F72 (Winter Storm), #004F48 (Tropical Forest). It mixes purple, gray, turquoise tones and feels cool overall. The strongest text pairing is #F5D3FF on #004F48 with a contrast ratio of 7.07:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Kissed by Mist	rgb(245, 211, 255)	hsl(286, 100%, 91%)
Pastel Lilac	rgb(187, 177, 206)	hsl(261, 23%, 75%)
Inland Waters	rgb(131, 144, 159)	hsl(212, 13%, 57%)
Winter Storm	rgb(75, 111, 114)	hsl(185, 21%, 37%)
Tropical Forest	rgb(0, 79, 72)	hsl(175, 100%, 15%)

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.07:1 Very good#F5D3FF on #004F48
Aa7.07:1 Very good#004F48 on #F5D3FF
Aa4.65:1 Good#BBB1CE on #004F48
Aa4.65:1 Good#004F48 on #BBB1CE
Aa4.10:1 Poor#F5D3FF on #4B6F72
Aa4.10:1 Poor#4B6F72 on #F5D3FF

Color blindness preview

CSS variables

/* Kissed by Mist to Tropical Forest — https://swatchly.xyz/palette/f5d3ff-bbb1ce-83909f-4b6f72-004f48 */
:root {
  --kissed-by-mist: #f5d3ff;
  --pastel-lilac: #bbb1ce;
  --inland-waters: #83909f;
  --winter-storm: #4b6f72;
  --tropical-forest: #004f48;
}

Tailwind CSS v4

/* Kissed by Mist to Tropical Forest — https://swatchly.xyz/palette/f5d3ff-bbb1ce-83909f-4b6f72-004f48 */
@theme {
  --color-kissed-by-mist: #f5d3ff;
  --color-kissed-by-mist-50: #fefaff;
  --color-kissed-by-mist-100: #fbeeff;
  --color-kissed-by-mist-200: #f5d3ff;
  --color-kissed-by-mist-300: #d9bee1;
  --color-kissed-by-mist-400: #b99bc2;
  --color-kissed-by-mist-500: #9d7da6;
  --color-kissed-by-mist-600: #806288;
  --color-kissed-by-mist-700: #664b6e;
  --color-kissed-by-mist-800: #503856;
  --color-kissed-by-mist-900: #3e2a44;
  --color-kissed-by-mist-950: #27192b;
  --color-pastel-lilac: #bbb1ce;
  --color-pastel-lilac-50: #f2ecfe;
  --color-pastel-lilac-100: #e7e0f4;
  --color-pastel-lilac-200: #d2cae2;
  --color-pastel-lilac-300: #bbb1ce;
  --color-pastel-lilac-400: #9d94af;
  --color-pastel-lilac-500: #847a95;
  --color-pastel-lilac-600: #6b627b;
  --color-pastel-lilac-700: #564e65;
  --color-pastel-lilac-800: #443d51;
  --color-pastel-lilac-900: #352f40;
  --color-pastel-lilac-950: #211d29;
  --color-inland-waters: #83909f;
  --color-inland-waters-50: #f1f7ff;
  --color-inland-waters-100: #e7eff9;
  --color-inland-waters-200: #d3dde9;
  --color-inland-waters-300: #bdc8d5;
  --color-inland-waters-400: #9eaab9;
  --color-inland-waters-500: #83909f;
  --color-inland-waters-600: #677482;
  --color-inland-waters-700: #505c69;
  --color-inland-waters-800: #3d4752;
  --color-inland-waters-900: #2e3640;
  --color-inland-waters-950: #1b2128;
  --color-winter-storm: #4b6f72;
  --color-winter-storm-50: #e5fafc;
  --color-winter-storm-100: #d8f0f2;
  --color-winter-storm-200: #bfdcdf;
  --color-winter-storm-300: #a5c6c9;
  --color-winter-storm-400: #82a6a9;
  --color-winter-storm-500: #668a8d;
  --color-winter-storm-600: #4b6f72;
  --color-winter-storm-700: #38585b;
  --color-winter-storm-800: #294548;
  --color-winter-storm-900: #1e3638;
  --color-winter-storm-950: #102123;
  --color-tropical-forest: #004f48;
  --color-tropical-forest-50: #dbfef8;
  --color-tropical-forest-100: #cdf5ef;
  --color-tropical-forest-200: #b3e3db;
  --color-tropical-forest-300: #97cec6;
  --color-tropical-forest-400: #72b0a7;
  --color-tropical-forest-500: #54948c;
  --color-tropical-forest-600: #3a7971;
  --color-tropical-forest-700: #25625b;
  --color-tropical-forest-800: #004f48;
  --color-tropical-forest-900: #0c3c37;
  --color-tropical-forest-950: #042622;
}