Darkest Forest to Salty Ice Color Palette

About this palette

Darkest Forest to Salty Ice is a 5-color cool palette: #203015 (Darkest Forest), #614000 (Very Coffee), #C08CD5 (Violaceous), #5284BB (Fisher King), #CCE5FF (Salty Ice). It mixes green, brown, purple, blue tones and feels cool overall. The strongest text pairing is #203015 on #CCE5FF with a contrast ratio of 10.85:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Darkest Forest	rgb(32, 48, 21)	hsl(96, 39%, 14%)
Very Coffee	rgb(97, 64, 0)	hsl(40, 100%, 19%)
Violaceous	rgb(192, 140, 213)	hsl(283, 46%, 69%)
Fisher King	rgb(82, 132, 187)	hsl(211, 44%, 53%)
Salty Ice	rgb(204, 229, 255)	hsl(211, 100%, 90%)

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.

Aa10.85:1 Very good#203015 on #CCE5FF
Aa10.85:1 Very good#CCE5FF on #203015
Aa7.24:1 Very good#614000 on #CCE5FF
Aa7.24:1 Very good#CCE5FF on #614000
Aa5.32:1 Good#203015 on #C08CD5
Aa5.32:1 Good#C08CD5 on #203015
Aa3.60:1 Poor#203015 on #5284BB
Aa3.60:1 Poor#5284BB on #203015

Color blindness preview

CSS variables

/* Darkest Forest to Salty Ice — https://swatchly.xyz/palette/203015-614000-c08cd5-5284bb-cce5ff */
:root {
  --darkest-forest: #203015;
  --very-coffee: #614000;
  --violaceous: #c08cd5;
  --fisher-king: #5284bb;
  --salty-ice: #cce5ff;
}

Tailwind CSS v4

/* Darkest Forest to Salty Ice — https://swatchly.xyz/palette/203015-614000-c08cd5-5284bb-cce5ff */
@theme {
  --color-darkest-forest: #203015;
  --color-darkest-forest-50: #eefae7;
  --color-darkest-forest-100: #e3f0db;
  --color-darkest-forest-200: #ceddc4;
  --color-darkest-forest-300: #b6c8ab;
  --color-darkest-forest-400: #94a788;
  --color-darkest-forest-500: #778a6b;
  --color-darkest-forest-600: #5c6e51;
  --color-darkest-forest-700: #45553b;
  --color-darkest-forest-800: #33402a;
  --color-darkest-forest-900: #203015;
  --color-darkest-forest-950: #141b0f;
  --color-very-coffee: #614000;
  --color-very-coffee-50: #fff3e3;
  --color-very-coffee-100: #ffe7c7;
  --color-very-coffee-200: #f0d3aa;
  --color-very-coffee-300: #ddbc8e;
  --color-very-coffee-400: #c19d6a;
  --color-very-coffee-500: #a6824d;
  --color-very-coffee-600: #8b6834;
  --color-very-coffee-700: #735320;
  --color-very-coffee-800: #614000;
  --color-very-coffee-900: #4a3208;
  --color-very-coffee-950: #301e02;
  --color-violaceous: #c08cd5;
  --color-violaceous-50: #fbf2ff;
  --color-violaceous-100: #f7e5ff;
  --color-violaceous-200: #efc8ff;
  --color-violaceous-300: #dcafee;
  --color-violaceous-400: #c08cd5;
  --color-violaceous-500: #a370b7;
  --color-violaceous-600: #87569a;
  --color-violaceous-700: #6d417f;
  --color-violaceous-800: #573066;
  --color-violaceous-900: #442351;
  --color-violaceous-950: #2b1334;
  --color-fisher-king: #5284bb;
  --color-fisher-king-50: #edf5ff;
  --color-fisher-king-100: #daebff;
  --color-fisher-king-200: #b6d8ff;
  --color-fisher-king-300: #94c1f4;
  --color-fisher-king-400: #6fa1d8;
  --color-fisher-king-500: #5284bb;
  --color-fisher-king-600: #3a6a9e;
  --color-fisher-king-700: #285483;
  --color-fisher-king-800: #1b416a;
  --color-fisher-king-900: #113255;
  --color-fisher-king-950: #071f38;
  --color-salty-ice: #cce5ff;
  --color-salty-ice-50: #e0efff;
  --color-salty-ice-100: #cce5ff;
  --color-salty-ice-200: #bfd2e6;
  --color-salty-ice-300: #a8bed4;
  --color-salty-ice-400: #89a0b7;
  --color-salty-ice-500: #6f869d;
  --color-salty-ice-600: #576d83;
  --color-salty-ice-700: #44576c;
  --color-salty-ice-800: #334456;
  --color-salty-ice-900: #263443;
  --color-salty-ice-950: #16202b;
}