Slightly in Love to What We Do in the Shadows color palette

About this palette

Slightly in Love to What We Do in the Shadows is a 5-color cool palette: #FFE6D9 (Slightly in Love), #84C2E0 (Dolphin), #1AA38A (Herbal), #006E58 (Into the Green), #451327 (What We Do in the Shadows). It mixes white, blue, turquoise, red tones and feels cool overall. The strongest text pairing is #FFE6D9 on #451327 with a contrast ratio of 12.78:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Slightly in Lovergb(255, 230, 217)hsl(21, 100%, 93%)
Dolphinrgb(132, 194, 224)hsl(200, 60%, 70%)
Herbalrgb(26, 163, 138)hsl(169, 72%, 37%)
Into the Greenrgb(0, 110, 88)hsl(168, 100%, 22%)
What We Do in the Shadowsrgb(69, 19, 39)hsl(336, 57%, 17%)

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.

  • Aa12.78:1 Super#FFE6D9 on #451327
  • Aa12.78:1 Super#451327 on #FFE6D9
  • Aa7.83:1 Very good#84C2E0 on #451327
  • Aa7.83:1 Very good#451327 on #84C2E0
  • Aa5.21:1 Good#FFE6D9 on #006E58
  • Aa5.21:1 Good#006E58 on #FFE6D9
  • Aa4.83:1 Good#1AA38A on #451327
  • Aa4.83:1 Good#451327 on #1AA38A

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Slightly in Love to What We Do in the Shadows — https://swatchly.xyz/palette/ffe6d9-84c2e0-1aa38a-006e58-451327 */
:root {
  --slightly-in-love: #ffe6d9;
  --dolphin: #84c2e0;
  --herbal: #1aa38a;
  --into-the-green: #006e58;
  --what-we-do-in-the-shadows: #451327;
}

Tailwind CSS v4

/* Slightly in Love to What We Do in the Shadows — https://swatchly.xyz/palette/ffe6d9-84c2e0-1aa38a-006e58-451327 */
@theme {
  --color-slightly-in-love: #ffe6d9;
  --color-slightly-in-love-50: #fff3ed;
  --color-slightly-in-love-100: #ffe6d9;
  --color-slightly-in-love-200: #e6d4ca;
  --color-slightly-in-love-300: #d1bdb2;
  --color-slightly-in-love-400: #b39d91;
  --color-slightly-in-love-500: #978175;
  --color-slightly-in-love-600: #7c675c;
  --color-slightly-in-love-700: #645147;
  --color-slightly-in-love-800: #4f3e36;
  --color-slightly-in-love-900: #3d2f28;
  --color-slightly-in-love-950: #271d17;
  --color-dolphin: #84c2e0;
  --color-dolphin-50: #e0f4ff;
  --color-dolphin-100: #c6ecff;
  --color-dolphin-200: #a8d8f0;
  --color-dolphin-300: #84c2e0;
  --color-dolphin-400: #68a4c0;
  --color-dolphin-500: #4c89a6;
  --color-dolphin-600: #34708b;
  --color-dolphin-700: #225a72;
  --color-dolphin-800: #14475c;
  --color-dolphin-900: #0b384a;
  --color-dolphin-950: #032330;
  --color-herbal: #1aa38a;
  --color-herbal-50: #defff5;
  --color-herbal-100: #bdfdec;
  --color-herbal-200: #9feed9;
  --color-herbal-300: #7ddac3;
  --color-herbal-400: #4dbda4;
  --color-herbal-500: #1aa38a;
  --color-herbal-600: #00846f;
  --color-herbal-700: #006957;
  --color-herbal-800: #005244;
  --color-herbal-900: #003f33;
  --color-herbal-950: #00271f;
  --color-into-the-green: #006e58;
  --color-into-the-green-50: #dafff2;
  --color-into-the-green-100: #c5f8e7;
  --color-into-the-green-200: #abe8d4;
  --color-into-the-green-300: #8fd5bf;
  --color-into-the-green-400: #67b8a0;
  --color-into-the-green-500: #479e86;
  --color-into-the-green-600: #2a846d;
  --color-into-the-green-700: #006e58;
  --color-into-the-green-800: #005644;
  --color-into-the-green-900: #004334;
  --color-into-the-green-950: #002a20;
  --color-what-we-do-in-the-shadows: #451327;
  --color-what-we-do-in-the-shadows-50: #fff1f5;
  --color-what-we-do-in-the-shadows-100: #ffe3eb;
  --color-what-we-do-in-the-shadows-200: #fac8d6;
  --color-what-we-do-in-the-shadows-300: #e7afc0;
  --color-what-we-do-in-the-shadows-400: #ca8ea0;
  --color-what-we-do-in-the-shadows-500: #b07487;
  --color-what-we-do-in-the-shadows-600: #955b6e;
  --color-what-we-do-in-the-shadows-700: #7c4859;
  --color-what-we-do-in-the-shadows-800: #673848;
  --color-what-we-do-in-the-shadows-900: #552c3a;
  --color-what-we-do-in-the-shadows-950: #451327;
}

Similar palettes