Pine to Kissed by Mist color palette

2C5B39Pine 541944Soul Anchor 00A46FBejewelled 955B88Feminism 30CF89Magical Malachite FFD3FBKissed by Mist

Open in generator Export PNG, PDF, ASE…

About this palette

Pine to Kissed by Mist is a 6-color cool palette: #2C5B39 (Pine), #541944 (Soul Anchor), #00A46F (Bejewelled), #955B88 (Feminism), #30CF89 (Magical Malachite), #FFD3FB (Kissed by Mist). It mixes green, red, pink tones and feels cool overall. The strongest text pairing is #541944 on #FFD3FB with a contrast ratio of 9.98:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pine	rgb(44, 91, 57)	hsl(137, 35%, 26%)
Soul Anchor	rgb(84, 25, 68)	hsl(316, 54%, 21%)
Bejewelled	rgb(0, 164, 111)	hsl(161, 100%, 32%)
Feminism	rgb(149, 91, 136)	hsl(313, 24%, 47%)
Magical Malachite	rgb(48, 207, 137)	hsl(154, 62%, 50%)
Kissed by Mist	rgb(255, 211, 251)	hsl(305, 100%, 91%)

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.

Aa9.98:1 Very good#541944 on #FFD3FB
Aa9.98:1 Very good#FFD3FB on #541944
Aa6.51:1 Good#541944 on #30CF89
Aa6.51:1 Good#30CF89 on #541944
Aa6.00:1 Good#2C5B39 on #FFD3FB
Aa6.00:1 Good#FFD3FB on #2C5B39
Aa4.09:1 Poor#541944 on #00A46F
Aa4.09:1 Poor#00A46F on #541944

Color blindness preview

CSS variables

/* Pine to Kissed by Mist — https://swatchly.xyz/palette/2c5b39-541944-00a46f-955b88-30cf89-ffd3fb */
:root {
  --pine: #2c5b39;
  --soul-anchor: #541944;
  --bejewelled: #00a46f;
  --feminism: #955b88;
  --magical-malachite: #30cf89;
  --kissed-by-mist: #ffd3fb;
}

Tailwind CSS v4

/* Pine to Kissed by Mist — https://swatchly.xyz/palette/2c5b39-541944-00a46f-955b88-30cf89-ffd3fb */
@theme {
  --color-pine: #2c5b39;
  --color-pine-50: #e2fee7;
  --color-pine-100: #d5f5db;
  --color-pine-200: #bce2c3;
  --color-pine-300: #a0cba9;
  --color-pine-400: #7cac87;
  --color-pine-500: #5f8f6a;
  --color-pine-600: #457350;
  --color-pine-700: #2c5b39;
  --color-pine-800: #23472c;
  --color-pine-900: #183721;
  --color-pine-950: #0c2212;
  --color-soul-anchor: #541944;
  --color-soul-anchor-50: #fff0f9;
  --color-soul-anchor-100: #ffe1f4;
  --color-soul-anchor-200: #fbc4e7;
  --color-soul-anchor-300: #e8abd3;
  --color-soul-anchor-400: #cb89b5;
  --color-soul-anchor-500: #b06d9a;
  --color-soul-anchor-600: #93547f;
  --color-soul-anchor-700: #783f67;
  --color-soul-anchor-800: #612f52;
  --color-soul-anchor-900: #541944;
  --color-soul-anchor-950: #321329;
  --color-bejewelled: #00a46f;
  --color-bejewelled-50: #dfffed;
  --color-bejewelled-100: #bbffdb;
  --color-bejewelled-200: #9befc5;
  --color-bejewelled-300: #77dcac;
  --color-bejewelled-400: #45bf8b;
  --color-bejewelled-500: #00a46f;
  --color-bejewelled-600: #008459;
  --color-bejewelled-700: #006946;
  --color-bejewelled-800: #005235;
  --color-bejewelled-900: #003f28;
  --color-bejewelled-950: #002717;
  --color-feminism: #955b88;
  --color-feminism-50: #fff0fb;
  --color-feminism-100: #ffe2f7;
  --color-feminism-200: #f9c9ec;
  --color-feminism-300: #e7b1d9;
  --color-feminism-400: #cb90bd;
  --color-feminism-500: #b074a2;
  --color-feminism-600: #955b88;
  --color-feminism-700: #7a456e;
  --color-feminism-800: #613357;
  --color-feminism-900: #4c2544;
  --color-feminism-950: #31152b;
  --color-magical-malachite: #30cf89;
  --color-magical-malachite-50: #f0fff5;
  --color-magical-malachite-100: #d6ffe6;
  --color-magical-malachite-200: #a0f9c7;
  --color-magical-malachite-300: #7de8ae;
  --color-magical-malachite-400: #30cf89;
  --color-magical-malachite-500: #00ae6e;
  --color-magical-malachite-600: #008b58;
  --color-magical-malachite-700: #006e44;
  --color-magical-malachite-800: #005534;
  --color-magical-malachite-900: #004026;
  --color-magical-malachite-950: #002715;
  --color-kissed-by-mist: #ffd3fb;
  --color-kissed-by-mist-50: #ffe5fc;
  --color-kissed-by-mist-100: #ffd3fb;
  --color-kissed-by-mist-200: #e6c5e3;
  --color-kissed-by-mist-300: #d3aed0;
  --color-kissed-by-mist-400: #b68fb3;
  --color-kissed-by-mist-500: #9c7499;
  --color-kissed-by-mist-600: #815c7f;
  --color-kissed-by-mist-700: #6a4867;
  --color-kissed-by-mist-800: #543652;
  --color-kissed-by-mist-900: #422940;
  --color-kissed-by-mist-950: #2a1829;
}