Holographic Lavender to Elite Teal color palette

E6E2FFHolographic Lavender E8A35CPumpkin Pie CB7600Maine Coon Orange 007262Tropical Rainforest 003833Elite Teal

Open in generator Export PNG, PDF, ASE…

About this palette

Holographic Lavender to Elite Teal is a 5-color cool, vintage palette: #E6E2FF (Holographic Lavender), #E8A35C (Pumpkin Pie), #CB7600 (Maine Coon Orange), #007262 (Tropical Rainforest), #003833 (Elite Teal). It mixes purple, orange, turquoise tones and feels cool overall. The strongest text pairing is #E6E2FF on #003833 with a contrast ratio of 10.34:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Holographic Lavender	rgb(230, 226, 255)	hsl(248, 100%, 94%)
Pumpkin Pie	rgb(232, 163, 92)	hsl(30, 75%, 64%)
Maine Coon Orange	rgb(203, 118, 0)	hsl(35, 100%, 40%)
Tropical Rainforest	rgb(0, 114, 98)	hsl(172, 100%, 22%)
Elite Teal	rgb(0, 56, 51)	hsl(175, 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.34:1 Very good#E6E2FF on #003833
Aa10.34:1 Very good#003833 on #E6E2FF
Aa6.09:1 Good#E8A35C on #003833
Aa6.09:1 Good#003833 on #E8A35C
Aa4.66:1 Good#E6E2FF on #007262
Aa4.66:1 Good#007262 on #E6E2FF
Aa3.80:1 Poor#CB7600 on #003833
Aa3.80:1 Poor#003833 on #CB7600

Color blindness preview

CSS variables

/* Holographic Lavender to Elite Teal — https://swatchly.xyz/palette/e6e2ff-e8a35c-cb7600-007262-003833 */
:root {
  --holographic-lavender: #e6e2ff;
  --pumpkin-pie: #e8a35c;
  --maine-coon-orange: #cb7600;
  --tropical-rainforest: #007262;
  --elite-teal: #003833;
}

Tailwind CSS v4

/* Holographic Lavender to Elite Teal — https://swatchly.xyz/palette/e6e2ff-e8a35c-cb7600-007262-003833 */
@theme {
  --color-holographic-lavender: #e6e2ff;
  --color-holographic-lavender-50: #f1efff;
  --color-holographic-lavender-100: #e6e2ff;
  --color-holographic-lavender-200: #d3d0e6;
  --color-holographic-lavender-300: #bebad2;
  --color-holographic-lavender-400: #9f9bb5;
  --color-holographic-lavender-500: #85819b;
  --color-holographic-lavender-600: #6b6780;
  --color-holographic-lavender-700: #555268;
  --color-holographic-lavender-800: #423f53;
  --color-holographic-lavender-900: #333041;
  --color-holographic-lavender-950: #1f1d29;
  --color-pumpkin-pie: #e8a35c;
  --color-pumpkin-pie-50: #ffead7;
  --color-pumpkin-pie-100: #ffdbb8;
  --color-pumpkin-pie-200: #f8c089;
  --color-pumpkin-pie-300: #e8a35c;
  --color-pumpkin-pie-400: #c88640;
  --color-pumpkin-pie-500: #ae6d20;
  --color-pumpkin-pie-600: #915600;
  --color-pumpkin-pie-700: #754400;
  --color-pumpkin-pie-800: #5e3500;
  --color-pumpkin-pie-900: #4b2a00;
  --color-pumpkin-pie-950: #301900;
  --color-maine-coon-orange: #cb7600;
  --color-maine-coon-orange-50: #fff4eb;
  --color-maine-coon-orange-100: #ffead8;
  --color-maine-coon-orange-200: #ffd2aa;
  --color-maine-coon-orange-300: #ffb46f;
  --color-maine-coon-orange-400: #e5923e;
  --color-maine-coon-orange-500: #cb7600;
  --color-maine-coon-orange-600: #a45e00;
  --color-maine-coon-orange-700: #834a00;
  --color-maine-coon-orange-800: #673900;
  --color-maine-coon-orange-900: #4f2b00;
  --color-maine-coon-orange-950: #331900;
  --color-tropical-rainforest: #007262;
  --color-tropical-rainforest-50: #d8fff5;
  --color-tropical-rainforest-100: #c1f6e9;
  --color-tropical-rainforest-200: #a2e3d4;
  --color-tropical-rainforest-300: #81ccbc;
  --color-tropical-rainforest-400: #56ac9b;
  --color-tropical-rainforest-500: #328f7e;
  --color-tropical-rainforest-600: #007262;
  --color-tropical-rainforest-700: #005b4d;
  --color-tropical-rainforest-800: #00473c;
  --color-tropical-rainforest-900: #00372f;
  --color-tropical-rainforest-950: #00231d;
  --color-elite-teal: #003833;
  --color-elite-teal-50: #e0fcf8;
  --color-elite-teal-100: #d4f3ee;
  --color-elite-teal-200: #bbe1db;
  --color-elite-teal-300: #a0cbc5;
  --color-elite-teal-400: #7caca5;
  --color-elite-teal-500: #5f9089;
  --color-elite-teal-600: #45746e;
  --color-elite-teal-700: #305c56;
  --color-elite-teal-800: #214742;
  --color-elite-teal-900: #003833;
  --color-elite-teal-950: #0a211e;
}