Café Noir to Prosciutto Color Palette

About this palette

Café Noir to Prosciutto is a 5-color cool, vintage palette: #4A3325 (Café Noir), #636387 (Heron), #009480 (Pool Table), #989BCF (Azureno), #E1BAA5 (Prosciutto). It mixes brown, purple, turquoise, orange tones and feels cool overall. The strongest text pairing is #4A3325 on #E1BAA5 with a contrast ratio of 6.57:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Café Noir	rgb(74, 51, 37)	hsl(23, 33%, 22%)
Heron	rgb(99, 99, 135)	hsl(240, 15%, 46%)
Pool Table	rgb(0, 148, 128)	hsl(172, 100%, 29%)
Azureno	rgb(152, 155, 207)	hsl(237, 36%, 70%)
Prosciutto	rgb(225, 186, 165)	hsl(21, 50%, 76%)

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.

Aa6.57:1 Good#4A3325 on #E1BAA5
Aa6.57:1 Good#E1BAA5 on #4A3325
Aa4.42:1 Poor#4A3325 on #989BCF
Aa4.42:1 Poor#989BCF on #4A3325
Aa3.21:1 Poor#636387 on #E1BAA5
Aa3.21:1 Poor#E1BAA5 on #636387
Aa3.10:1 Poor#4A3325 on #009480
Aa3.10:1 Poor#009480 on #4A3325

Color blindness preview

CSS variables

/* Café Noir to Prosciutto — https://swatchly.xyz/palette/4a3325-636387-009480-989bcf-e1baa5 */
:root {
  --caf-noir: #4a3325;
  --heron: #636387;
  --pool-table: #009480;
  --azureno: #989bcf;
  --prosciutto: #e1baa5;
}

Tailwind CSS v4

/* Café Noir to Prosciutto — https://swatchly.xyz/palette/4a3325-636387-009480-989bcf-e1baa5 */
@theme {
  --color-caf-noir: #4a3325;
  --color-caf-noir-50: #fff2eb;
  --color-caf-noir-100: #fae7dc;
  --color-caf-noir-200: #e9d3c6;
  --color-caf-noir-300: #d4bbad;
  --color-caf-noir-400: #b79d8d;
  --color-caf-noir-500: #9d8272;
  --color-caf-noir-600: #83695a;
  --color-caf-noir-700: #6b5446;
  --color-caf-noir-800: #574336;
  --color-caf-noir-900: #4a3325;
  --color-caf-noir-950: #2e2119;
  --color-heron: #636387;
  --color-heron-50: #f4f4ff;
  --color-heron-100: #e7e8ff;
  --color-heron-200: #d2d3f2;
  --color-heron-300: #babbde;
  --color-heron-400: #9a9ac0;
  --color-heron-500: #7e7ea3;
  --color-heron-600: #636387;
  --color-heron-700: #4e4e6d;
  --color-heron-800: #3c3c58;
  --color-heron-900: #2e2e45;
  --color-heron-950: #1c1c2c;
  --color-pool-table: #009480;
  --color-pool-table-50: #d3fff4;
  --color-pool-table-100: #b6f9e9;
  --color-pool-table-200: #95e6d4;
  --color-pool-table-300: #71d0bd;
  --color-pool-table-400: #3fb19c;
  --color-pool-table-500: #009480;
  --color-pool-table-600: #007767;
  --color-pool-table-700: #005f52;
  --color-pool-table-800: #004b40;
  --color-pool-table-900: #003a31;
  --color-pool-table-950: #00251f;
  --color-azureno: #989bcf;
  --color-azureno-50: #f3f4ff;
  --color-azureno-100: #e7e9ff;
  --color-azureno-200: #d0d3fc;
  --color-azureno-300: #b8bbea;
  --color-azureno-400: #989bcf;
  --color-azureno-500: #7d80b2;
  --color-azureno-600: #646695;
  --color-azureno-700: #4e507b;
  --color-azureno-800: #3c3e63;
  --color-azureno-900: #2e2f4f;
  --color-azureno-950: #1c1c33;
  --color-prosciutto: #e1baa5;
  --color-prosciutto-50: #fff4ee;
  --color-prosciutto-100: #ffe7db;
  --color-prosciutto-200: #f0d3c3;
  --color-prosciutto-300: #e1baa5;
  --color-prosciutto-400: #bf9b87;
  --color-prosciutto-500: #a37f6b;
  --color-prosciutto-600: #866451;
  --color-prosciutto-700: #6d4e3d;
  --color-prosciutto-800: #563c2d;
  --color-prosciutto-900: #432d20;
  --color-prosciutto-950: #2b1b12;
}