Start generating

Pink Glitter to Elite Teal color palette

FFDFD9Pink GlitterFF9F85Candy009DE1Homeworld0079B4Brilliant Blue005B52Evergreen003832Elite Teal
Open in generator Export PNG, PDF, ASE…

About this palette

Pink Glitter to Elite Teal is a 6-color cool palette: #FFDFD9 (Pink Glitter), #FF9F85 (Candy), #009DE1 (Homeworld), #0079B4 (Brilliant Blue), #005B52 (Evergreen), #003832 (Elite Teal). It mixes pink, blue, turquoise tones and feels cool overall. The strongest text pairing is #FFDFD9 on #003832 with a contrast ratio of 10.43:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Pink Glitterrgb(255, 223, 217)hsl(9, 100%, 93%)
Candyrgb(255, 159, 133)hsl(13, 100%, 76%)
Homeworldrgb(0, 157, 225)hsl(198, 100%, 44%)
Brilliant Bluergb(0, 121, 180)hsl(200, 100%, 35%)
Evergreenrgb(0, 91, 82)hsl(174, 100%, 18%)
Elite Tealrgb(0, 56, 50)hsl(174, 100%, 11%)

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.

  • Aa10.43:1 Very good#FFDFD9 on #003832
  • Aa10.43:1 Very good#003832 on #FFDFD9
  • Aa6.55:1 Good#FF9F85 on #003832
  • Aa6.55:1 Good#003832 on #FF9F85
  • Aa6.42:1 Good#FFDFD9 on #005B52
  • Aa6.42:1 Good#005B52 on #FFDFD9
  • Aa4.29:1 Poor#009DE1 on #003832
  • Aa4.29:1 Poor#003832 on #009DE1

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Pink Glitter to Elite Teal — https://swatchly.xyz/palette/ffdfd9-ff9f85-009de1-0079b4-005b52-003832 */
:root {
  --pink-glitter: #ffdfd9;
  --candy: #ff9f85;
  --homeworld: #009de1;
  --brilliant-blue: #0079b4;
  --evergreen: #005b52;
  --elite-teal: #003832;
}

Tailwind CSS v4

/* Pink Glitter to Elite Teal — https://swatchly.xyz/palette/ffdfd9-ff9f85-009de1-0079b4-005b52-003832 */
@theme {
  --color-pink-glitter: #ffdfd9;
  --color-pink-glitter-50: #ffedea;
  --color-pink-glitter-100: #ffdfd9;
  --color-pink-glitter-200: #e6ceca;
  --color-pink-glitter-300: #d2b7b2;
  --color-pink-glitter-400: #b59893;
  --color-pink-glitter-500: #9a7d78;
  --color-pink-glitter-600: #7f645f;
  --color-pink-glitter-700: #674f4a;
  --color-pink-glitter-800: #523c39;
  --color-pink-glitter-900: #402e2b;
  --color-pink-glitter-950: #281c19;
  --color-candy: #ff9f85;
  --color-candy-50: #ffeeea;
  --color-candy-100: #ffe0d7;
  --color-candy-200: #ffc3b2;
  --color-candy-300: #ff9f85;
  --color-candy-400: #dc8269;
  --color-candy-500: #c0664e;
  --color-candy-600: #a24d36;
  --color-candy-700: #863924;
  --color-candy-800: #6d2917;
  --color-candy-900: #571e0e;
  --color-candy-950: #391005;
  --color-homeworld: #009de1;
  --color-homeworld-50: #f0f9ff;
  --color-homeworld-100: #e1f3ff;
  --color-homeworld-200: #bde4ff;
  --color-homeworld-300: #8fd3ff;
  --color-homeworld-400: #47b7f8;
  --color-homeworld-500: #009de1;
  --color-homeworld-600: #007eb6;
  --color-homeworld-700: #006491;
  --color-homeworld-800: #004d72;
  --color-homeworld-900: #003b58;
  --color-homeworld-950: #002438;
  --color-brilliant-blue: #0079b4;
  --color-brilliant-blue-50: #ecf7ff;
  --color-brilliant-blue-100: #dbf0ff;
  --color-brilliant-blue-200: #b6e0ff;
  --color-brilliant-blue-300: #87cdff;
  --color-brilliant-blue-400: #57afea;
  --color-brilliant-blue-500: #3294d0;
  --color-brilliant-blue-600: #0079b4;
  --color-brilliant-blue-700: #006090;
  --color-brilliant-blue-800: #004b72;
  --color-brilliant-blue-900: #003959;
  --color-brilliant-blue-950: #002439;
  --color-evergreen: #005b52;
  --color-evergreen-50: #d8fff8;
  --color-evergreen-100: #caf6ee;
  --color-evergreen-200: #ade3da;
  --color-evergreen-300: #8eccc2;
  --color-evergreen-400: #66aca2;
  --color-evergreen-500: #479085;
  --color-evergreen-600: #2b736a;
  --color-evergreen-700: #005b52;
  --color-evergreen-800: #074740;
  --color-evergreen-900: #013731;
  --color-evergreen-950: #00221e;
  --color-elite-teal: #003832;
  --color-elite-teal-50: #e0fcf7;
  --color-elite-teal-100: #d4f3ed;
  --color-elite-teal-200: #bbe1da;
  --color-elite-teal-300: #a0cbc4;
  --color-elite-teal-400: #7caca4;
  --color-elite-teal-500: #5f9088;
  --color-elite-teal-600: #45746d;
  --color-elite-teal-700: #305c55;
  --color-elite-teal-800: #214742;
  --color-elite-teal-900: #003832;
  --color-elite-teal-950: #0a211e;
}

Similar palettes