Tropical Forest to Shallow Water color palette

004749Tropical Forest 00797CPrismarine 009497Java 5FC4C8Sea Serpent 8DF0FAShallow Water

About this palette

Tropical Forest to Shallow Water is a 5-color cool, monochromatic, gradient palette: #004749 (Tropical Forest), #00797C (Prismarine), #009497 (Java), #5FC4C8 (Sea Serpent), #8DF0FA (Shallow Water). It mixes turquoise tones and feels cool overall. The strongest text pairing is #004749 on #8DF0FA with a contrast ratio of 8.00:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tropical Forest	rgb(0, 71, 73)	hsl(182, 100%, 14%)
Prismarine	rgb(0, 121, 124)	hsl(181, 100%, 24%)
Java	rgb(0, 148, 151)	hsl(181, 100%, 30%)
Sea Serpent	rgb(95, 196, 200)	hsl(182, 49%, 58%)
Shallow Water	rgb(141, 240, 250)	hsl(186, 92%, 77%)

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.

Aa8.00:1 Very good#004749 on #8DF0FA
Aa8.00:1 Very good#8DF0FA on #004749
Aa5.11:1 Good#004749 on #5FC4C8
Aa5.11:1 Good#5FC4C8 on #004749
Aa3.97:1 Poor#00797C on #8DF0FA
Aa3.97:1 Poor#8DF0FA on #00797C

Color blindness preview

CSS variables

/* Tropical Forest to Shallow Water — https://swatchly.xyz/palette/004749-00797c-009497-5fc4c8-8df0fa */
:root {
  --tropical-forest: #004749;
  --prismarine: #00797c;
  --java: #009497;
  --sea-serpent: #5fc4c8;
  --shallow-water: #8df0fa;
}

Tailwind CSS v4

/* Tropical Forest to Shallow Water — https://swatchly.xyz/palette/004749-00797c-009497-5fc4c8-8df0fa */
@theme {
  --color-tropical-forest: #004749;
  --color-tropical-forest-50: #dcfdfd;
  --color-tropical-forest-100: #cff4f4;
  --color-tropical-forest-200: #b5e1e2;
  --color-tropical-forest-300: #98cbcc;
  --color-tropical-forest-400: #73abad;
  --color-tropical-forest-500: #548f91;
  --color-tropical-forest-600: #3a7375;
  --color-tropical-forest-700: #265a5c;
  --color-tropical-forest-800: #004749;
  --color-tropical-forest-900: #0d3637;
  --color-tropical-forest-950: #052122;
  --color-prismarine: #00797c;
  --color-prismarine-50: #d6feff;
  --color-prismarine-100: #c0f7f8;
  --color-prismarine-200: #a3e5e6;
  --color-prismarine-300: #82cfd1;
  --color-prismarine-400: #57b1b3;
  --color-prismarine-500: #339597;
  --color-prismarine-600: #00797c;
  --color-prismarine-700: #006063;
  --color-prismarine-800: #004b4d;
  --color-prismarine-900: #003a3c;
  --color-prismarine-950: #002426;
  --color-java: #009497;
  --color-java-50: #d2feff;
  --color-java-100: #b7f8f9;
  --color-java-200: #96e5e7;
  --color-java-300: #72d0d2;
  --color-java-400: #40b0b3;
  --color-java-500: #009497;
  --color-java-600: #00777a;
  --color-java-700: #005f61;
  --color-java-800: #004a4c;
  --color-java-900: #003a3b;
  --color-java-950: #002425;
  --color-sea-serpent: #5fc4c8;
  --color-sea-serpent-50: #c1fafb;
  --color-sea-serpent-100: #aeeef1;
  --color-sea-serpent-200: #8ddadd;
  --color-sea-serpent-300: #5fc4c8;
  --color-sea-serpent-400: #41a6aa;
  --color-sea-serpent-500: #1b8d92;
  --color-sea-serpent-600: #007377;
  --color-sea-serpent-700: #005d60;
  --color-sea-serpent-800: #004a4d;
  --color-sea-serpent-900: #003b3d;
  --color-sea-serpent-950: #002527;
  --color-shallow-water: #8df0fa;
  --color-shallow-water-50: #ebfdff;
  --color-shallow-water-100: #ccfaff;
  --color-shallow-water-200: #8df0fa;
  --color-shallow-water-300: #86d5dd;
  --color-shallow-water-400: #58b6bf;
  --color-shallow-water-500: #3099a3;
  --color-shallow-water-600: #007c86;
  --color-shallow-water-700: #00626a;
  --color-shallow-water-800: #004c52;
  --color-shallow-water-900: #003b40;
  --color-shallow-water-950: #002528;
}