Havana to Tutu Color Palette

About this palette

Havana to Tutu is a 5-color muted, gradient palette: #392927 (Havana), #6F5248 (Bigfoot), #7999A4 (Inland Waters), #A0B8BE (Shallow Sea), #FCE4E0 (Tutu). It mixes gray, red, blue, white tones and feels balanced overall. The strongest text pairing is #392927 on #FCE4E0 with a contrast ratio of 11.39:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Havana	rgb(57, 41, 39)	hsl(7, 19%, 19%)
Bigfoot	rgb(111, 82, 72)	hsl(15, 21%, 36%)
Inland Waters	rgb(121, 153, 164)	hsl(195, 19%, 56%)
Shallow Sea	rgb(160, 184, 190)	hsl(192, 19%, 69%)
Tutu	rgb(252, 228, 224)	hsl(9, 82%, 93%)

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.

Aa11.39:1 Very good#392927 on #FCE4E0
Aa11.39:1 Very good#FCE4E0 on #392927
Aa6.64:1 Good#392927 on #A0B8BE
Aa6.64:1 Good#A0B8BE on #392927
Aa5.82:1 Good#6F5248 on #FCE4E0
Aa5.82:1 Good#FCE4E0 on #6F5248
Aa4.54:1 Good#392927 on #7999A4
Aa4.54:1 Good#7999A4 on #392927

Color blindness preview

CSS variables

/* Havana to Tutu — https://swatchly.xyz/palette/392927-6f5248-7999a4-a0b8be-fce4e0 */
:root {
  --havana: #392927;
  --bigfoot: #6f5248;
  --inland-waters: #7999a4;
  --shallow-sea: #a0b8be;
  --tutu: #fce4e0;
}

Tailwind CSS v4

/* Havana to Tutu — https://swatchly.xyz/palette/392927-6f5248-7999a4-a0b8be-fce4e0 */
@theme {
  --color-havana: #392927;
  --color-havana-50: #fef2f0;
  --color-havana-100: #f5e8e6;
  --color-havana-200: #e3d3d1;
  --color-havana-300: #cebcba;
  --color-havana-400: #af9b99;
  --color-havana-500: #927f7c;
  --color-havana-600: #766461;
  --color-havana-700: #5d4d4b;
  --color-havana-800: #483a38;
  --color-havana-900: #392927;
  --color-havana-950: #211918;
  --color-bigfoot: #6f5248;
  --color-bigfoot-50: #fff2ed;
  --color-bigfoot-100: #fce6de;
  --color-bigfoot-200: #ecd2c9;
  --color-bigfoot-300: #d8bbb2;
  --color-bigfoot-400: #bb9c91;
  --color-bigfoot-500: #a18176;
  --color-bigfoot-600: #86685e;
  --color-bigfoot-700: #6f5248;
  --color-bigfoot-800: #574037;
  --color-bigfoot-900: #443029;
  --color-bigfoot-950: #2c1d18;
  --color-inland-waters: #7999a4;
  --color-inland-waters-50: #edfaff;
  --color-inland-waters-100: #e0f4fb;
  --color-inland-waters-200: #cce3eb;
  --color-inland-waters-300: #b4cfd9;
  --color-inland-waters-400: #94b2bd;
  --color-inland-waters-500: #7999a4;
  --color-inland-waters-600: #5d7c86;
  --color-inland-waters-700: #46626c;
  --color-inland-waters-800: #334c55;
  --color-inland-waters-900: #253a41;
  --color-inland-waters-950: #142429;
  --color-shallow-sea: #a0b8be;
  --color-shallow-sea-50: #e2f1f5;
  --color-shallow-sea-100: #d4e5e9;
  --color-shallow-sea-200: #bcd0d5;
  --color-shallow-sea-300: #a0b8be;
  --color-shallow-sea-400: #849ba1;
  --color-shallow-sea-500: #6b8288;
  --color-shallow-sea-600: #546a6f;
  --color-shallow-sea-700: #42555a;
  --color-shallow-sea-800: #334448;
  --color-shallow-sea-900: #273639;
  --color-shallow-sea-950: #172124;
  --color-tutu: #fce4e0;
  --color-tutu-50: #fef1ef;
  --color-tutu-100: #fce4e0;
  --color-tutu-200: #e4d2cf;
  --color-tutu-300: #cfbbb8;
  --color-tutu-400: #b19b98;
  --color-tutu-500: #96807d;
  --color-tutu-600: #7a6663;
  --color-tutu-700: #63504d;
  --color-tutu-800: #4e3e3b;
  --color-tutu-900: #3d2f2d;
  --color-tutu-950: #261d1b;
}