Juvie to Tropical Forest Color Palette

About this palette

Juvie to Tropical Forest is a 5-color cool, gradient palette: #8BBED9 (Juvie), #6A9FB1 (Tranquili Teal), #4A818B (Paradiso), #2A6467 (Pacific), #004845 (Tropical Forest). It mixes blue, turquoise tones and feels cool overall. The strongest text pairing is #8BBED9 on #004845 with a contrast ratio of 5.20:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Juvie	rgb(139, 190, 217)	hsl(201, 51%, 70%)
Tranquili Teal	rgb(106, 159, 177)	hsl(195, 31%, 55%)
Paradiso	rgb(74, 129, 139)	hsl(189, 31%, 42%)
Pacific	rgb(42, 100, 103)	hsl(183, 42%, 28%)
Tropical Forest	rgb(0, 72, 69)	hsl(177, 100%, 14%)

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.

Aa5.20:1 Good#8BBED9 on #004845
Aa5.20:1 Good#004845 on #8BBED9
Aa3.58:1 Poor#6A9FB1 on #004845
Aa3.58:1 Poor#004845 on #6A9FB1
Aa3.36:1 Poor#8BBED9 on #2A6467
Aa3.36:1 Poor#2A6467 on #8BBED9

Color blindness preview

CSS variables

/* Juvie to Tropical Forest — https://swatchly.xyz/palette/8bbed9-6a9fb1-4a818b-2a6467-004845 */
:root {
  --juvie: #8bbed9;
  --tranquili-teal: #6a9fb1;
  --paradiso: #4a818b;
  --pacific: #2a6467;
  --tropical-forest: #004845;
}

Tailwind CSS v4

/* Juvie to Tropical Forest — https://swatchly.xyz/palette/8bbed9-6a9fb1-4a818b-2a6467-004845 */
@theme {
  --color-juvie: #8bbed9;
  --color-juvie-50: #def3ff;
  --color-juvie-100: #c7eafc;
  --color-juvie-200: #add5eb;
  --color-juvie-300: #8bbed9;
  --color-juvie-400: #6fa0ba;
  --color-juvie-500: #5587a0;
  --color-juvie-600: #3e6d85;
  --color-juvie-700: #2c586e;
  --color-juvie-800: #1f4659;
  --color-juvie-900: #153747;
  --color-juvie-950: #09222e;
  --color-tranquili-teal: #6a9fb1;
  --color-tranquili-teal-50: #ddf6ff;
  --color-tranquili-teal-100: #c8ecf8;
  --color-tranquili-teal-200: #add7e6;
  --color-tranquili-teal-300: #90c0d0;
  --color-tranquili-teal-400: #6a9fb1;
  --color-tranquili-teal-500: #518597;
  --color-tranquili-teal-600: #3a6d7d;
  --color-tranquili-teal-700: #295766;
  --color-tranquili-teal-800: #1c4552;
  --color-tranquili-teal-900: #123641;
  --color-tranquili-teal-950: #08232b;
  --color-paradiso: #4a818b;
  --color-paradiso-50: #e2faff;
  --color-paradiso-100: #d3f5fb;
  --color-paradiso-200: #bce4ec;
  --color-paradiso-300: #a2d1d9;
  --color-paradiso-400: #80b4be;
  --color-paradiso-500: #639aa4;
  --color-paradiso-600: #4a818b;
  --color-paradiso-700: #336771;
  --color-paradiso-800: #225159;
  --color-paradiso-900: #153e45;
  --color-paradiso-950: #09272c;
  --color-pacific: #2a6467;
  --color-pacific-50: #ddfcfe;
  --color-pacific-100: #cff3f5;
  --color-pacific-200: #b7e2e4;
  --color-pacific-300: #9ccdd0;
  --color-pacific-400: #79afb2;
  --color-pacific-500: #5c9598;
  --color-pacific-600: #427a7d;
  --color-pacific-700: #2a6467;
  --color-pacific-800: #1e4e51;
  --color-pacific-900: #133d3f;
  --color-pacific-950: #072628;
  --color-tropical-forest: #004845;
  --color-tropical-forest-50: #dcfdfa;
  --color-tropical-forest-100: #cff4f1;
  --color-tropical-forest-200: #b5e2de;
  --color-tropical-forest-300: #98ccc8;
  --color-tropical-forest-400: #73aca8;
  --color-tropical-forest-500: #54908c;
  --color-tropical-forest-600: #3a7470;
  --color-tropical-forest-700: #265b58;
  --color-tropical-forest-800: #004845;
  --color-tropical-forest-900: #0d3634;
  --color-tropical-forest-950: #052220;
}