Mauve to Secret Passage Color Palette

About this palette

Mauve to Secret Passage is a 5-color cool palette: #E7B9FF (Mauve), #CF78DD (Pink Orchid), #00918F (Dark Cyan), #00646B (Wakame Green), #3D2A00 (Secret Passage). It mixes purple, turquoise, brown tones and feels cool overall. The strongest text pairing is #E7B9FF on #3D2A00 with a contrast ratio of 8.36:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mauve	rgb(231, 185, 255)	hsl(279, 100%, 86%)
Pink Orchid	rgb(207, 120, 221)	hsl(292, 60%, 67%)
Dark Cyan	rgb(0, 145, 143)	hsl(179, 100%, 28%)
Wakame Green	rgb(0, 100, 107)	hsl(184, 100%, 21%)
Secret Passage	rgb(61, 42, 0)	hsl(41, 100%, 12%)

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.36:1 Very good#E7B9FF on #3D2A00
Aa8.36:1 Very good#3D2A00 on #E7B9FF
Aa4.83:1 Good#CF78DD on #3D2A00
Aa4.83:1 Good#3D2A00 on #CF78DD
Aa4.21:1 Poor#E7B9FF on #00646B
Aa4.21:1 Poor#00646B on #E7B9FF
Aa3.56:1 Poor#00918F on #3D2A00
Aa3.56:1 Poor#3D2A00 on #00918F

Color blindness preview

CSS variables

/* Mauve to Secret Passage — https://swatchly.xyz/palette/e7b9ff-cf78dd-00918f-00646b-3d2a00 */
:root {
  --mauve: #e7b9ff;
  --pink-orchid: #cf78dd;
  --dark-cyan: #00918f;
  --wakame-green: #00646b;
  --secret-passage: #3d2a00;
}

Tailwind CSS v4

/* Mauve to Secret Passage — https://swatchly.xyz/palette/e7b9ff-cf78dd-00918f-00646b-3d2a00 */
@theme {
  --color-mauve: #e7b9ff;
  --color-mauve-50: #f7e8ff;
  --color-mauve-100: #f1d8ff;
  --color-mauve-200: #e7b9ff;
  --color-mauve-300: #cfa7e4;
  --color-mauve-400: #b388c9;
  --color-mauve-500: #996eae;
  --color-mauve-600: #7e5593;
  --color-mauve-700: #67427a;
  --color-mauve-800: #533263;
  --color-mauve-900: #41254f;
  --color-mauve-950: #291533;
  --color-pink-orchid: #cf78dd;
  --color-pink-orchid-50: #fdefff;
  --color-pink-orchid-100: #fbdfff;
  --color-pink-orchid-200: #f7c0ff;
  --color-pink-orchid-300: #eb9ef7;
  --color-pink-orchid-400: #cf78dd;
  --color-pink-orchid-500: #b25cc0;
  --color-pink-orchid-600: #9542a2;
  --color-pink-orchid-700: #7a2e86;
  --color-pink-orchid-800: #621e6d;
  --color-pink-orchid-900: #4e1357;
  --color-pink-orchid-950: #330839;
  --color-dark-cyan: #00918f;
  --color-dark-cyan-50: #cefffd;
  --color-dark-cyan-100: #b6f7f4;
  --color-dark-cyan-200: #95e4e1;
  --color-dark-cyan-300: #70cecb;
  --color-dark-cyan-400: #3faeac;
  --color-dark-cyan-500: #00918f;
  --color-dark-cyan-600: #007573;
  --color-dark-cyan-700: #005d5c;
  --color-dark-cyan-800: #004948;
  --color-dark-cyan-900: #003938;
  --color-dark-cyan-950: #002423;
  --color-wakame-green: #00646b;
  --color-wakame-green-50: #ddfcff;
  --color-wakame-green-100: #c6f5fa;
  --color-wakame-green-200: #ace4e9;
  --color-wakame-green-300: #8ecfd5;
  --color-wakame-green-400: #67b1b8;
  --color-wakame-green-500: #47969d;
  --color-wakame-green-600: #2a7b82;
  --color-wakame-green-700: #00646b;
  --color-wakame-green-800: #004e54;
  --color-wakame-green-900: #003c41;
  --color-wakame-green-950: #002629;
  --color-secret-passage: #3d2a00;
  --color-secret-passage-50: #fff4e0;
  --color-secret-passage-100: #f8e9cf;
  --color-secret-passage-200: #e7d5b6;
  --color-secret-passage-300: #d2be9b;
  --color-secret-passage-400: #b39d76;
  --color-secret-passage-500: #978159;
  --color-secret-passage-600: #7a663f;
  --color-secret-passage-700: #614f2c;
  --color-secret-passage-800: #4b3b1d;
  --color-secret-passage-900: #3d2a00;
  --color-secret-passage-950: #231a08;
}