Pine Scented Lagoon to Hard Candy color palette

00716APine Scented Lagoon 35C3B6Treasured Teal D5405CFlesh and Blood 6E293DSiren FBB9BAHard Candy

About this palette

Pine Scented Lagoon to Hard Candy is a 5-color warm palette: #00716A (Pine Scented Lagoon), #35C3B6 (Treasured Teal), #D5405C (Flesh and Blood), #6E293D (Siren), #FBB9BA (Hard Candy). It mixes turquoise, red, pink tones and feels warm overall. The strongest text pairing is #6E293D on #FBB9BA with a contrast ratio of 6.23:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pine Scented Lagoon	rgb(0, 113, 106)	hsl(176, 100%, 22%)
Treasured Teal	rgb(53, 195, 182)	hsl(175, 57%, 49%)
Flesh and Blood	rgb(213, 64, 92)	hsl(349, 64%, 54%)
Siren	rgb(110, 41, 61)	hsl(343, 46%, 30%)
Hard Candy	rgb(251, 185, 186)	hsl(359, 89%, 85%)

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#6E293D on #FBB9BA
Aa6.23:1 Good#FBB9BA on #6E293D
Aa4.70:1 Good#35C3B6 on #6E293D
Aa4.70:1 Good#6E293D on #35C3B6
Aa3.57:1 Poor#00716A on #FBB9BA
Aa3.57:1 Poor#FBB9BA on #00716A

Color blindness preview

CSS variables

/* Pine Scented Lagoon to Hard Candy — https://swatchly.xyz/palette/00716a-35c3b6-d5405c-6e293d-fbb9ba */
:root {
  --pine-scented-lagoon: #00716a;
  --treasured-teal: #35c3b6;
  --flesh-and-blood: #d5405c;
  --siren: #6e293d;
  --hard-candy: #fbb9ba;
}

Tailwind CSS v4

/* Pine Scented Lagoon to Hard Candy — https://swatchly.xyz/palette/00716a-35c3b6-d5405c-6e293d-fbb9ba */
@theme {
  --color-pine-scented-lagoon: #00716a;
  --color-pine-scented-lagoon-50: #d6fffa;
  --color-pine-scented-lagoon-100: #c1f6ef;
  --color-pine-scented-lagoon-200: #a2e2db;
  --color-pine-scented-lagoon-300: #80cbc3;
  --color-pine-scented-lagoon-400: #56aba3;
  --color-pine-scented-lagoon-500: #328e86;
  --color-pine-scented-lagoon-600: #00716a;
  --color-pine-scented-lagoon-700: #005a54;
  --color-pine-scented-lagoon-800: #004642;
  --color-pine-scented-lagoon-900: #003733;
  --color-pine-scented-lagoon-950: #002220;
  --color-treasured-teal: #35c3b6;
  --color-treasured-teal-50: #e5fffb;
  --color-treasured-teal-100: #c0fff6;
  --color-treasured-teal-200: #9df1e6;
  --color-treasured-teal-300: #79ded2;
  --color-treasured-teal-400: #35c3b6;
  --color-treasured-teal-500: #00a498;
  --color-treasured-teal-600: #00847a;
  --color-treasured-teal-700: #006860;
  --color-treasured-teal-800: #00514a;
  --color-treasured-teal-900: #003d38;
  --color-treasured-teal-950: #002622;
  --color-flesh-and-blood: #d5405c;
  --color-flesh-and-blood-50: #ffeff0;
  --color-flesh-and-blood-100: #ffdfe1;
  --color-flesh-and-blood-200: #ffc1c5;
  --color-flesh-and-blood-300: #ff9aa4;
  --color-flesh-and-blood-400: #f56278;
  --color-flesh-and-blood-500: #d5405c;
  --color-flesh-and-blood-600: #b52345;
  --color-flesh-and-blood-700: #960933;
  --color-flesh-and-blood-800: #790026;
  --color-flesh-and-blood-900: #60001c;
  --color-flesh-and-blood-950: #400010;
  --color-siren: #6e293d;
  --color-siren-50: #fff1f4;
  --color-siren-100: #ffe3e8;
  --color-siren-200: #ffc6d1;
  --color-siren-300: #f1abba;
  --color-siren-400: #d5899a;
  --color-siren-500: #ba6d7f;
  --color-siren-600: #9c5365;
  --color-siren-700: #813f50;
  --color-siren-800: #6e293d;
  --color-siren-900: #53222f;
  --color-siren-950: #36131d;
  --color-hard-candy: #fbb9ba;
  --color-hard-candy-50: #ffe7e7;
  --color-hard-candy-100: #ffd7d7;
  --color-hard-candy-200: #fbb9ba;
  --color-hard-candy-300: #e1a7a8;
  --color-hard-candy-400: #c58889;
  --color-hard-candy-500: #aa6e70;
  --color-hard-candy-600: #8f5658;
  --color-hard-candy-700: #764345;
  --color-hard-candy-800: #603335;
  --color-hard-candy-900: #4c2628;
  --color-hard-candy-950: #311617;
}