Cold Blue to Forestry Color Palette

About this palette

Cold Blue to Forestry is a 5-color cool palette: #7BDAE7 (Cold Blue), #C48ECA (Violaceous), #CE7371 (Rosa Chinensis), #784886 (Grapes of Italy), #2C4929 (Forestry). It mixes turquoise, pink, red, purple, green tones and feels cool overall. The strongest text pairing is #7BDAE7 on #2C4929 with a contrast ratio of 6.23:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cold Blue	rgb(123, 218, 231)	hsl(187, 69%, 69%)
Violaceous	rgb(196, 142, 202)	hsl(294, 36%, 67%)
Rosa Chinensis	rgb(206, 115, 113)	hsl(1, 49%, 63%)
Grapes of Italy	rgb(120, 72, 134)	hsl(286, 30%, 40%)
Forestry	rgb(44, 73, 41)	hsl(114, 28%, 22%)

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.

Aa6.23:1 Good#7BDAE7 on #2C4929
Aa6.23:1 Good#2C4929 on #7BDAE7
Aa4.24:1 Poor#7BDAE7 on #784886
Aa4.24:1 Poor#784886 on #7BDAE7
Aa3.86:1 Poor#C48ECA on #2C4929
Aa3.86:1 Poor#2C4929 on #C48ECA
Aa3.02:1 Poor#CE7371 on #2C4929
Aa3.02:1 Poor#2C4929 on #CE7371

Color blindness preview

CSS variables

/* Cold Blue to Forestry — https://swatchly.xyz/palette/7bdae7-c48eca-ce7371-784886-2c4929 */
:root {
  --cold-blue: #7bdae7;
  --violaceous: #c48eca;
  --rosa-chinensis: #ce7371;
  --grapes-of-italy: #784886;
  --forestry: #2c4929;
}

Tailwind CSS v4

/* Cold Blue to Forestry — https://swatchly.xyz/palette/7bdae7-c48eca-ce7371-784886-2c4929 */
@theme {
  --color-cold-blue: #7bdae7;
  --color-cold-blue-50: #edfdff;
  --color-cold-blue-100: #d1f9ff;
  --color-cold-blue-200: #acebf4;
  --color-cold-blue-300: #7bdae7;
  --color-cold-blue-400: #5fb7c3;
  --color-cold-blue-500: #389ba7;
  --color-cold-blue-600: #0b7e8a;
  --color-cold-blue-700: #00636e;
  --color-cold-blue-800: #004d55;
  --color-cold-blue-900: #003a41;
  --color-cold-blue-950: #002529;
  --color-violaceous: #c48eca;
  --color-violaceous-50: #fef1ff;
  --color-violaceous-100: #fce3ff;
  --color-violaceous-200: #f3c9f7;
  --color-violaceous-300: #dfb1e4;
  --color-violaceous-400: #c48eca;
  --color-violaceous-500: #a772ad;
  --color-violaceous-600: #8a5890;
  --color-violaceous-700: #704375;
  --color-violaceous-800: #59315e;
  --color-violaceous-900: #46244a;
  --color-violaceous-950: #2c142f;
  --color-rosa-chinensis: #ce7371;
  --color-rosa-chinensis-50: #fff4f4;
  --color-rosa-chinensis-100: #ffe9e8;
  --color-rosa-chinensis-200: #ffd0ce;
  --color-rosa-chinensis-300: #ffb1ae;
  --color-rosa-chinensis-400: #e78f8c;
  --color-rosa-chinensis-500: #ce7371;
  --color-rosa-chinensis-600: #ae5656;
  --color-rosa-chinensis-700: #8f3f3f;
  --color-rosa-chinensis-800: #732d2e;
  --color-rosa-chinensis-900: #5b1f21;
  --color-rosa-chinensis-950: #3b1011;
  --color-grapes-of-italy: #784886;
  --color-grapes-of-italy-50: #fcf1ff;
  --color-grapes-of-italy-100: #f8e2ff;
  --color-grapes-of-italy-200: #f0c9fc;
  --color-grapes-of-italy-300: #deb2eb;
  --color-grapes-of-italy-400: #c291d1;
  --color-grapes-of-italy-500: #a976b8;
  --color-grapes-of-italy-600: #8e5e9d;
  --color-grapes-of-italy-700: #784886;
  --color-grapes-of-italy-800: #5f376b;
  --color-grapes-of-italy-900: #4b2855;
  --color-grapes-of-italy-950: #301738;
  --color-forestry: #2c4929;
  --color-forestry-50: #e8fce6;
  --color-forestry-100: #ddf2da;
  --color-forestry-200: #c7e0c3;
  --color-forestry-300: #adcaaa;
  --color-forestry-400: #8bab88;
  --color-forestry-500: #6f8f6c;
  --color-forestry-600: #567452;
  --color-forestry-700: #415c3e;
  --color-forestry-800: #2c4929;
  --color-forestry-900: #233721;
  --color-forestry-950: #142213;
}