Start generating

Frozen Boubble to Elegant Purple Gown color palette

5FF2D6Frozen BoubbleF28B00Elden Ring Orange8D5EBDLusty Lavender007267Pine Scented Lagoon4F2164Elegant Purple Gown
Open in generator Export PNG, PDF, ASE…

About this palette

Frozen Boubble to Elegant Purple Gown is a 5-color cool palette: #5FF2D6 (Frozen Boubble), #F28B00 (Elden Ring Orange), #8D5EBD (Lusty Lavender), #007267 (Pine Scented Lagoon), #4F2164 (Elegant Purple Gown). It mixes turquoise, orange, purple tones and feels cool overall. The strongest text pairing is #5FF2D6 on #4F2164 with a contrast ratio of 8.74:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Frozen Boubblergb(95, 242, 214)hsl(169, 85%, 66%)
Elden Ring Orangergb(242, 139, 0)hsl(34, 100%, 47%)
Lusty Lavenderrgb(141, 94, 189)hsl(270, 42%, 55%)
Pine Scented Lagoonrgb(0, 114, 103)hsl(174, 100%, 22%)
Elegant Purple Gownrgb(79, 33, 100)hsl(281, 50%, 26%)

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.

  • Aa8.74:1 Very good#5FF2D6 on #4F2164
  • Aa8.74:1 Very good#4F2164 on #5FF2D6
  • Aa4.88:1 Good#F28B00 on #4F2164
  • Aa4.88:1 Good#4F2164 on #F28B00
  • Aa4.21:1 Poor#5FF2D6 on #007267
  • Aa4.21:1 Poor#007267 on #5FF2D6
  • Aa3.39:1 Poor#5FF2D6 on #8D5EBD
  • Aa3.39:1 Poor#8D5EBD on #5FF2D6

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Frozen Boubble to Elegant Purple Gown — https://swatchly.xyz/palette/5ff2d6-f28b00-8d5ebd-007267-4f2164 */
:root {
  --frozen-boubble: #5ff2d6;
  --elden-ring-orange: #f28b00;
  --lusty-lavender: #8d5ebd;
  --pine-scented-lagoon: #007267;
  --elegant-purple-gown: #4f2164;
}

Tailwind CSS v4

/* Frozen Boubble to Elegant Purple Gown — https://swatchly.xyz/palette/5ff2d6-f28b00-8d5ebd-007267-4f2164 */
@theme {
  --color-frozen-boubble: #5ff2d6;
  --color-frozen-boubble-50: #d3fff4;
  --color-frozen-boubble-100: #acfdea;
  --color-frozen-boubble-200: #5ff2d6;
  --color-frozen-boubble-300: #60d7c0;
  --color-frozen-boubble-400: #15baa1;
  --color-frozen-boubble-500: #009b86;
  --color-frozen-boubble-600: #007d6b;
  --color-frozen-boubble-700: #006455;
  --color-frozen-boubble-800: #004e42;
  --color-frozen-boubble-900: #003c33;
  --color-frozen-boubble-950: #00261f;
  --color-elden-ring-orange: #f28b00;
  --color-elden-ring-orange-50: #fff6ee;
  --color-elden-ring-orange-100: #ffebda;
  --color-elden-ring-orange-200: #ffd3ae;
  --color-elden-ring-orange-300: #ffb472;
  --color-elden-ring-orange-400: #f28b00;
  --color-elden-ring-orange-500: #ca7300;
  --color-elden-ring-orange-600: #a35c00;
  --color-elden-ring-orange-700: #824800;
  --color-elden-ring-orange-800: #663700;
  --color-elden-ring-orange-900: #4e2900;
  --color-elden-ring-orange-950: #321800;
  --color-lusty-lavender: #8d5ebd;
  --color-lusty-lavender-50: #f8f2ff;
  --color-lusty-lavender-100: #f2e9ff;
  --color-lusty-lavender-200: #e6d2ff;
  --color-lusty-lavender-300: #d8b7ff;
  --color-lusty-lavender-400: #bf93f0;
  --color-lusty-lavender-500: #a677d8;
  --color-lusty-lavender-600: #8d5ebd;
  --color-lusty-lavender-700: #72469e;
  --color-lusty-lavender-800: #5b3381;
  --color-lusty-lavender-900: #472467;
  --color-lusty-lavender-950: #2d1344;
  --color-pine-scented-lagoon: #007267;
  --color-pine-scented-lagoon-50: #d7fff8;
  --color-pine-scented-lagoon-100: #c1f6ed;
  --color-pine-scented-lagoon-200: #a2e3d8;
  --color-pine-scented-lagoon-300: #81ccc0;
  --color-pine-scented-lagoon-400: #56aca0;
  --color-pine-scented-lagoon-500: #328f83;
  --color-pine-scented-lagoon-600: #007267;
  --color-pine-scented-lagoon-700: #005b52;
  --color-pine-scented-lagoon-800: #004740;
  --color-pine-scented-lagoon-900: #003731;
  --color-pine-scented-lagoon-950: #00231e;
  --color-elegant-purple-gown: #4f2164;
  --color-elegant-purple-gown-50: #faf1ff;
  --color-elegant-purple-gown-100: #f5e4ff;
  --color-elegant-purple-gown-200: #ecc8ff;
  --color-elegant-purple-gown-300: #d8aeef;
  --color-elegant-purple-gown-400: #bc8dd5;
  --color-elegant-purple-gown-500: #a272bb;
  --color-elegant-purple-gown-600: #88599f;
  --color-elegant-purple-gown-700: #704586;
  --color-elegant-purple-gown-800: #5c356f;
  --color-elegant-purple-gown-900: #4f2164;
  --color-elegant-purple-gown-950: #31183d;
}

Similar palettes