Dusty Chimney to Pleasing Pink color palette

About this palette

Dusty Chimney to Pleasing Pink is a 4-color muted palette: #848EA5 (Dusty Chimney), #2A5C58 (Lacrosse), #1F190B (Noir Mystique), #F1CDD5 (Pleasing Pink). It mixes blue, turquoise, black, pink tones and feels cool overall. The strongest text pairing is #1F190B on #F1CDD5 with a contrast ratio of 12.01:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Dusty Chimneyrgb(132, 142, 165)hsl(222, 15%, 58%)
Lacrossergb(42, 92, 88)hsl(175, 37%, 26%)
Noir Mystiquergb(31, 25, 11)hsl(42, 48%, 8%)
Pleasing Pinkrgb(241, 205, 213)hsl(347, 56%, 87%)

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.01:1 Super#1F190B on #F1CDD5
  • Aa12.01:1 Super#F1CDD5 on #1F190B
  • Aa5.32:1 Good#848EA5 on #1F190B
  • Aa5.32:1 Good#1F190B on #848EA5
  • Aa5.21:1 Good#2A5C58 on #F1CDD5
  • Aa5.21:1 Good#F1CDD5 on #2A5C58

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Dusty Chimney to Pleasing Pink — https://swatchly.xyz/palette/848ea5-2a5c58-1f190b-f1cdd5 */
:root {
  --dusty-chimney: #848ea5;
  --lacrosse: #2a5c58;
  --noir-mystique: #1f190b;
  --pleasing-pink: #f1cdd5;
}

Tailwind CSS v4

/* Dusty Chimney to Pleasing Pink — https://swatchly.xyz/palette/848ea5-2a5c58-1f190b-f1cdd5 */
@theme {
  --color-dusty-chimney: #848ea5;
  --color-dusty-chimney-50: #f3f7ff;
  --color-dusty-chimney-100: #e7eefd;
  --color-dusty-chimney-200: #d4dcee;
  --color-dusty-chimney-300: #bec7db;
  --color-dusty-chimney-400: #9fa8bf;
  --color-dusty-chimney-500: #848ea5;
  --color-dusty-chimney-600: #697288;
  --color-dusty-chimney-700: #515a6e;
  --color-dusty-chimney-800: #3e4657;
  --color-dusty-chimney-900: #2f3544;
  --color-dusty-chimney-950: #1c202b;
  --color-lacrosse: #2a5c58;
  --color-lacrosse-50: #e0fcf9;
  --color-lacrosse-100: #d3f3ef;
  --color-lacrosse-200: #bae0dc;
  --color-lacrosse-300: #9ecac5;
  --color-lacrosse-400: #7aaba6;
  --color-lacrosse-500: #5d8f8a;
  --color-lacrosse-600: #43736f;
  --color-lacrosse-700: #2a5c58;
  --color-lacrosse-800: #204844;
  --color-lacrosse-900: #163735;
  --color-lacrosse-950: #0a2321;
  --color-noir-mystique: #1f190b;
  --color-noir-mystique-50: #f9f5ea;
  --color-noir-mystique-100: #f0ebdf;
  --color-noir-mystique-200: #ddd7c9;
  --color-noir-mystique-300: #c7c0b1;
  --color-noir-mystique-400: #a8a190;
  --color-noir-mystique-500: #8c8473;
  --color-noir-mystique-600: #706959;
  --color-noir-mystique-700: #585143;
  --color-noir-mystique-800: #433e31;
  --color-noir-mystique-900: #322d23;
  --color-noir-mystique-950: #1f190b;
  --color-pleasing-pink: #f1cdd5;
  --color-pleasing-pink-50: #fff1f4;
  --color-pleasing-pink-100: #fce5ea;
  --color-pleasing-pink-200: #f1cdd5;
  --color-pleasing-pink-300: #d6b8bf;
  --color-pleasing-pink-400: #b8989f;
  --color-pleasing-pink-500: #9d7c84;
  --color-pleasing-pink-600: #816269;
  --color-pleasing-pink-700: #684d53;
  --color-pleasing-pink-800: #533b40;
  --color-pleasing-pink-900: #412c31;
  --color-pleasing-pink-950: #291b1e;
}

Similar palettes