Darkest Forest to Snowy Mint color palette

242F16Darkest Forest 834340Sly Fox 099490Green Dynasty D3B2D7Blushing Sky D7EFD2Snowy Mint

About this palette

Darkest Forest to Snowy Mint is a 5-color cool palette: #242F16 (Darkest Forest), #834340 (Sly Fox), #099490 (Green Dynasty), #D3B2D7 (Blushing Sky), #D7EFD2 (Snowy Mint). It mixes green, red, turquoise, pink tones and feels cool overall. The strongest text pairing is #242F16 on #D7EFD2 with a contrast ratio of 11.50:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Darkest Forest	rgb(36, 47, 22)	hsl(86, 36%, 14%)
Sly Fox	rgb(131, 67, 64)	hsl(3, 34%, 38%)
Green Dynasty	rgb(9, 148, 144)	hsl(178, 89%, 31%)
Blushing Sky	rgb(211, 178, 215)	hsl(294, 32%, 77%)
Snowy Mint	rgb(215, 239, 210)	hsl(110, 48%, 88%)

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.

Aa11.50:1 Very good#242F16 on #D7EFD2
Aa11.50:1 Very good#D7EFD2 on #242F16
Aa7.45:1 Very good#242F16 on #D3B2D7
Aa7.45:1 Very good#D3B2D7 on #242F16
Aa6.04:1 Good#834340 on #D7EFD2
Aa6.04:1 Good#D7EFD2 on #834340
Aa3.91:1 Poor#834340 on #D3B2D7
Aa3.91:1 Poor#D3B2D7 on #834340

Color blindness preview

CSS variables

/* Darkest Forest to Snowy Mint — https://swatchly.xyz/palette/242f16-834340-099490-d3b2d7-d7efd2 */
:root {
  --darkest-forest: #242f16;
  --sly-fox: #834340;
  --green-dynasty: #099490;
  --blushing-sky: #d3b2d7;
  --snowy-mint: #d7efd2;
}

Tailwind CSS v4

/* Darkest Forest to Snowy Mint — https://swatchly.xyz/palette/242f16-834340-099490-d3b2d7-d7efd2 */
@theme {
  --color-darkest-forest: #242f16;
  --color-darkest-forest-50: #f0f9e7;
  --color-darkest-forest-100: #e6efdc;
  --color-darkest-forest-200: #d1dcc5;
  --color-darkest-forest-300: #b9c6ac;
  --color-darkest-forest-400: #98a589;
  --color-darkest-forest-500: #7b886c;
  --color-darkest-forest-600: #606c51;
  --color-darkest-forest-700: #49543c;
  --color-darkest-forest-800: #363f2b;
  --color-darkest-forest-900: #242f16;
  --color-darkest-forest-950: #161b10;
  --color-sly-fox: #834340;
  --color-sly-fox-50: #fff2f0;
  --color-sly-fox-100: #ffe4e1;
  --color-sly-fox-200: #ffc9c4;
  --color-sly-fox-300: #efb0ab;
  --color-sly-fox-400: #d38f8a;
  --color-sly-fox-500: #b8736e;
  --color-sly-fox-600: #9b5956;
  --color-sly-fox-700: #834340;
  --color-sly-fox-800: #683331;
  --color-sly-fox-900: #522624;
  --color-sly-fox-950: #361614;
  --color-green-dynasty: #099490;
  --color-green-dynasty-50: #d1fffc;
  --color-green-dynasty-100: #b7f8f4;
  --color-green-dynasty-200: #97e5e1;
  --color-green-dynasty-300: #73d0cb;
  --color-green-dynasty-400: #42b1ac;
  --color-green-dynasty-500: #099490;
  --color-green-dynasty-600: #007774;
  --color-green-dynasty-700: #005f5c;
  --color-green-dynasty-800: #004b48;
  --color-green-dynasty-900: #003a38;
  --color-green-dynasty-950: #002523;
  --color-blushing-sky: #d3b2d7;
  --color-blushing-sky-50: #fdeeff;
  --color-blushing-sky-100: #f7e2fa;
  --color-blushing-sky-200: #e5cce8;
  --color-blushing-sky-300: #d3b2d7;
  --color-blushing-sky-400: #b394b6;
  --color-blushing-sky-500: #97799b;
  --color-blushing-sky-600: #7c5f80;
  --color-blushing-sky-700: #644a68;
  --color-blushing-sky-800: #503953;
  --color-blushing-sky-900: #3e2b41;
  --color-blushing-sky-950: #271929;
  --color-snowy-mint: #d7efd2;
  --color-snowy-mint-50: #e8f6e5;
  --color-snowy-mint-100: #d7efd2;
  --color-snowy-mint-200: #c8dac4;
  --color-snowy-mint-300: #b1c5ad;
  --color-snowy-mint-400: #91a78d;
  --color-snowy-mint-500: #768c72;
  --color-snowy-mint-600: #5d7259;
  --color-snowy-mint-700: #495b45;
  --color-snowy-mint-800: #374834;
  --color-snowy-mint-900: #293727;
  --color-snowy-mint-950: #192216;
}