Start generating

Do Not Disturb to Butterfly Kisses color palette

313F42Do Not Disturb5A777BNorth Atlantic9C827COpiumCDAAA1ParfaitF2DDDAButterfly Kisses
Open in generator Export PNG, PDF, ASE…

About this palette

Do Not Disturb to Butterfly Kisses is a 5-color muted, gradient palette: #313F42 (Do Not Disturb), #5A777B (North Atlantic), #9C827C (Opium), #CDAAA1 (Parfait), #F2DDDA (Butterfly Kisses). It mixes gray, red tones and feels warm overall. The strongest text pairing is #313F42 on #F2DDDA with a contrast ratio of 8.40:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Do Not Disturbrgb(49, 63, 66)hsl(191, 15%, 23%)
North Atlanticrgb(90, 119, 123)hsl(187, 15%, 42%)
Opiumrgb(156, 130, 124)hsl(11, 14%, 55%)
Parfaitrgb(205, 170, 161)hsl(12, 31%, 72%)
Butterfly Kissesrgb(242, 221, 218)hsl(8, 48%, 90%)

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.40:1 Very good#313F42 on #F2DDDA
  • Aa8.40:1 Very good#F2DDDA on #313F42
  • Aa5.13:1 Good#313F42 on #CDAAA1
  • Aa5.13:1 Good#CDAAA1 on #313F42
  • Aa3.70:1 Poor#5A777B on #F2DDDA
  • Aa3.70:1 Poor#F2DDDA on #5A777B
  • Aa3.07:1 Poor#313F42 on #9C827C
  • Aa3.07:1 Poor#9C827C on #313F42

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Do Not Disturb to Butterfly Kisses — https://swatchly.xyz/palette/313f42-5a777b-9c827c-cdaaa1-f2ddda */
:root {
  --do-not-disturb: #313f42;
  --north-atlantic: #5a777b;
  --opium: #9c827c;
  --parfait: #cdaaa1;
  --butterfly-kisses: #f2ddda;
}

Tailwind CSS v4

/* Do Not Disturb to Butterfly Kisses — https://swatchly.xyz/palette/313f42-5a777b-9c827c-cdaaa1-f2ddda */
@theme {
  --color-do-not-disturb: #313f42;
  --color-do-not-disturb-50: #eef7f9;
  --color-do-not-disturb-100: #e3edf0;
  --color-do-not-disturb-200: #cedadd;
  --color-do-not-disturb-300: #b4c3c6;
  --color-do-not-disturb-400: #93a2a6;
  --color-do-not-disturb-500: #768689;
  --color-do-not-disturb-600: #5c6a6e;
  --color-do-not-disturb-700: #455355;
  --color-do-not-disturb-800: #313f42;
  --color-do-not-disturb-900: #263032;
  --color-do-not-disturb-950: #161d1e;
  --color-north-atlantic: #5a777b;
  --color-north-atlantic-50: #e8f9fb;
  --color-north-atlantic-100: #ddf0f3;
  --color-north-atlantic-200: #c8dee2;
  --color-north-atlantic-300: #afc9cd;
  --color-north-atlantic-400: #8fabaf;
  --color-north-atlantic-500: #739195;
  --color-north-atlantic-600: #5a777b;
  --color-north-atlantic-700: #445f62;
  --color-north-atlantic-800: #334a4d;
  --color-north-atlantic-900: #25393c;
  --color-north-atlantic-950: #152325;
  --color-opium: #9c827c;
  --color-opium-50: #fff2f0;
  --color-opium-100: #fae8e3;
  --color-opium-200: #e9d4cf;
  --color-opium-300: #d4bdb7;
  --color-opium-400: #b79d97;
  --color-opium-500: #9c827c;
  --color-opium-600: #806762;
  --color-opium-700: #67514c;
  --color-opium-800: #523e3a;
  --color-opium-900: #3f2f2b;
  --color-opium-950: #281c1a;
  --color-parfait: #cdaaa1;
  --color-parfait-50: #ffe8e2;
  --color-parfait-100: #f4dbd5;
  --color-parfait-200: #e1c4bd;
  --color-parfait-300: #cdaaa1;
  --color-parfait-400: #af8e85;
  --color-parfait-500: #95756c;
  --color-parfait-600: #7c5d56;
  --color-parfait-700: #654a43;
  --color-parfait-800: #523a34;
  --color-parfait-900: #422d28;
  --color-parfait-950: #2a1b17;
  --color-butterfly-kisses: #f2ddda;
  --color-butterfly-kisses-50: #f7eae9;
  --color-butterfly-kisses-100: #f2ddda;
  --color-butterfly-kisses-200: #dcccca;
  --color-butterfly-kisses-300: #c8b7b4;
  --color-butterfly-kisses-400: #ab9896;
  --color-butterfly-kisses-500: #917e7c;
  --color-butterfly-kisses-600: #786663;
  --color-butterfly-kisses-700: #61514f;
  --color-butterfly-kisses-800: #4c3f3d;
  --color-butterfly-kisses-900: #3b302e;
  --color-butterfly-kisses-950: #251d1c;
}

Similar palettes