Darkest Forest to Breaking the Ice color palette

28361CDarkest Forest 735156Veil of Cinder 768168Wreath 91A7C5Old World C1E3FDBreaking the Ice

About this palette

Darkest Forest to Breaking the Ice is a 5-color muted, cool palette: #28361C (Darkest Forest), #735156 (Veil of Cinder), #768168 (Wreath), #91A7C5 (Old World), #C1E3FD (Breaking the Ice). It mixes green, red, blue tones and feels cool overall. The strongest text pairing is #28361C on #C1E3FD with a contrast ratio of 9.59:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Darkest Forest	rgb(40, 54, 28)	hsl(92, 32%, 16%)
Veil of Cinder	rgb(115, 81, 86)	hsl(351, 17%, 38%)
Wreath	rgb(118, 129, 104)	hsl(86, 11%, 46%)
Old World	rgb(145, 167, 197)	hsl(215, 31%, 67%)
Breaking the Ice	rgb(193, 227, 253)	hsl(206, 94%, 87%)

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.59:1 Very good#28361C on #C1E3FD
Aa9.59:1 Very good#C1E3FD on #28361C
Aa5.22:1 Good#28361C on #91A7C5
Aa5.22:1 Good#91A7C5 on #28361C
Aa5.16:1 Good#735156 on #C1E3FD
Aa5.16:1 Good#C1E3FD on #735156
Aa3.13:1 Poor#28361C on #768168
Aa3.13:1 Poor#768168 on #28361C

Color blindness preview

CSS variables

/* Darkest Forest to Breaking the Ice — https://swatchly.xyz/palette/28361c-735156-768168-91a7c5-c1e3fd */
:root {
  --darkest-forest: #28361c;
  --veil-of-cinder: #735156;
  --wreath: #768168;
  --old-world: #91a7c5;
  --breaking-the-ice: #c1e3fd;
}

Tailwind CSS v4

/* Darkest Forest to Breaking the Ice — https://swatchly.xyz/palette/28361c-735156-768168-91a7c5-c1e3fd */
@theme {
  --color-darkest-forest: #28361c;
  --color-darkest-forest-50: #eff9e7;
  --color-darkest-forest-100: #e4f0dc;
  --color-darkest-forest-200: #cfddc5;
  --color-darkest-forest-300: #b7c7ac;
  --color-darkest-forest-400: #97a88a;
  --color-darkest-forest-500: #7b8c6e;
  --color-darkest-forest-600: #617155;
  --color-darkest-forest-700: #4b5940;
  --color-darkest-forest-800: #39452f;
  --color-darkest-forest-900: #28361c;
  --color-darkest-forest-950: #192013;
  --color-veil-of-cinder: #735156;
  --color-veil-of-cinder-50: #fff1f3;
  --color-veil-of-cinder-100: #fee4e7;
  --color-veil-of-cinder-200: #eed0d4;
  --color-veil-of-cinder-300: #dbbabe;
  --color-veil-of-cinder-400: #bf9a9f;
  --color-veil-of-cinder-500: #a48085;
  --color-veil-of-cinder-600: #8a676b;
  --color-veil-of-cinder-700: #735156;
  --color-veil-of-cinder-800: #5b3f43;
  --color-veil-of-cinder-900: #472f33;
  --color-veil-of-cinder-950: #2e1c1f;
  --color-wreath: #768168;
  --color-wreath-50: #eff6e7;
  --color-wreath-100: #e3ebd9;
  --color-wreath-200: #cdd6c1;
  --color-wreath-300: #b4bea7;
  --color-wreath-400: #939e85;
  --color-wreath-500: #768168;
  --color-wreath-600: #5e6851;
  --color-wreath-700: #4a533e;
  --color-wreath-800: #39412f;
  --color-wreath-900: #2c3323;
  --color-wreath-950: #1b2015;
  --color-old-world: #91a7c5;
  --color-old-world-50: #f1f7ff;
  --color-old-world-100: #e2eeff;
  --color-old-world-200: #cbdcf3;
  --color-old-world-300: #b3c6e0;
  --color-old-world-400: #91a7c5;
  --color-old-world-500: #768ba8;
  --color-old-world-600: #5b708b;
  --color-old-world-700: #465871;
  --color-old-world-800: #34445a;
  --color-old-world-900: #273446;
  --color-old-world-950: #16202d;
  --color-breaking-the-ice: #c1e3fd;
  --color-breaking-the-ice-50: #f4faff;
  --color-breaking-the-ice-100: #e4f3ff;
  --color-breaking-the-ice-200: #c1e3fd;
  --color-breaking-the-ice-300: #afcadf;
  --color-breaking-the-ice-400: #8baac1;
  --color-breaking-the-ice-500: #6e8ea5;
  --color-breaking-the-ice-600: #537288;
  --color-breaking-the-ice-700: #3e5a6e;
  --color-breaking-the-ice-800: #2d4557;
  --color-breaking-the-ice-900: #213544;
  --color-breaking-the-ice-950: #12212c;
}