Darkest Forest to Gentle Cold color palette

1A3720Darkest Forest 257536Forestial 009A8FGreen Dynasty 00C6E0Caribbean Blue B9EFE9Gentle Cold

About this palette

Darkest Forest to Gentle Cold is a 5-color cool, gradient palette: #1A3720 (Darkest Forest), #257536 (Forestial), #009A8F (Green Dynasty), #00C6E0 (Caribbean Blue), #B9EFE9 (Gentle Cold). It mixes green, turquoise tones and feels cool overall. The strongest text pairing is #1A3720 on #B9EFE9 with a contrast ratio of 10.29:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Darkest Forest	rgb(26, 55, 32)	hsl(132, 36%, 16%)
Forestial	rgb(37, 117, 54)	hsl(133, 52%, 30%)
Green Dynasty	rgb(0, 154, 143)	hsl(176, 100%, 30%)
Caribbean Blue	rgb(0, 198, 224)	hsl(187, 100%, 44%)
Gentle Cold	rgb(185, 239, 233)	hsl(173, 63%, 83%)

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.29:1 Very good#1A3720 on #B9EFE9
Aa10.29:1 Very good#B9EFE9 on #1A3720
Aa6.30:1 Good#1A3720 on #00C6E0
Aa6.30:1 Good#00C6E0 on #1A3720
Aa4.51:1 Good#257536 on #B9EFE9
Aa4.51:1 Good#B9EFE9 on #257536
Aa3.74:1 Poor#1A3720 on #009A8F
Aa3.74:1 Poor#009A8F on #1A3720

Color blindness preview

CSS variables

/* Darkest Forest to Gentle Cold — https://swatchly.xyz/palette/1a3720-257536-009a8f-00c6e0-b9efe9 */
:root {
  --darkest-forest: #1a3720;
  --forestial: #257536;
  --green-dynasty: #009a8f;
  --caribbean-blue: #00c6e0;
  --gentle-cold: #b9efe9;
}

Tailwind CSS v4

/* Darkest Forest to Gentle Cold — https://swatchly.xyz/palette/1a3720-257536-009a8f-00c6e0-b9efe9 */
@theme {
  --color-darkest-forest: #1a3720;
  --color-darkest-forest-50: #e8fbeb;
  --color-darkest-forest-100: #ddf2df;
  --color-darkest-forest-200: #c6dfc9;
  --color-darkest-forest-300: #adcab1;
  --color-darkest-forest-400: #8baa8f;
  --color-darkest-forest-500: #6e8e73;
  --color-darkest-forest-600: #547359;
  --color-darkest-forest-700: #3f5b44;
  --color-darkest-forest-800: #2e4632;
  --color-darkest-forest-900: #1a3720;
  --color-darkest-forest-950: #132115;
  --color-forestial: #257536;
  --color-forestial-50: #e0ffe2;
  --color-forestial-100: #c8f8cc;
  --color-forestial-200: #abe5b1;
  --color-forestial-300: #8ccf93;
  --color-forestial-400: #64af6f;
  --color-forestial-500: #449251;
  --color-forestial-600: #257536;
  --color-forestial-700: #165e27;
  --color-forestial-800: #084a1a;
  --color-forestial-900: #023a11;
  --color-forestial-950: #002508;
  --color-green-dynasty: #009a8f;
  --color-green-dynasty-50: #d6fff9;
  --color-green-dynasty-100: #b8faf1;
  --color-green-dynasty-200: #98e9df;
  --color-green-dynasty-300: #74d4c9;
  --color-green-dynasty-400: #42b6aa;
  --color-green-dynasty-500: #009a8f;
  --color-green-dynasty-600: #007c73;
  --color-green-dynasty-700: #00635b;
  --color-green-dynasty-800: #004d47;
  --color-green-dynasty-900: #003c37;
  --color-green-dynasty-950: #002522;
  --color-caribbean-blue: #00c6e0;
  --color-caribbean-blue-50: #f2fdff;
  --color-caribbean-blue-100: #ddf9ff;
  --color-caribbean-blue-200: #a6f0ff;
  --color-caribbean-blue-300: #72e0f5;
  --color-caribbean-blue-400: #00c6e0;
  --color-caribbean-blue-500: #00a4ba;
  --color-caribbean-blue-600: #008496;
  --color-caribbean-blue-700: #006876;
  --color-caribbean-blue-800: #00505c;
  --color-caribbean-blue-900: #003c46;
  --color-caribbean-blue-950: #00242b;
  --color-gentle-cold: #b9efe9;
  --color-gentle-cold-50: #d6f6f2;
  --color-gentle-cold-100: #b9efe9;
  --color-gentle-cold-200: #b1dad5;
  --color-gentle-cold-300: #98c6c1;
  --color-gentle-cold-400: #77a9a3;
  --color-gentle-cold-500: #5b8f89;
  --color-gentle-cold-600: #437570;
  --color-gentle-cold-700: #305f5a;
  --color-gentle-cold-800: #214a47;
  --color-gentle-cold-900: #163a37;
  --color-gentle-cold-950: #0a2422;
}