We Peep to Midnight Velvet color palette

FFD8D9We Peep ACB230Honey and Thyme 00888DDark Cyan 834651Red Elegance 281F44Midnight Velvet

About this palette

We Peep to Midnight Velvet is a 5-color warm, vintage palette: #FFD8D9 (We Peep), #ACB230 (Honey and Thyme), #00888D (Dark Cyan), #834651 (Red Elegance), #281F44 (Midnight Velvet). It mixes pink, green, turquoise, red, purple tones and feels warm overall. The strongest text pairing is #FFD8D9 on #281F44 with a contrast ratio of 11.74:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
We Peep	rgb(255, 216, 217)	hsl(358, 100%, 92%)
Honey and Thyme	rgb(172, 178, 48)	hsl(63, 58%, 44%)
Dark Cyan	rgb(0, 136, 141)	hsl(182, 100%, 28%)
Red Elegance	rgb(131, 70, 81)	hsl(349, 30%, 39%)
Midnight Velvet	rgb(40, 31, 68)	hsl(255, 37%, 19%)

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.

Aa11.74:1 Very good#FFD8D9 on #281F44
Aa11.74:1 Very good#281F44 on #FFD8D9
Aa6.69:1 Good#ACB230 on #281F44
Aa6.69:1 Good#281F44 on #ACB230
Aa5.43:1 Good#FFD8D9 on #834651
Aa5.43:1 Good#834651 on #FFD8D9
Aa3.58:1 Poor#00888D on #281F44
Aa3.58:1 Poor#281F44 on #00888D

Color blindness preview

CSS variables

/* We Peep to Midnight Velvet — https://swatchly.xyz/palette/ffd8d9-acb230-00888d-834651-281f44 */
:root {
  --we-peep: #ffd8d9;
  --honey-and-thyme: #acb230;
  --dark-cyan: #00888d;
  --red-elegance: #834651;
  --midnight-velvet: #281f44;
}

Tailwind CSS v4

/* We Peep to Midnight Velvet — https://swatchly.xyz/palette/ffd8d9-acb230-00888d-834651-281f44 */
@theme {
  --color-we-peep: #ffd8d9;
  --color-we-peep-50: #ffe8e8;
  --color-we-peep-100: #ffd8d9;
  --color-we-peep-200: #e6c8c9;
  --color-we-peep-300: #d3b2b3;
  --color-we-peep-400: #b79495;
  --color-we-peep-500: #9c797b;
  --color-we-peep-600: #826162;
  --color-we-peep-700: #6a4c4d;
  --color-we-peep-800: #543b3c;
  --color-we-peep-900: #422c2d;
  --color-we-peep-950: #2a1a1b;
  --color-honey-and-thyme: #acb230;
  --color-honey-and-thyme-50: #f8fec2;
  --color-honey-and-thyme-100: #f0f6b3;
  --color-honey-and-thyme-200: #dee593;
  --color-honey-and-thyme-300: #c9d06f;
  --color-honey-and-thyme-400: #acb230;
  --color-honey-and-thyme-500: #8f9400;
  --color-honey-and-thyme-600: #737700;
  --color-honey-and-thyme-700: #5b5e00;
  --color-honey-and-thyme-800: #464900;
  --color-honey-and-thyme-900: #353700;
  --color-honey-and-thyme-950: #202100;
  --color-dark-cyan: #00888d;
  --color-dark-cyan-50: #d8feff;
  --color-dark-cyan-100: #c0fafc;
  --color-dark-cyan-200: #a5eaed;
  --color-dark-cyan-300: #86d7db;
  --color-dark-cyan-400: #5bbbc0;
  --color-dark-cyan-500: #35a2a6;
  --color-dark-cyan-600: #00888d;
  --color-dark-cyan-700: #006c70;
  --color-dark-cyan-800: #005458;
  --color-dark-cyan-900: #004143;
  --color-dark-cyan-950: #00282a;
  --color-red-elegance: #834651;
  --color-red-elegance-50: #fff1f3;
  --color-red-elegance-100: #ffe3e7;
  --color-red-elegance-200: #fec9d0;
  --color-red-elegance-300: #edb1b9;
  --color-red-elegance-400: #d1909a;
  --color-red-elegance-500: #b7757f;
  --color-red-elegance-600: #9b5c66;
  --color-red-elegance-700: #834651;
  --color-red-elegance-800: #68353f;
  --color-red-elegance-900: #52272f;
  --color-red-elegance-950: #36171d;
  --color-midnight-velvet: #281f44;
  --color-midnight-velvet-50: #f5f3ff;
  --color-midnight-velvet-100: #ebe8ff;
  --color-midnight-velvet-200: #d8d2f6;
  --color-midnight-velvet-300: #c1bbe3;
  --color-midnight-velvet-400: #a29bc7;
  --color-midnight-velvet-500: #8880ad;
  --color-midnight-velvet-600: #706892;
  --color-midnight-velvet-700: #5a537a;
  --color-midnight-velvet-800: #494265;
  --color-midnight-velvet-900: #3a3452;
  --color-midnight-velvet-950: #281f44;
}