Her Fierceness to Opulent Turquoise color palette

671A36Her Fierceness 006659Philodendron 008D82Go Go Green F089BFBubblegum Beam 87DEC6Opulent Turquoise

Open in generator Export PNG, PDF, ASE…

About this palette

Her Fierceness to Opulent Turquoise is a 5-color cool palette: #671A36 (Her Fierceness), #006659 (Philodendron), #008D82 (Go Go Green), #F089BF (Bubblegum Beam), #87DEC6 (Opulent Turquoise). It mixes red, turquoise, pink tones and feels cool overall. The strongest text pairing is #671A36 on #87DEC6 with a contrast ratio of 7.48:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Her Fierceness	rgb(103, 26, 54)	hsl(338, 60%, 25%)
Philodendron	rgb(0, 102, 89)	hsl(172, 100%, 20%)
Go Go Green	rgb(0, 141, 130)	hsl(175, 100%, 28%)
Bubblegum Beam	rgb(240, 137, 191)	hsl(329, 77%, 74%)
Opulent Turquoise	rgb(135, 222, 198)	hsl(163, 57%, 70%)

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.48:1 Very good#671A36 on #87DEC6
Aa7.48:1 Very good#87DEC6 on #671A36
Aa5.08:1 Good#671A36 on #F089BF
Aa5.08:1 Good#F089BF on #671A36
Aa4.37:1 Poor#006659 on #87DEC6
Aa4.37:1 Poor#87DEC6 on #006659

Color blindness preview

CSS variables

/* Her Fierceness to Opulent Turquoise — https://swatchly.xyz/palette/671a36-006659-008d82-f089bf-87dec6 */
:root {
  --her-fierceness: #671a36;
  --philodendron: #006659;
  --go-go-green: #008d82;
  --bubblegum-beam: #f089bf;
  --opulent-turquoise: #87dec6;
}

Tailwind CSS v4

/* Her Fierceness to Opulent Turquoise — https://swatchly.xyz/palette/671a36-006659-008d82-f089bf-87dec6 */
@theme {
  --color-her-fierceness: #671a36;
  --color-her-fierceness-50: #fff1f4;
  --color-her-fierceness-100: #ffe3e9;
  --color-her-fierceness-200: #ffc6d3;
  --color-her-fierceness-300: #f4a6ba;
  --color-her-fierceness-400: #d68199;
  --color-her-fierceness-500: #b8647c;
  --color-her-fierceness-600: #984961;
  --color-her-fierceness-700: #7a344a;
  --color-her-fierceness-800: #671a36;
  --color-her-fierceness-900: #4b192a;
  --color-her-fierceness-950: #300d19;
  --color-philodendron: #006659;
  --color-philodendron-50: #d8fff6;
  --color-philodendron-100: #c7f7ec;
  --color-philodendron-200: #ace6d9;
  --color-philodendron-300: #8ed1c3;
  --color-philodendron-400: #67b3a4;
  --color-philodendron-500: #479889;
  --color-philodendron-600: #2a7d6f;
  --color-philodendron-700: #006659;
  --color-philodendron-800: #005045;
  --color-philodendron-900: #003e35;
  --color-philodendron-950: #002721;
  --color-go-go-green: #008d82;
  --color-go-go-green-50: #ccfff7;
  --color-go-go-green-100: #b5f6ec;
  --color-go-go-green-200: #93e2d8;
  --color-go-go-green-300: #6ecbc0;
  --color-go-go-green-400: #3dab9f;
  --color-go-go-green-500: #008d82;
  --color-go-go-green-600: #007269;
  --color-go-go-green-700: #005b53;
  --color-go-go-green-800: #004741;
  --color-go-go-green-900: #003833;
  --color-go-go-green-950: #002420;
  --color-bubblegum-beam: #f089bf;
  --color-bubblegum-beam-50: #fff8fb;
  --color-bubblegum-beam-100: #ffedf5;
  --color-bubblegum-beam-200: #ffd3e8;
  --color-bubblegum-beam-300: #ffb3d8;
  --color-bubblegum-beam-400: #f089bf;
  --color-bubblegum-beam-500: #ce6ba0;
  --color-bubblegum-beam-600: #ae4e83;
  --color-bubblegum-beam-700: #8f3668;
  --color-bubblegum-beam-800: #722451;
  --color-bubblegum-beam-900: #59173e;
  --color-bubblegum-beam-950: #380a26;
  --color-opulent-turquoise: #87dec6;
  --color-opulent-turquoise-50: #ecfff9;
  --color-opulent-turquoise-100: #cefeef;
  --color-opulent-turquoise-200: #b4eedc;
  --color-opulent-turquoise-300: #87dec6;
  --color-opulent-turquoise-400: #6abba5;
  --color-opulent-turquoise-500: #479e88;
  --color-opulent-turquoise-600: #25816c;
  --color-opulent-turquoise-700: #056755;
  --color-opulent-turquoise-800: #005041;
  --color-opulent-turquoise-900: #003d31;
  --color-opulent-turquoise-950: #00261e;
}