Cavolo Nero to Cashmere Clay color palette

6496A2Cavolo Nero BBDDE8Breezy 473934Film Noir 764F47Roasted CAA494Cashmere Clay

About this palette

Cavolo Nero to Cashmere Clay is a 5-color muted, vintage palette: #6496A2 (Cavolo Nero), #BBDDE8 (Breezy), #473934 (Film Noir), #764F47 (Roasted), #CAA494 (Cashmere Clay). It mixes turquoise, blue, gray, red, orange tones and feels balanced overall. The strongest text pairing is #BBDDE8 on #473934 with a contrast ratio of 7.68:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cavolo Nero	rgb(100, 150, 162)	hsl(192, 25%, 51%)
Breezy	rgb(187, 221, 232)	hsl(195, 49%, 82%)
Film Noir	rgb(71, 57, 52)	hsl(16, 15%, 24%)
Roasted	rgb(118, 79, 71)	hsl(10, 25%, 37%)
Cashmere Clay	rgb(202, 164, 148)	hsl(18, 34%, 69%)

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.

Aa7.68:1 Very good#BBDDE8 on #473934
Aa7.68:1 Very good#473934 on #BBDDE8
Aa4.91:1 Good#BBDDE8 on #764F47
Aa4.91:1 Good#764F47 on #BBDDE8
Aa4.86:1 Good#473934 on #CAA494
Aa4.86:1 Good#CAA494 on #473934
Aa3.38:1 Poor#6496A2 on #473934
Aa3.38:1 Poor#473934 on #6496A2

Color blindness preview

CSS variables

/* Cavolo Nero to Cashmere Clay — https://swatchly.xyz/palette/6496a2-bbdde8-473934-764f47-caa494 */
:root {
  --cavolo-nero: #6496a2;
  --breezy: #bbdde8;
  --film-noir: #473934;
  --roasted: #764f47;
  --cashmere-clay: #caa494;
}

Tailwind CSS v4

/* Cavolo Nero to Cashmere Clay — https://swatchly.xyz/palette/6496a2-bbdde8-473934-764f47-caa494 */
@theme {
  --color-cavolo-nero: #6496a2;
  --color-cavolo-nero-50: #e8faff;
  --color-cavolo-nero-100: #d5f4fc;
  --color-cavolo-nero-200: #bee3ec;
  --color-cavolo-nero-300: #a4ced9;
  --color-cavolo-nero-400: #81b0bc;
  --color-cavolo-nero-500: #6496a2;
  --color-cavolo-nero-600: #497a85;
  --color-cavolo-nero-700: #33616c;
  --color-cavolo-nero-800: #234c55;
  --color-cavolo-nero-900: #173a42;
  --color-cavolo-nero-950: #0b242a;
  --color-breezy: #bbdde8;
  --color-breezy-50: #e5f8fe;
  --color-breezy-100: #d9eef5;
  --color-breezy-200: #bbdde8;
  --color-breezy-300: #a9c6cf;
  --color-breezy-400: #88a7b1;
  --color-breezy-500: #6c8c96;
  --color-breezy-600: #53717b;
  --color-breezy-700: #3e5a63;
  --color-breezy-800: #2e474e;
  --color-breezy-900: #22363d;
  --color-breezy-950: #132226;
  --color-film-noir: #473934;
  --color-film-noir-50: #fdf3ef;
  --color-film-noir-100: #f4e8e4;
  --color-film-noir-200: #e1d4d0;
  --color-film-noir-300: #cbbcb7;
  --color-film-noir-400: #ab9b95;
  --color-film-noir-500: #8f7f79;
  --color-film-noir-600: #73645e;
  --color-film-noir-700: #5a4d48;
  --color-film-noir-800: #473934;
  --color-film-noir-900: #352c28;
  --color-film-noir-950: #211a18;
  --color-roasted: #764f47;
  --color-roasted-50: #fff2ef;
  --color-roasted-100: #ffe4df;
  --color-roasted-200: #f2cfc8;
  --color-roasted-300: #dfb9b0;
  --color-roasted-400: #c39990;
  --color-roasted-500: #a87e75;
  --color-roasted-600: #8d655c;
  --color-roasted-700: #764f47;
  --color-roasted-800: #5d3d36;
  --color-roasted-900: #492e28;
  --color-roasted-950: #2f1c18;
  --color-cashmere-clay: #caa494;
  --color-cashmere-clay-50: #fff8f5;
  --color-cashmere-clay-100: #ffede6;
  --color-cashmere-clay-200: #f5d9ce;
  --color-cashmere-clay-300: #e3c4b6;
  --color-cashmere-clay-400: #caa494;
  --color-cashmere-clay-500: #ab8777;
  --color-cashmere-clay-600: #8d6a5b;
  --color-cashmere-clay-700: #725245;
  --color-cashmere-clay-800: #5a3e33;
  --color-cashmere-clay-900: #452e24;
  --color-cashmere-clay-950: #2b1b14;
}