Start generating

Merguez to Glossy Black color palette

57002AMerguez6D584FAfternoon Coffee300F00Shadow Play7A3700Hazelnut Chocolate190017Glossy Black
Open in generator Export PNG, PDF, ASE…

About this palette

Merguez to Glossy Black is a 5-color dark, warm palette: #57002A (Merguez), #6D584F (Afternoon Coffee), #300F00 (Shadow Play), #7A3700 (Hazelnut Chocolate), #190017 (Glossy Black). It mixes red, gray, brown, purple tones and feels warm overall. The strongest text pairing is #6D584F on #190017 with a contrast ratio of 3.00:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Merguezrgb(87, 0, 42)hsl(331, 100%, 17%)
Afternoon Coffeergb(109, 88, 79)hsl(18, 16%, 37%)
Shadow Playrgb(48, 15, 0)hsl(19, 100%, 9%)
Hazelnut Chocolatergb(122, 55, 0)hsl(27, 100%, 24%)
Glossy Blackrgb(25, 0, 23)hsl(305, 100%, 5%)

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.

    Color blindness preview

    • Protanopia
    • Deuteranopia
    • Tritanopia
    • Achromatopsia
    • Dog vision

    CSS variables

    /* Merguez to Glossy Black — https://swatchly.xyz/palette/57002a-6d584f-300f00-7a3700-190017 */
:root {
  --merguez: #57002a;
  --afternoon-coffee: #6d584f;
  --shadow-play: #300f00;
  --hazelnut-chocolate: #7a3700;
  --glossy-black: #190017;
}

    Tailwind CSS v4

    /* Merguez to Glossy Black — https://swatchly.xyz/palette/57002a-6d584f-300f00-7a3700-190017 */
@theme {
  --color-merguez: #57002a;
  --color-merguez-50: #fff1f4;
  --color-merguez-100: #ffe3ea;
  --color-merguez-200: #ffc5d5;
  --color-merguez-300: #f8a5be;
  --color-merguez-400: #db819d;
  --color-merguez-500: #bd6380;
  --color-merguez-600: #9d4865;
  --color-merguez-700: #7f334e;
  --color-merguez-800: #64233b;
  --color-merguez-900: #57002a;
  --color-merguez-950: #300b19;
  --color-afternoon-coffee: #6d584f;
  --color-afternoon-coffee-50: #fff2ed;
  --color-afternoon-coffee-100: #f7e7e1;
  --color-afternoon-coffee-200: #e7d5cd;
  --color-afternoon-coffee-300: #d4bfb6;
  --color-afternoon-coffee-400: #b7a197;
  --color-afternoon-coffee-500: #9d867d;
  --color-afternoon-coffee-600: #836d64;
  --color-afternoon-coffee-700: #6d584f;
  --color-afternoon-coffee-800: #56443d;
  --color-afternoon-coffee-900: #43342e;
  --color-afternoon-coffee-950: #2b201b;
  --color-shadow-play: #300f00;
  --color-shadow-play-50: #fff2ec;
  --color-shadow-play-100: #ffe5d9;
  --color-shadow-play-200: #f2cfbf;
  --color-shadow-play-300: #deb7a5;
  --color-shadow-play-400: #c19783;
  --color-shadow-play-500: #a47a66;
  --color-shadow-play-600: #875f4c;
  --color-shadow-play-700: #6c4938;
  --color-shadow-play-800: #553628;
  --color-shadow-play-900: #40281b;
  --color-shadow-play-950: #300f00;
  --color-hazelnut-chocolate: #7a3700;
  --color-hazelnut-chocolate-50: #fff2eb;
  --color-hazelnut-chocolate-100: #ffe5d7;
  --color-hazelnut-chocolate-200: #ffc8aa;
  --color-hazelnut-chocolate-300: #f0ac85;
  --color-hazelnut-chocolate-400: #d2895e;
  --color-hazelnut-chocolate-500: #b46b3f;
  --color-hazelnut-chocolate-600: #945025;
  --color-hazelnut-chocolate-700: #7a3700;
  --color-hazelnut-chocolate-800: #5f2b05;
  --color-hazelnut-chocolate-900: #4b2001;
  --color-hazelnut-chocolate-950: #301200;
  --color-glossy-black: #190017;
  --color-glossy-black-50: #fff0fc;
  --color-glossy-black-100: #fce2f8;
  --color-glossy-black-200: #eccce7;
  --color-glossy-black-300: #d8b4d2;
  --color-glossy-black-400: #ba93b4;
  --color-glossy-black-500: #9a7394;
  --color-glossy-black-600: #795574;
  --color-glossy-black-700: #5b3d57;
  --color-glossy-black-800: #41293e;
  --color-glossy-black-900: #2b1928;
  --color-glossy-black-950: #190017;
}

    Similar palettes