Pink Glitter to Chocolate Rush Color Palette

About this palette

Pink Glitter to Chocolate Rush is a 5-color cool, vintage palette: #FFDFD4 (Pink Glitter), #5FD2E5 (Summer of ’82), #00879F (Cruising), #005D6B (Deep Lagoon), #4E1A06 (Chocolate Rush). It mixes pink, turquoise, blue, brown tones and feels cool overall. The strongest text pairing is #FFDFD4 on #4E1A06 with a contrast ratio of 11.37:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pink Glitter	rgb(255, 223, 212)	hsl(15, 100%, 92%)
Summer of ’82	rgb(95, 210, 229)	hsl(189, 72%, 64%)
Cruising	rgb(0, 135, 159)	hsl(189, 100%, 31%)
Deep Lagoon	rgb(0, 93, 107)	hsl(188, 100%, 21%)
Chocolate Rush	rgb(78, 26, 6)	hsl(17, 86%, 16%)

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.

Aa11.37:1 Very good#FFDFD4 on #4E1A06
Aa11.37:1 Very good#4E1A06 on #FFDFD4
Aa8.03:1 Very good#5FD2E5 on #4E1A06
Aa8.03:1 Very good#4E1A06 on #5FD2E5
Aa6.03:1 Good#FFDFD4 on #005D6B
Aa6.03:1 Good#005D6B on #FFDFD4
Aa4.26:1 Poor#5FD2E5 on #005D6B
Aa4.26:1 Poor#005D6B on #5FD2E5

Color blindness preview

CSS variables

/* Pink Glitter to Chocolate Rush — https://swatchly.xyz/palette/ffdfd4-5fd2e5-00879f-005d6b-4e1a06 */
:root {
  --pink-glitter: #ffdfd4;
  --summer-of-82: #5fd2e5;
  --cruising: #00879f;
  --deep-lagoon: #005d6b;
  --chocolate-rush: #4e1a06;
}

Tailwind CSS v4

/* Pink Glitter to Chocolate Rush — https://swatchly.xyz/palette/ffdfd4-5fd2e5-00879f-005d6b-4e1a06 */
@theme {
  --color-pink-glitter: #ffdfd4;
  --color-pink-glitter-50: #ffede7;
  --color-pink-glitter-100: #ffdfd4;
  --color-pink-glitter-200: #e6cec6;
  --color-pink-glitter-300: #d2b8ae;
  --color-pink-glitter-400: #b5988e;
  --color-pink-glitter-500: #9a7e74;
  --color-pink-glitter-600: #7f645b;
  --color-pink-glitter-700: #674f46;
  --color-pink-glitter-800: #523d35;
  --color-pink-glitter-900: #402e28;
  --color-pink-glitter-950: #291c17;
  --color-summer-of-82: #5fd2e5;
  --color-summer-of-82-50: #dffaff;
  --color-summer-of-82-100: #bff5ff;
  --color-summer-of-82-200: #96e5f3;
  --color-summer-of-82-300: #5fd2e5;
  --color-summer-of-82-400: #40b1c3;
  --color-summer-of-82-500: #0096a8;
  --color-summer-of-82-600: #007988;
  --color-summer-of-82-700: #00606c;
  --color-summer-of-82-800: #004b55;
  --color-summer-of-82-900: #003a42;
  --color-summer-of-82-950: #00242a;
  --color-cruising: #00879f;
  --color-cruising-50: #e5f9ff;
  --color-cruising-100: #d1f5ff;
  --color-cruising-200: #a4e9fb;
  --color-cruising-300: #86d6eb;
  --color-cruising-400: #5bbad1;
  --color-cruising-500: #35a0b9;
  --color-cruising-600: #00879f;
  --color-cruising-700: #006b7f;
  --color-cruising-800: #005463;
  --color-cruising-900: #00404d;
  --color-cruising-950: #002831;
  --color-deep-lagoon: #005d6b;
  --color-deep-lagoon-50: #e3faff;
  --color-deep-lagoon-100: #c8f4fe;
  --color-deep-lagoon-200: #ace2ed;
  --color-deep-lagoon-300: #8dccd9;
  --color-deep-lagoon-400: #66acbb;
  --color-deep-lagoon-500: #46909f;
  --color-deep-lagoon-600: #2a7583;
  --color-deep-lagoon-700: #005d6b;
  --color-deep-lagoon-800: #034854;
  --color-deep-lagoon-900: #003841;
  --color-deep-lagoon-950: #002329;
  --color-chocolate-rush: #4e1a06;
  --color-chocolate-rush-50: #fff2ee;
  --color-chocolate-rush-100: #ffe5dc;
  --color-chocolate-rush-200: #fdcab9;
  --color-chocolate-rush-300: #eab29e;
  --color-chocolate-rush-400: #cc8f7a;
  --color-chocolate-rush-500: #af725d;
  --color-chocolate-rush-600: #915744;
  --color-chocolate-rush-700: #744130;
  --color-chocolate-rush-800: #5b3021;
  --color-chocolate-rush-900: #4e1a06;
  --color-chocolate-rush-950: #2b130a;
}