Tropical Forest to Waikiki Color Palette

About this palette

Tropical Forest to Waikiki is a 4-color vintage palette: #144B3B (Tropical Forest), #FDD3E9 (Light Pink), #FE9664 (Atomic Tangerine), #008EA2 (Waikiki). It mixes turquoise, pink, orange tones and feels balanced overall. The strongest text pairing is #144B3B on #FDD3E9 with a contrast ratio of 7.46:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tropical Forest	rgb(20, 75, 59)	hsl(163, 58%, 19%)
Light Pink	rgb(253, 211, 233)	hsl(329, 91%, 91%)
Atomic Tangerine	rgb(254, 150, 100)	hsl(19, 99%, 69%)
Waikiki	rgb(0, 142, 162)	hsl(187, 100%, 32%)

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.

Aa7.46:1 Very good#144B3B on #FDD3E9
Aa7.46:1 Very good#FDD3E9 on #144B3B
Aa4.65:1 Good#144B3B on #FE9664
Aa4.65:1 Good#FE9664 on #144B3B

Color blindness preview

CSS variables

/* Tropical Forest to Waikiki — https://swatchly.xyz/palette/144b3b-fdd3e9-fe9664-008ea2 */
:root {
  --tropical-forest: #144b3b;
  --light-pink: #fdd3e9;
  --atomic-tangerine: #fe9664;
  --waikiki: #008ea2;
}

Tailwind CSS v4

/* Tropical Forest to Waikiki — https://swatchly.xyz/palette/144b3b-fdd3e9-fe9664-008ea2 */
@theme {
  --color-tropical-forest: #144b3b;
  --color-tropical-forest-50: #dffdf1;
  --color-tropical-forest-100: #d3f4e7;
  --color-tropical-forest-200: #bae2d3;
  --color-tropical-forest-300: #9eccbb;
  --color-tropical-forest-400: #7aad9b;
  --color-tropical-forest-500: #5d927f;
  --color-tropical-forest-600: #437665;
  --color-tropical-forest-700: #2f5e4e;
  --color-tropical-forest-800: #144b3b;
  --color-tropical-forest-900: #15392d;
  --color-tropical-forest-950: #0a231b;
  --color-light-pink: #fdd3e9;
  --color-light-pink-50: #fffafc;
  --color-light-pink-100: #ffeef6;
  --color-light-pink-200: #fdd3e9;
  --color-light-pink-300: #dfbdcf;
  --color-light-pink-400: #c09baf;
  --color-light-pink-500: #a37e92;
  --color-light-pink-600: #866276;
  --color-light-pink-700: #6c4b5d;
  --color-light-pink-800: #543848;
  --color-light-pink-900: #422a37;
  --color-light-pink-950: #2a1923;
  --color-atomic-tangerine: #fe9664;
  --color-atomic-tangerine-50: #ffeae1;
  --color-atomic-tangerine-100: #ffdac9;
  --color-atomic-tangerine-200: #ffbc9d;
  --color-atomic-tangerine-300: #fe9664;
  --color-atomic-tangerine-400: #dc7949;
  --color-atomic-tangerine-500: #c15f2b;
  --color-atomic-tangerine-600: #a3470e;
  --color-atomic-tangerine-700: #863600;
  --color-atomic-tangerine-800: #6c2900;
  --color-atomic-tangerine-900: #562000;
  --color-atomic-tangerine-950: #381200;
  --color-waikiki: #008ea2;
  --color-waikiki-50: #dff9ff;
  --color-waikiki-100: #bcf3ff;
  --color-waikiki-200: #94e2f2;
  --color-waikiki-300: #70cbdd;
  --color-waikiki-400: #3eabbf;
  --color-waikiki-500: #008ea2;
  --color-waikiki-600: #007283;
  --color-waikiki-700: #005b68;
  --color-waikiki-800: #004752;
  --color-waikiki-900: #003841;
  --color-waikiki-950: #00232a;
}