What We Do in the Shadows to We Peep color palette
480C1BWhat We Do in the Shadows970A41Aristocratic VelvetA35B6BCinnapinkAE4F57Cherry on TopE88D9BPick Your BrainFFD4D8We Peep
About this palette
What We Do in the Shadows to We Peep is a 6-color warm, monochromatic palette: #480C1B (What We Do in the Shadows), #970A41 (Aristocratic Velvet), #A35B6B (Cinnapink), #AE4F57 (Cherry on Top), #E88D9B (Pick Your Brain), #FFD4D8 (We Peep). It mixes brown, red, pink tones and feels warm overall. The strongest text pairing is #480C1B on #FFD4D8 with a contrast ratio of 11.65:1, and 3 of its 15 color pairs pass WCAG AA for normal text.
Color codes
| Color | HEX | RGB | HSL |
|---|---|---|---|
| What We Do in the Shadows | rgb(72, 12, 27) | hsl(345, 71%, 16%) | |
| Aristocratic Velvet | rgb(151, 10, 65) | hsl(337, 88%, 32%) | |
| Cinnapink | rgb(163, 91, 107) | hsl(347, 28%, 50%) | |
| Cherry on Top | rgb(174, 79, 87) | hsl(355, 38%, 50%) | |
| Pick Your Brain | rgb(232, 141, 155) | hsl(351, 66%, 73%) | |
| We Peep | rgb(255, 212, 216) | hsl(354, 100%, 92%) |
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.65:1 #480C1B on #FFD4D8
- Aa11.65:1 #FFD4D8 on #480C1B
- Aa6.48:1 #480C1B on #E88D9B
- Aa6.48:1 #E88D9B on #480C1B
- Aa6.43:1 #970A41 on #FFD4D8
- Aa6.43:1 #FFD4D8 on #970A41
- Aa3.86:1 #AE4F57 on #FFD4D8
- Aa3.86:1 #FFD4D8 on #AE4F57
Color blindness preview
- Protanopia
- Deuteranopia
- Tritanopia
- Achromatopsia
- Dog vision
CSS variables
/* What We Do in the Shadows to We Peep — https://swatchly.xyz/palette/480c1b-970a41-a35b6b-ae4f57-e88d9b-ffd4d8 */
:root {
--what-we-do-in-the-shadows: #480c1b;
--aristocratic-velvet: #970a41;
--cinnapink: #a35b6b;
--cherry-on-top: #ae4f57;
--pick-your-brain: #e88d9b;
--we-peep: #ffd4d8;
}
Tailwind CSS v4
/* What We Do in the Shadows to We Peep — https://swatchly.xyz/palette/480c1b-970a41-a35b6b-ae4f57-e88d9b-ffd4d8 */
@theme {
--color-what-we-do-in-the-shadows: #480c1b;
--color-what-we-do-in-the-shadows-50: #fff1f2;
--color-what-we-do-in-the-shadows-100: #ffe3e6;
--color-what-we-do-in-the-shadows-200: #ffc7cd;
--color-what-we-do-in-the-shadows-300: #eeadb4;
--color-what-we-do-in-the-shadows-400: #d18b94;
--color-what-we-do-in-the-shadows-500: #b7717a;
--color-what-we-do-in-the-shadows-600: #9b5862;
--color-what-we-do-in-the-shadows-700: #81444d;
--color-what-we-do-in-the-shadows-800: #6b343d;
--color-what-we-do-in-the-shadows-900: #572830;
--color-what-we-do-in-the-shadows-950: #480c1b;
--color-aristocratic-velvet: #970a41;
--color-aristocratic-velvet-50: #fff1f3;
--color-aristocratic-velvet-100: #ffe3e7;
--color-aristocratic-velvet-200: #ffc5cf;
--color-aristocratic-velvet-300: #ffa0b2;
--color-aristocratic-velvet-400: #f16e8d;
--color-aristocratic-velvet-500: #d34e71;
--color-aristocratic-velvet-600: #b23158;
--color-aristocratic-velvet-700: #970a41;
--color-aristocratic-velvet-800: #770a32;
--color-aristocratic-velvet-900: #5f0225;
--color-aristocratic-velvet-950: #3e0016;
--color-cinnapink: #a35b6b;
--color-cinnapink-50: #fff1f3;
--color-cinnapink-100: #ffe5ea;
--color-cinnapink-200: #ffcbd4;
--color-cinnapink-300: #f3b0bd;
--color-cinnapink-400: #d9909e;
--color-cinnapink-500: #bf7484;
--color-cinnapink-600: #a35b6b;
--color-cinnapink-700: #864454;
--color-cinnapink-800: #6c3240;
--color-cinnapink-900: #552430;
--color-cinnapink-950: #37141d;
--color-cherry-on-top: #ae4f57;
--color-cherry-on-top-50: #fff1f1;
--color-cherry-on-top-100: #ffe5e5;
--color-cherry-on-top-200: #ffcacc;
--color-cherry-on-top-300: #ffa9ad;
--color-cherry-on-top-400: #e6868b;
--color-cherry-on-top-500: #cb6970;
--color-cherry-on-top-600: #ae4f57;
--color-cherry-on-top-700: #903942;
--color-cherry-on-top-800: #742831;
--color-cherry-on-top-900: #5c1c23;
--color-cherry-on-top-950: #3d0e14;
--color-pick-your-brain: #e88d9b;
--color-pick-your-brain-50: #fff6f7;
--color-pick-your-brain-100: #ffebed;
--color-pick-your-brain-200: #ffd1d6;
--color-pick-your-brain-300: #feb1bc;
--color-pick-your-brain-400: #e88d9b;
--color-pick-your-brain-500: #c7707e;
--color-pick-your-brain-600: #a85463;
--color-pick-your-brain-700: #8a3d4c;
--color-pick-your-brain-800: #6e2c39;
--color-pick-your-brain-900: #561e2a;
--color-pick-your-brain-950: #371018;
--color-we-peep: #ffd4d8;
--color-we-peep-50: #fffafa;
--color-we-peep-100: #ffeeef;
--color-we-peep-200: #ffd4d8;
--color-we-peep-300: #e1bec1;
--color-we-peep-400: #c29ca0;
--color-we-peep-500: #a57f83;
--color-we-peep-600: #886367;
--color-we-peep-700: #6d4c50;
--color-we-peep-800: #56393d;
--color-we-peep-900: #432b2e;
--color-we-peep-950: #2b1a1c;
}
Similar palettes
- 2E1B20FFCDD9D99EB6843850AB5777Black Cherry to Extravagant Blush
- BA3B4BFFC3CBE1868E711D3247111CF88498Dragon’s Blood to Xoxo
- FFE2E1E797B9AB606372351F3A192EDawn Patrol to Nightly Voyager
- 583141421A28BC8290E6A1BFA0596EF1C9D9Shadow Purple to Smidgen of Love
- 362336702E45E2A0A5C570C4FFD0C8B15B4AMelanzane to Dried Tomatoes
- FFD8DF451F2EC891A0B3687F702E41It’s a Girl! to Red Octopus
- FFD1DDE896ABAD6C776C31462C1C1FLight Pink to Velvet Black
- 311A1DFFC3C0763B3DCF8E95A16663Black Cherry to Cinnapink