Tropical Forest to Sea Foam color palette

004C49Tropical Forest 7F3D61Pleasure A75D8ABermuda Onion E3967CDark Salmon Injustice 87E3DBSea Foam

About this palette

Tropical Forest to Sea Foam is a 5-color warm, vintage palette: #004C49 (Tropical Forest), #7F3D61 (Pleasure), #A75D8A (Bermuda Onion), #E3967C (Dark Salmon Injustice), #87E3DB (Sea Foam). It mixes turquoise, red tones and feels warm overall. The strongest text pairing is #004C49 on #87E3DB with a contrast ratio of 6.59:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tropical Forest	rgb(0, 76, 73)	hsl(178, 100%, 15%)
Pleasure	rgb(127, 61, 97)	hsl(327, 35%, 37%)
Bermuda Onion	rgb(167, 93, 138)	hsl(324, 30%, 51%)
Dark Salmon Injustice	rgb(227, 150, 124)	hsl(15, 65%, 69%)
Sea Foam	rgb(135, 227, 219)	hsl(175, 62%, 71%)

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.59:1 Good#004C49 on #87E3DB
Aa6.59:1 Good#87E3DB on #004C49
Aa5.12:1 Good#7F3D61 on #87E3DB
Aa5.12:1 Good#87E3DB on #7F3D61
Aa4.19:1 Poor#004C49 on #E3967C
Aa4.19:1 Poor#E3967C on #004C49
Aa3.25:1 Poor#7F3D61 on #E3967C
Aa3.25:1 Poor#E3967C on #7F3D61

Color blindness preview

CSS variables

/* Tropical Forest to Sea Foam — https://swatchly.xyz/palette/004c49-7f3d61-a75d8a-e3967c-87e3db */
:root {
  --tropical-forest: #004c49;
  --pleasure: #7f3d61;
  --bermuda-onion: #a75d8a;
  --dark-salmon-injustice: #e3967c;
  --sea-foam: #87e3db;
}

Tailwind CSS v4

/* Tropical Forest to Sea Foam — https://swatchly.xyz/palette/004c49-7f3d61-a75d8a-e3967c-87e3db */
@theme {
  --color-tropical-forest: #004c49;
  --color-tropical-forest-50: #dbfdfa;
  --color-tropical-forest-100: #cef4f1;
  --color-tropical-forest-200: #b4e2de;
  --color-tropical-forest-300: #97cdc9;
  --color-tropical-forest-400: #72aeaa;
  --color-tropical-forest-500: #54928e;
  --color-tropical-forest-600: #3a7773;
  --color-tropical-forest-700: #265f5c;
  --color-tropical-forest-800: #004c49;
  --color-tropical-forest-900: #0c3a37;
  --color-tropical-forest-950: #042422;
  --color-pleasure: #7f3d61;
  --color-pleasure-50: #fff1f7;
  --color-pleasure-100: #ffe2ef;
  --color-pleasure-200: #fec4e1;
  --color-pleasure-300: #ecabcb;
  --color-pleasure-400: #d089ad;
  --color-pleasure-500: #b46d92;
  --color-pleasure-600: #975478;
  --color-pleasure-700: #7f3d61;
  --color-pleasure-800: #642f4c;
  --color-pleasure-900: #4f223b;
  --color-pleasure-950: #341325;
  --color-bermuda-onion: #a75d8a;
  --color-bermuda-onion-50: #ffedf7;
  --color-bermuda-onion-100: #ffdaef;
  --color-bermuda-onion-200: #fabadf;
  --color-bermuda-onion-300: #e69ec8;
  --color-bermuda-onion-400: #c67aa7;
  --color-bermuda-onion-500: #a75d8a;
  --color-bermuda-onion-600: #8b4671;
  --color-bermuda-onion-700: #72345b;
  --color-bermuda-onion-800: #5c2748;
  --color-bermuda-onion-900: #4a1c39;
  --color-bermuda-onion-950: #311025;
  --color-dark-salmon-injustice: #e3967c;
  --color-dark-salmon-injustice-50: #fff7f4;
  --color-dark-salmon-injustice-100: #ffece6;
  --color-dark-salmon-injustice-200: #ffd4c5;
  --color-dark-salmon-injustice-300: #f9b8a3;
  --color-dark-salmon-injustice-400: #e3967c;
  --color-dark-salmon-injustice-500: #c37960;
  --color-dark-salmon-injustice-600: #a35d44;
  --color-dark-salmon-injustice-700: #86452f;
  --color-dark-salmon-injustice-800: #6b3320;
  --color-dark-salmon-injustice-900: #542414;
  --color-dark-salmon-injustice-950: #351408;
  --color-sea-foam: #87e3db;
  --color-sea-foam-50: #c9fcf7;
  --color-sea-foam-100: #b8f2ec;
  --color-sea-foam-200: #87e3db;
  --color-sea-foam-300: #7dcbc4;
  --color-sea-foam-400: #55aea7;
  --color-sea-foam-500: #33948d;
  --color-sea-foam-600: #0f7973;
  --color-sea-foam-700: #00625c;
  --color-sea-foam-800: #004d49;
  --color-sea-foam-900: #003c38;
  --color-sea-foam-950: #002523;
}