Italian Roast to Calm Waters Color Palette

About this palette

Italian Roast to Calm Waters is a 5-color vintage palette: #2C0E0E (Italian Roast), #8C2F0B (Kobe), #008DA8 (Mediterranean Sea), #00C6D2 (Sea Serpent), #DFF8FF (Calm Waters). It mixes brown, red, blue, turquoise, white tones and feels balanced overall. The strongest text pairing is #2C0E0E on #DFF8FF with a contrast ratio of 16.16:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Italian Roast	rgb(44, 14, 14)	hsl(0, 52%, 11%)
Kobe	rgb(140, 47, 11)	hsl(17, 85%, 30%)
Mediterranean Sea	rgb(0, 141, 168)	hsl(190, 100%, 33%)
Sea Serpent	rgb(0, 198, 210)	hsl(183, 100%, 41%)
Calm Waters	rgb(223, 248, 255)	hsl(193, 100%, 94%)

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.

Aa16.16:1 Super#2C0E0E on #DFF8FF
Aa16.16:1 Super#DFF8FF on #2C0E0E
Aa8.51:1 Very good#2C0E0E on #00C6D2
Aa8.51:1 Very good#00C6D2 on #2C0E0E
Aa7.52:1 Very good#8C2F0B on #DFF8FF
Aa7.52:1 Very good#DFF8FF on #8C2F0B
Aa4.57:1 Good#2C0E0E on #008DA8
Aa4.57:1 Good#008DA8 on #2C0E0E

Color blindness preview

CSS variables

/* Italian Roast to Calm Waters — https://swatchly.xyz/palette/2c0e0e-8c2f0b-008da8-00c6d2-dff8ff */
:root {
  --italian-roast: #2c0e0e;
  --kobe: #8c2f0b;
  --mediterranean-sea: #008da8;
  --sea-serpent: #00c6d2;
  --calm-waters: #dff8ff;
}

Tailwind CSS v4

/* Italian Roast to Calm Waters — https://swatchly.xyz/palette/2c0e0e-8c2f0b-008da8-00c6d2-dff8ff */
@theme {
  --color-italian-roast: #2c0e0e;
  --color-italian-roast-50: #fff2f1;
  --color-italian-roast-100: #ffe4e2;
  --color-italian-roast-200: #efcfcc;
  --color-italian-roast-300: #dbb7b4;
  --color-italian-roast-400: #be9694;
  --color-italian-roast-500: #a17977;
  --color-italian-roast-600: #835e5c;
  --color-italian-roast-700: #694846;
  --color-italian-roast-800: #513534;
  --color-italian-roast-900: #3d2625;
  --color-italian-roast-950: #2c0e0e;
  --color-kobe: #8c2f0b;
  --color-kobe-50: #fff2ee;
  --color-kobe-100: #ffe5dc;
  --color-kobe-200: #ffc9b7;
  --color-kobe-300: #ffa689;
  --color-kobe-400: #e38162;
  --color-kobe-500: #c66444;
  --color-kobe-600: #a6492a;
  --color-kobe-700: #8c2f0b;
  --color-kobe-800: #6e2409;
  --color-kobe-900: #571903;
  --color-kobe-950: #390d00;
  --color-mediterranean-sea: #008da8;
  --color-mediterranean-sea-50: #e2f8ff;
  --color-mediterranean-sea-100: #c3f1ff;
  --color-mediterranean-sea-200: #94e1f7;
  --color-mediterranean-sea-300: #70cae3;
  --color-mediterranean-sea-400: #3eaac5;
  --color-mediterranean-sea-500: #008da8;
  --color-mediterranean-sea-600: #007288;
  --color-mediterranean-sea-700: #005a6d;
  --color-mediterranean-sea-800: #004756;
  --color-mediterranean-sea-900: #003743;
  --color-mediterranean-sea-950: #00232b;
  --color-sea-serpent: #00c6d2;
  --color-sea-serpent-50: #edfeff;
  --color-sea-serpent-100: #d1fcff;
  --color-sea-serpent-200: #97f3fa;
  --color-sea-serpent-300: #71e0e9;
  --color-sea-serpent-400: #00c6d2;
  --color-sea-serpent-500: #00a4ae;
  --color-sea-serpent-600: #00848c;
  --color-sea-serpent-700: #00686f;
  --color-sea-serpent-800: #005056;
  --color-sea-serpent-900: #003d41;
  --color-sea-serpent-950: #002528;
  --color-calm-waters: #dff8ff;
  --color-calm-waters-50: #dff8ff;
  --color-calm-waters-100: #ddecf1;
  --color-calm-waters-200: #c8dadf;
  --color-calm-waters-300: #afc4ca;
  --color-calm-waters-400: #8fa5ac;
  --color-calm-waters-500: #748a91;
  --color-calm-waters-600: #5a7076;
  --color-calm-waters-700: #45595f;
  --color-calm-waters-800: #34464a;
  --color-calm-waters-900: #27363a;
  --color-calm-waters-950: #172124;
}