Peacock Pride to Purple Void color palette

00675CPeacock Pride C78AC1Violaceous FCCBCDKendall Rose 00976ERainforest 3E2242Purple Void

About this palette

Peacock Pride to Purple Void is a 5-color cool, vintage palette: #00675C (Peacock Pride), #C78AC1 (Violaceous), #FCCBCD (Kendall Rose), #00976E (Rainforest), #3E2242 (Purple Void). It mixes turquoise, pink, purple tones and feels cool overall. The strongest text pairing is #FCCBCD on #3E2242 with a contrast ratio of 9.63:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Peacock Pride	rgb(0, 103, 92)	hsl(174, 100%, 20%)
Violaceous	rgb(199, 138, 193)	hsl(306, 35%, 66%)
Kendall Rose	rgb(252, 203, 205)	hsl(358, 89%, 89%)
Rainforest	rgb(0, 151, 110)	hsl(164, 100%, 30%)
Purple Void	rgb(62, 34, 66)	hsl(292, 32%, 20%)

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.63:1 Very good#FCCBCD on #3E2242
Aa9.63:1 Very good#3E2242 on #FCCBCD
Aa5.18:1 Good#C78AC1 on #3E2242
Aa5.18:1 Good#3E2242 on #C78AC1
Aa4.71:1 Good#00675C on #FCCBCD
Aa4.71:1 Good#FCCBCD on #00675C
Aa3.74:1 Poor#00976E on #3E2242
Aa3.74:1 Poor#3E2242 on #00976E

Color blindness preview

CSS variables

/* Peacock Pride to Purple Void — https://swatchly.xyz/palette/00675c-c78ac1-fccbcd-00976e-3e2242 */
:root {
  --peacock-pride: #00675c;
  --violaceous: #c78ac1;
  --kendall-rose: #fccbcd;
  --rainforest: #00976e;
  --purple-void: #3e2242;
}

Tailwind CSS v4

/* Peacock Pride to Purple Void — https://swatchly.xyz/palette/00675c-c78ac1-fccbcd-00976e-3e2242 */
@theme {
  --color-peacock-pride: #00675c;
  --color-peacock-pride-50: #d7fff7;
  --color-peacock-pride-100: #c7f7ee;
  --color-peacock-pride-200: #ace6db;
  --color-peacock-pride-300: #8ed1c6;
  --color-peacock-pride-400: #67b4a7;
  --color-peacock-pride-500: #47998c;
  --color-peacock-pride-600: #2a7e72;
  --color-peacock-pride-700: #00675c;
  --color-peacock-pride-800: #005148;
  --color-peacock-pride-900: #003e37;
  --color-peacock-pride-950: #002722;
  --color-violaceous: #c78ac1;
  --color-violaceous-50: #fff0fd;
  --color-violaceous-100: #ffe0fb;
  --color-violaceous-200: #f6c6f0;
  --color-violaceous-300: #e3addd;
  --color-violaceous-400: #c78ac1;
  --color-violaceous-500: #aa6fa4;
  --color-violaceous-600: #8d5588;
  --color-violaceous-700: #73406f;
  --color-violaceous-800: #5c2f58;
  --color-violaceous-900: #482345;
  --color-violaceous-950: #2e132c;
  --color-kendall-rose: #fccbcd;
  --color-kendall-rose-50: #fff3f3;
  --color-kendall-rose-100: #ffe6e6;
  --color-kendall-rose-200: #fccbcd;
  --color-kendall-rose-300: #dfb7b8;
  --color-kendall-rose-400: #c29698;
  --color-kendall-rose-500: #a67a7c;
  --color-kendall-rose-600: #895f62;
  --color-kendall-rose-700: #6f4a4c;
  --color-kendall-rose-800: #59383a;
  --color-kendall-rose-900: #462a2c;
  --color-kendall-rose-950: #2d191a;
  --color-rainforest: #00976e;
  --color-rainforest-50: #d7ffec;
  --color-rainforest-100: #b7fadc;
  --color-rainforest-200: #96e9c5;
  --color-rainforest-300: #72d3ac;
  --color-rainforest-400: #40b48a;
  --color-rainforest-500: #00976e;
  --color-rainforest-600: #007a58;
  --color-rainforest-700: #006145;
  --color-rainforest-800: #004c36;
  --color-rainforest-900: #003b29;
  --color-rainforest-950: #002619;
  --color-purple-void: #3e2242;
  --color-purple-void-50: #fdf0ff;
  --color-purple-void-100: #f9e3fc;
  --color-purple-void-200: #e8cdeb;
  --color-purple-void-300: #d3b5d7;
  --color-purple-void-400: #b494b8;
  --color-purple-void-500: #98779c;
  --color-purple-void-600: #7b5d80;
  --color-purple-void-700: #624766;
  --color-purple-void-800: #4c3550;
  --color-purple-void-900: #3e2242;
  --color-purple-void-950: #241626;
}