Satin Deep Black to Morrel Color Palette

About this palette

Satin Deep Black to Morrel is a 4-color muted palette: #1A1E23 (Satin Deep Black), #5B4B56 (Magnet), #CDE3DB (Ice Dagger), #AD9072 (Morrel). It mixes gray, orange tones and feels warm overall. The strongest text pairing is #1A1E23 on #CDE3DB with a contrast ratio of 12.45:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Satin Deep Black	rgb(26, 30, 35)	hsl(213, 15%, 12%)
Magnet	rgb(91, 75, 86)	hsl(319, 10%, 33%)
Ice Dagger	rgb(205, 227, 219)	hsl(158, 28%, 85%)
Morrel	rgb(173, 144, 114)	hsl(31, 26%, 56%)

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.45:1 Super#1A1E23 on #CDE3DB
Aa12.45:1 Super#CDE3DB on #1A1E23
Aa6.04:1 Good#5B4B56 on #CDE3DB
Aa6.04:1 Good#CDE3DB on #5B4B56
Aa5.59:1 Good#1A1E23 on #AD9072
Aa5.59:1 Good#AD9072 on #1A1E23

Color blindness preview

CSS variables

/* Satin Deep Black to Morrel — https://swatchly.xyz/palette/1a1e23-5b4b56-cde3db-ad9072 */
:root {
  --satin-deep-black: #1a1e23;
  --magnet: #5b4b56;
  --ice-dagger: #cde3db;
  --morrel: #ad9072;
}

Tailwind CSS v4

/* Satin Deep Black to Morrel — https://swatchly.xyz/palette/1a1e23-5b4b56-cde3db-ad9072 */
@theme {
  --color-satin-deep-black: #1a1e23;
  --color-satin-deep-black-50: #f2f5f9;
  --color-satin-deep-black-100: #e8ebf0;
  --color-satin-deep-black-200: #d4d8dd;
  --color-satin-deep-black-300: #bdc1c7;
  --color-satin-deep-black-400: #9da2a8;
  --color-satin-deep-black-500: #81868d;
  --color-satin-deep-black-600: #676c72;
  --color-satin-deep-black-700: #50555a;
  --color-satin-deep-black-800: #3e4146;
  --color-satin-deep-black-900: #2f3236;
  --color-satin-deep-black-950: #1a1e23;
  --color-magnet: #5b4b56;
  --color-magnet-50: #fcf1f9;
  --color-magnet-100: #f3e7ef;
  --color-magnet-200: #e0d2db;
  --color-magnet-300: #cabac5;
  --color-magnet-400: #aa99a5;
  --color-magnet-500: #8e7d89;
  --color-magnet-600: #72626d;
  --color-magnet-700: #5b4b56;
  --color-magnet-800: #473a43;
  --color-magnet-900: #372c34;
  --color-magnet-950: #221b20;
  --color-ice-dagger: #cde3db;
  --color-ice-dagger-50: #f1fcf8;
  --color-ice-dagger-100: #e6f3ef;
  --color-ice-dagger-200: #cde3db;
  --color-ice-dagger-300: #b8cac4;
  --color-ice-dagger-400: #96aaa3;
  --color-ice-dagger-500: #7a8e87;
  --color-ice-dagger-600: #5f726c;
  --color-ice-dagger-700: #495b54;
  --color-ice-dagger-800: #374641;
  --color-ice-dagger-900: #293632;
  --color-ice-dagger-950: #18221e;
  --color-morrel: #ad9072;
  --color-morrel-50: #ffeedc;
  --color-morrel-100: #f6e1cc;
  --color-morrel-200: #e3cbb2;
  --color-morrel-300: #cdb296;
  --color-morrel-400: #ad9072;
  --color-morrel-500: #93775a;
  --color-morrel-600: #795f43;
  --color-morrel-700: #624b32;
  --color-morrel-800: #4f3b25;
  --color-morrel-900: #3f2d1a;
  --color-morrel-950: #291c0e;
}