Mature Cognac to Silent Snowfall color palette

974A44Mature Cognac C5AE8BKhaki 003549Nordic Noir C46A70Watermelon Gelato EBF9FFSilent Snowfall

About this palette

Mature Cognac to Silent Snowfall is a 5-color warm, vintage palette: #974A44 (Mature Cognac), #C5AE8B (Khaki), #003549 (Nordic Noir), #C46A70 (Watermelon Gelato), #EBF9FF (Silent Snowfall). It mixes red, yellow, blue, white tones and feels warm overall. The strongest text pairing is #003549 on #EBF9FF with a contrast ratio of 12.16:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mature Cognac	rgb(151, 74, 68)	hsl(4, 38%, 43%)
Khaki	rgb(197, 174, 139)	hsl(36, 33%, 66%)
Nordic Noir	rgb(0, 53, 73)	hsl(196, 100%, 14%)
Watermelon Gelato	rgb(196, 106, 112)	hsl(356, 43%, 59%)
Silent Snowfall	rgb(235, 249, 255)	hsl(198, 100%, 96%)

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.16:1 Super#003549 on #EBF9FF
Aa12.16:1 Super#EBF9FF on #003549
Aa6.11:1 Good#C5AE8B on #003549
Aa6.11:1 Good#003549 on #C5AE8B
Aa5.78:1 Good#974A44 on #EBF9FF
Aa5.78:1 Good#EBF9FF on #974A44
Aa3.51:1 Poor#003549 on #C46A70
Aa3.51:1 Poor#C46A70 on #003549

Color blindness preview

CSS variables

/* Mature Cognac to Silent Snowfall — https://swatchly.xyz/palette/974a44-c5ae8b-003549-c46a70-ebf9ff */
:root {
  --mature-cognac: #974a44;
  --khaki: #c5ae8b;
  --nordic-noir: #003549;
  --watermelon-gelato: #c46a70;
  --silent-snowfall: #ebf9ff;
}

Tailwind CSS v4

/* Mature Cognac to Silent Snowfall — https://swatchly.xyz/palette/974a44-c5ae8b-003549-c46a70-ebf9ff */
@theme {
  --color-mature-cognac: #974a44;
  --color-mature-cognac-50: #fff2f0;
  --color-mature-cognac-100: #ffe2df;
  --color-mature-cognac-200: #ffc4bd;
  --color-mature-cognac-300: #f2a69e;
  --color-mature-cognac-400: #d4837b;
  --color-mature-cognac-500: #b6665e;
  --color-mature-cognac-600: #974a44;
  --color-mature-cognac-700: #7b3833;
  --color-mature-cognac-800: #632925;
  --color-mature-cognac-900: #4f1e1b;
  --color-mature-cognac-950: #34100e;
  --color-khaki: #c5ae8b;
  --color-khaki-50: #faebd5;
  --color-khaki-100: #efdec5;
  --color-khaki-200: #dbc8ab;
  --color-khaki-300: #c5ae8b;
  --color-khaki-400: #a89270;
  --color-khaki-500: #8f7958;
  --color-khaki-600: #766142;
  --color-khaki-700: #604e31;
  --color-khaki-800: #4d3d24;
  --color-khaki-900: #3e301a;
  --color-khaki-950: #271d0d;
  --color-nordic-noir: #003549;
  --color-nordic-noir-50: #eaf8ff;
  --color-nordic-noir-100: #d4f0ff;
  --color-nordic-noir-200: #badef0;
  --color-nordic-noir-300: #9fc8dd;
  --color-nordic-noir-400: #7ba8bf;
  --color-nordic-noir-500: #5d8ca3;
  --color-nordic-noir-600: #447187;
  --color-nordic-noir-700: #2f596d;
  --color-nordic-noir-800: #204556;
  --color-nordic-noir-900: #003549;
  --color-nordic-noir-950: #0a202a;
  --color-watermelon-gelato: #c46a70;
  --color-watermelon-gelato-50: #fff2f2;
  --color-watermelon-gelato-100: #ffe5e5;
  --color-watermelon-gelato-200: #ffc9cb;
  --color-watermelon-gelato-300: #fba9ad;
  --color-watermelon-gelato-400: #e0878b;
  --color-watermelon-gelato-500: #c46a70;
  --color-watermelon-gelato-600: #a54f56;
  --color-watermelon-gelato-700: #883a41;
  --color-watermelon-gelato-800: #6e2a31;
  --color-watermelon-gelato-900: #571d24;
  --color-watermelon-gelato-950: #390f14;
  --color-silent-snowfall: #ebf9ff;
  --color-silent-snowfall-50: #ebf9ff;
  --color-silent-snowfall-100: #e5eef1;
  --color-silent-snowfall-200: #d0dade;
  --color-silent-snowfall-300: #b8c4c8;
  --color-silent-snowfall-400: #98a4aa;
  --color-silent-snowfall-500: #7c898e;
  --color-silent-snowfall-600: #626e73;
  --color-silent-snowfall-700: #4c575c;
  --color-silent-snowfall-800: #3b4448;
  --color-silent-snowfall-900: #2c3438;
  --color-silent-snowfall-950: #1b2023;
}