Cuba Libre to Calabrese Color Palette

About this palette

Cuba Libre to Calabrese is a 5-color warm, vintage palette: #733740 (Cuba Libre), #71B3AD (Turquoise Fantasies), #498C8C (Highlands), #9A5462 (Cherry Berry), #F5AAA2 (Calabrese). It mixes brown, turquoise, red, pink tones and feels warm overall. The strongest text pairing is #733740 on #F5AAA2 with a contrast ratio of 4.75:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cuba Libre	rgb(115, 55, 64)	hsl(351, 35%, 33%)
Turquoise Fantasies	rgb(113, 179, 173)	hsl(175, 30%, 57%)
Highlands	rgb(73, 140, 140)	hsl(180, 31%, 42%)
Cherry Berry	rgb(154, 84, 98)	hsl(348, 29%, 47%)
Calabrese	rgb(245, 170, 162)	hsl(6, 81%, 80%)

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.

Aa4.75:1 Good#733740 on #F5AAA2
Aa4.75:1 Good#F5AAA2 on #733740
Aa3.73:1 Poor#733740 on #71B3AD
Aa3.73:1 Poor#71B3AD on #733740

Color blindness preview

CSS variables

/* Cuba Libre to Calabrese — https://swatchly.xyz/palette/733740-71b3ad-498c8c-9a5462-f5aaa2 */
:root {
  --cuba-libre: #733740;
  --turquoise-fantasies: #71b3ad;
  --highlands: #498c8c;
  --cherry-berry: #9a5462;
  --calabrese: #f5aaa2;
}

Tailwind CSS v4

/* Cuba Libre to Calabrese — https://swatchly.xyz/palette/733740-71b3ad-498c8c-9a5462-f5aaa2 */
@theme {
  --color-cuba-libre: #733740;
  --color-cuba-libre-50: #fff1f2;
  --color-cuba-libre-100: #ffe3e6;
  --color-cuba-libre-200: #fdc5cb;
  --color-cuba-libre-300: #e9aab1;
  --color-cuba-libre-400: #ca878f;
  --color-cuba-libre-500: #ac6a72;
  --color-cuba-libre-600: #8c5058;
  --color-cuba-libre-700: #733740;
  --color-cuba-libre-800: #592b32;
  --color-cuba-libre-900: #462025;
  --color-cuba-libre-950: #2d1216;
  --color-turquoise-fantasies: #71b3ad;
  --color-turquoise-fantasies-50: #dcfffb;
  --color-turquoise-fantasies-100: #cff6f2;
  --color-turquoise-fantasies-200: #b5e5e0;
  --color-turquoise-fantasies-300: #99d0cb;
  --color-turquoise-fantasies-400: #71b3ad;
  --color-turquoise-fantasies-500: #559691;
  --color-turquoise-fantasies-600: #397b75;
  --color-turquoise-fantasies-700: #24625e;
  --color-turquoise-fantasies-800: #154d49;
  --color-turquoise-fantasies-900: #0a3b38;
  --color-turquoise-fantasies-950: #032523;
  --color-highlands: #498c8c;
  --color-highlands-50: #d7fcfc;
  --color-highlands-100: #c8f2f2;
  --color-highlands-200: #acdfde;
  --color-highlands-300: #8ec8c8;
  --color-highlands-400: #68a9a8;
  --color-highlands-500: #498c8c;
  --color-highlands-600: #307272;
  --color-highlands-700: #1d5b5c;
  --color-highlands-800: #0f4849;
  --color-highlands-900: #063839;
  --color-highlands-950: #022424;
  --color-cherry-berry: #9a5462;
  --color-cherry-berry-50: #fff1f3;
  --color-cherry-berry-100: #ffe3e7;
  --color-cherry-berry-200: #ffc7cf;
  --color-cherry-berry-300: #efacb7;
  --color-cherry-berry-400: #d38a97;
  --color-cherry-berry-500: #b76e7c;
  --color-cherry-berry-600: #9a5462;
  --color-cherry-berry-700: #7e404c;
  --color-cherry-berry-800: #652f3b;
  --color-cherry-berry-900: #50222c;
  --color-cherry-berry-950: #34131a;
  --color-calabrese: #f5aaa2;
  --color-calabrese-50: #fff1ef;
  --color-calabrese-100: #ffe3e0;
  --color-calabrese-200: #ffc7c1;
  --color-calabrese-300: #f5aaa2;
  --color-calabrese-400: #d28c85;
  --color-calabrese-500: #b67069;
  --color-calabrese-600: #985650;
  --color-calabrese-700: #7d413c;
  --color-calabrese-800: #65312d;
  --color-calabrese-900: #502420;
  --color-calabrese-950: #341412;
}