Start generating

Negroni to Black Stallion color palette

EEC5AANegroni63AFD3Milky WavesA58268Mulled Cider6F4E34Coffee0D3E58Maniac Mansion121C23Black Stallion
Open in generator Export PNG, PDF, ASE…

About this palette

Negroni to Black Stallion is a 6-color muted, vintage palette: #EEC5AA (Negroni), #63AFD3 (Milky Waves), #A58268 (Mulled Cider), #6F4E34 (Coffee), #0D3E58 (Maniac Mansion), #121C23 (Black Stallion). It mixes orange, blue, brown, gray tones and feels warm overall. The strongest text pairing is #EEC5AA on #121C23 with a contrast ratio of 10.86:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Negronirgb(238, 197, 170)hsl(24, 67%, 80%)
Milky Wavesrgb(99, 175, 211)hsl(199, 56%, 61%)
Mulled Ciderrgb(165, 130, 104)hsl(26, 25%, 53%)
Coffeergb(111, 78, 52)hsl(26, 36%, 32%)
Maniac Mansionrgb(13, 62, 88)hsl(201, 74%, 20%)
Black Stallionrgb(18, 28, 35)hsl(205, 32%, 10%)

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.

  • Aa10.86:1 Very good#EEC5AA on #121C23
  • Aa10.86:1 Very good#121C23 on #EEC5AA
  • Aa7.15:1 Very good#EEC5AA on #0D3E58
  • Aa7.15:1 Very good#0D3E58 on #EEC5AA
  • Aa7.07:1 Very good#63AFD3 on #121C23
  • Aa7.07:1 Very good#121C23 on #63AFD3
  • Aa4.93:1 Good#A58268 on #121C23
  • Aa4.93:1 Good#121C23 on #A58268

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Negroni to Black Stallion — https://swatchly.xyz/palette/eec5aa-63afd3-a58268-6f4e34-0d3e58-121c23 */
:root {
  --negroni: #eec5aa;
  --milky-waves: #63afd3;
  --mulled-cider: #a58268;
  --coffee: #6f4e34;
  --maniac-mansion: #0d3e58;
  --black-stallion: #121c23;
}

Tailwind CSS v4

/* Negroni to Black Stallion — https://swatchly.xyz/palette/eec5aa-63afd3-a58268-6f4e34-0d3e58-121c23 */
@theme {
  --color-negroni: #eec5aa;
  --color-negroni-50: #ffebdd;
  --color-negroni-100: #f9ddcb;
  --color-negroni-200: #eec5aa;
  --color-negroni-300: #d5b19a;
  --color-negroni-400: #b9937a;
  --color-negroni-500: #9e7960;
  --color-negroni-600: #846049;
  --color-negroni-700: #6c4c36;
  --color-negroni-800: #573b28;
  --color-negroni-900: #442d1c;
  --color-negroni-950: #2c1b0f;
  --color-milky-waves: #63afd3;
  --color-milky-waves-50: #ecf8ff;
  --color-milky-waves-100: #d7f1ff;
  --color-milky-waves-200: #ace2fe;
  --color-milky-waves-300: #8ecdec;
  --color-milky-waves-400: #63afd3;
  --color-milky-waves-500: #4692b5;
  --color-milky-waves-600: #287798;
  --color-milky-waves-700: #105f7d;
  --color-milky-waves-800: #004a64;
  --color-milky-waves-900: #00394e;
  --color-milky-waves-950: #002332;
  --color-mulled-cider: #a58268;
  --color-mulled-cider-50: #fff3eb;
  --color-mulled-cider-100: #ffe8d7;
  --color-mulled-cider-200: #f0d4bf;
  --color-mulled-cider-300: #dcbda6;
  --color-mulled-cider-400: #c09d84;
  --color-mulled-cider-500: #a58268;
  --color-mulled-cider-600: #88674e;
  --color-mulled-cider-700: #6e503a;
  --color-mulled-cider-800: #583e2a;
  --color-mulled-cider-900: #452e1d;
  --color-mulled-cider-950: #2c1c10;
  --color-coffee: #6f4e34;
  --color-coffee-50: #fff3e9;
  --color-coffee-100: #ffe6d4;
  --color-coffee-200: #efd1bc;
  --color-coffee-300: #dbbaa1;
  --color-coffee-400: #be9a7f;
  --color-coffee-500: #a27e63;
  --color-coffee-600: #86644a;
  --color-coffee-700: #6f4e34;
  --color-coffee-800: #573c27;
  --color-coffee-900: #442e1c;
  --color-coffee-950: #2c1c0f;
  --color-maniac-mansion: #0d3e58;
  --color-maniac-mansion-50: #ebf7ff;
  --color-maniac-mansion-100: #d8efff;
  --color-maniac-mansion-200: #b9ddf5;
  --color-maniac-mansion-300: #9ec7e2;
  --color-maniac-mansion-400: #7ca9c7;
  --color-maniac-mansion-500: #618fad;
  --color-maniac-mansion-600: #487592;
  --color-maniac-mansion-700: #355f79;
  --color-maniac-mansion-800: #264d64;
  --color-maniac-mansion-900: #0d3e58;
  --color-maniac-mansion-950: #0e2736;
  --color-black-stallion: #121c23;
  --color-black-stallion-50: #eff6fc;
  --color-black-stallion-100: #e4ecf3;
  --color-black-stallion-200: #cfd9e0;
  --color-black-stallion-300: #b7c3cb;
  --color-black-stallion-400: #97a3ac;
  --color-black-stallion-500: #7b8790;
  --color-black-stallion-600: #606c74;
  --color-black-stallion-700: #4a545c;
  --color-black-stallion-800: #374047;
  --color-black-stallion-900: #283035;
  --color-black-stallion-950: #121c23;
}

Similar palettes