Espresso to Holographic Lavender color palette

52312EEspresso 6759ACProphet Violet 8C935EBullfrog 65D3D0Hidden Sea Glass ECE6FFHolographic Lavender

Open in generator Export PNG, PDF, ASE…

About this palette

Espresso to Holographic Lavender is a 5-color vintage palette: #52312E (Espresso), #6759AC (Prophet Violet), #8C935E (Bullfrog), #65D3D0 (Hidden Sea Glass), #ECE6FF (Holographic Lavender). It mixes brown, purple, green, turquoise, white tones and feels balanced overall. The strongest text pairing is #52312E on #ECE6FF with a contrast ratio of 9.43:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Espresso	rgb(82, 49, 46)	hsl(5, 28%, 25%)
Prophet Violet	rgb(103, 89, 172)	hsl(250, 33%, 51%)
Bullfrog	rgb(140, 147, 94)	hsl(68, 22%, 47%)
Hidden Sea Glass	rgb(101, 211, 208)	hsl(178, 56%, 61%)
Holographic Lavender	rgb(236, 230, 255)	hsl(254, 100%, 95%)

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.

Aa9.43:1 Very good#52312E on #ECE6FF
Aa9.43:1 Very good#ECE6FF on #52312E
Aa6.41:1 Good#52312E on #65D3D0
Aa6.41:1 Good#65D3D0 on #52312E
Aa4.81:1 Good#6759AC on #ECE6FF
Aa4.81:1 Good#ECE6FF on #6759AC
Aa3.51:1 Poor#52312E on #8C935E
Aa3.51:1 Poor#8C935E on #52312E

Color blindness preview

CSS variables

/* Espresso to Holographic Lavender — https://swatchly.xyz/palette/52312e-6759ac-8c935e-65d3d0-ece6ff */
:root {
  --espresso: #52312e;
  --prophet-violet: #6759ac;
  --bullfrog: #8c935e;
  --hidden-sea-glass: #65d3d0;
  --holographic-lavender: #ece6ff;
}

Tailwind CSS v4

/* Espresso to Holographic Lavender — https://swatchly.xyz/palette/52312e-6759ac-8c935e-65d3d0-ece6ff */
@theme {
  --color-espresso: #52312e;
  --color-espresso-50: #fff2f0;
  --color-espresso-100: #ffe4e1;
  --color-espresso-200: #efcfcb;
  --color-espresso-300: #dab6b2;
  --color-espresso-400: #bb9490;
  --color-espresso-500: #9e7773;
  --color-espresso-600: #805c59;
  --color-espresso-700: #654643;
  --color-espresso-800: #52312e;
  --color-espresso-900: #3d2624;
  --color-espresso-950: #261615;
  --color-prophet-violet: #6759ac;
  --color-prophet-violet-50: #f4f4ff;
  --color-prophet-violet-100: #e9e8ff;
  --color-prophet-violet-200: #d4d0ff;
  --color-prophet-violet-300: #bcb4ff;
  --color-prophet-violet-400: #9d91e7;
  --color-prophet-violet-500: #8174ca;
  --color-prophet-violet-600: #6759ac;
  --color-prophet-violet-700: #52458e;
  --color-prophet-violet-800: #403474;
  --color-prophet-violet-900: #31265d;
  --color-prophet-violet-950: #1e163d;
  --color-bullfrog: #8c935e;
  --color-bullfrog-50: #f5fadc;
  --color-bullfrog-100: #edf2d0;
  --color-bullfrog-200: #dae0b8;
  --color-bullfrog-300: #c5cb9e;
  --color-bullfrog-400: #a6ad7b;
  --color-bullfrog-500: #8c935e;
  --color-bullfrog-600: #707743;
  --color-bullfrog-700: #595e2e;
  --color-bullfrog-800: #45491f;
  --color-bullfrog-900: #343814;
  --color-bullfrog-950: #202208;
  --color-hidden-sea-glass: #65d3d0;
  --color-hidden-sea-glass-50: #cefffd;
  --color-hidden-sea-glass-100: #b8f8f5;
  --color-hidden-sea-glass-200: #99e6e3;
  --color-hidden-sea-glass-300: #65d3d0;
  --color-hidden-sea-glass-400: #47b3b0;
  --color-hidden-sea-glass-500: #189795;
  --color-hidden-sea-glass-600: #007b79;
  --color-hidden-sea-glass-700: #006260;
  --color-hidden-sea-glass-800: #004d4b;
  --color-hidden-sea-glass-900: #003b3a;
  --color-hidden-sea-glass-950: #002525;
  --color-holographic-lavender: #ece6ff;
  --color-holographic-lavender-50: #f5f2ff;
  --color-holographic-lavender-100: #ece6ff;
  --color-holographic-lavender-200: #d8d4e6;
  --color-holographic-lavender-300: #c2bdd1;
  --color-holographic-lavender-400: #a39db4;
  --color-holographic-lavender-500: #888298;
  --color-holographic-lavender-600: #6d687d;
  --color-holographic-lavender-700: #575265;
  --color-holographic-lavender-800: #443f50;
  --color-holographic-lavender-900: #34303e;
  --color-holographic-lavender-950: #201d28;
}