Holographic Lavender to Very Coffee color palette

E7E6FFHolographic Lavender 78C8FFNevermind Nirvana A89BF7Cold Lips 9F6F00Glazed Chestnut 006887Sea Goddess 5B4500Very Coffee

Open in generator Export PNG, PDF, ASE…

About this palette

Holographic Lavender to Very Coffee is a 6-color palette: #E7E6FF (Holographic Lavender), #78C8FF (Nevermind Nirvana), #A89BF7 (Cold Lips), #9F6F00 (Glazed Chestnut), #006887 (Sea Goddess), #5B4500 (Very Coffee). It mixes white, blue, purple, yellow, brown tones and feels cool overall. The strongest text pairing is #E7E6FF on #5B4500 with a contrast ratio of 7.47:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Holographic Lavender	rgb(231, 230, 255)	hsl(242, 100%, 95%)
Nevermind Nirvana	rgb(120, 200, 255)	hsl(204, 100%, 74%)
Cold Lips	rgb(168, 155, 247)	hsl(248, 85%, 79%)
Glazed Chestnut	rgb(159, 111, 0)	hsl(42, 100%, 31%)
Sea Goddess	rgb(0, 104, 135)	hsl(194, 100%, 26%)
Very Coffee	rgb(91, 69, 0)	hsl(45, 100%, 18%)

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.47:1 Very good#E7E6FF on #5B4500
Aa7.47:1 Very good#5B4500 on #E7E6FF
Aa5.15:1 Good#E7E6FF on #006887
Aa5.15:1 Good#006887 on #E7E6FF
Aa5.01:1 Good#78C8FF on #5B4500
Aa5.01:1 Good#5B4500 on #78C8FF
Aa3.79:1 Poor#A89BF7 on #5B4500
Aa3.79:1 Poor#5B4500 on #A89BF7

Color blindness preview

CSS variables

/* Holographic Lavender to Very Coffee — https://swatchly.xyz/palette/e7e6ff-78c8ff-a89bf7-9f6f00-006887-5b4500 */
:root {
  --holographic-lavender: #e7e6ff;
  --nevermind-nirvana: #78c8ff;
  --cold-lips: #a89bf7;
  --glazed-chestnut: #9f6f00;
  --sea-goddess: #006887;
  --very-coffee: #5b4500;
}

Tailwind CSS v4

/* Holographic Lavender to Very Coffee — https://swatchly.xyz/palette/e7e6ff-78c8ff-a89bf7-9f6f00-006887-5b4500 */
@theme {
  --color-holographic-lavender: #e7e6ff;
  --color-holographic-lavender-50: #f2f2ff;
  --color-holographic-lavender-100: #e7e6ff;
  --color-holographic-lavender-200: #d4d3e6;
  --color-holographic-lavender-300: #bebdd2;
  --color-holographic-lavender-400: #9f9eb4;
  --color-holographic-lavender-500: #848399;
  --color-holographic-lavender-600: #6a697e;
  --color-holographic-lavender-700: #545366;
  --color-holographic-lavender-800: #414051;
  --color-holographic-lavender-900: #32313f;
  --color-holographic-lavender-950: #1f1e28;
  --color-nevermind-nirvana: #78c8ff;
  --color-nevermind-nirvana-50: #eaf6ff;
  --color-nevermind-nirvana-100: #d6edff;
  --color-nevermind-nirvana-200: #addcff;
  --color-nevermind-nirvana-300: #78c8ff;
  --color-nevermind-nirvana-400: #5ca8dc;
  --color-nevermind-nirvana-500: #3b8dc0;
  --color-nevermind-nirvana-600: #1d72a3;
  --color-nevermind-nirvana-700: #015a87;
  --color-nevermind-nirvana-800: #00476b;
  --color-nevermind-nirvana-900: #003754;
  --color-nevermind-nirvana-950: #002237;
  --color-cold-lips: #a89bf7;
  --color-cold-lips-50: #f8f7ff;
  --color-cold-lips-100: #efedff;
  --color-cold-lips-200: #dcd8ff;
  --color-cold-lips-300: #c6bfff;
  --color-cold-lips-400: #a89bf7;
  --color-cold-lips-500: #8b7ed7;
  --color-cold-lips-600: #7062b7;
  --color-cold-lips-700: #594a98;
  --color-cold-lips-800: #45377c;
  --color-cold-lips-900: #342862;
  --color-cold-lips-950: #1f1740;
  --color-glazed-chestnut: #9f6f00;
  --color-glazed-chestnut-50: #fff1db;
  --color-glazed-chestnut-100: #ffe2b5;
  --color-glazed-chestnut-200: #f2ca89;
  --color-glazed-chestnut-300: #ddaf65;
  --color-glazed-chestnut-400: #bd8d36;
  --color-glazed-chestnut-500: #9f6f00;
  --color-glazed-chestnut-600: #815900;
  --color-glazed-chestnut-700: #674600;
  --color-glazed-chestnut-800: #523700;
  --color-glazed-chestnut-900: #402a00;
  --color-glazed-chestnut-950: #2a1a00;
  --color-sea-goddess: #006887;
  --color-sea-goddess-50: #e9f8ff;
  --color-sea-goddess-100: #d2f1ff;
  --color-sea-goddess-200: #aae3fd;
  --color-sea-goddess-300: #8dcfec;
  --color-sea-goddess-400: #66b2d2;
  --color-sea-goddess-500: #4698b8;
  --color-sea-goddess-600: #297e9e;
  --color-sea-goddess-700: #006887;
  --color-sea-goddess-800: #00516b;
  --color-sea-goddess-900: #003f53;
  --color-sea-goddess-950: #002836;
  --color-very-coffee: #5b4500;
  --color-very-coffee-50: #fff4db;
  --color-very-coffee-100: #f9eac5;
  --color-very-coffee-200: #e8d6aa;
  --color-very-coffee-300: #d5c08e;
  --color-very-coffee-400: #b8a16a;
  --color-very-coffee-500: #9e874d;
  --color-very-coffee-600: #846d34;
  --color-very-coffee-700: #6d5820;
  --color-very-coffee-800: #5b4500;
  --color-very-coffee-900: #453507;
  --color-very-coffee-950: #2d2102;
}