Start generating

Gingerbread to Treasure Map Waters color palette

8F4822Gingerbread8CD4BDCabbage4B2733Wine Tasting1B8970Elf64BCE8Malibu5D91A7Treasure Map Waters
Open in generator Export PNG, PDF, ASE…

About this palette

Gingerbread to Treasure Map Waters is a 6-color cool palette: #8F4822 (Gingerbread), #8CD4BD (Cabbage), #4B2733 (Wine Tasting), #1B8970 (Elf), #64BCE8 (Malibu), #5D91A7 (Treasure Map Waters). It mixes brown, turquoise, red, blue tones and feels cool overall. The strongest text pairing is #8CD4BD on #4B2733 with a contrast ratio of 7.49:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Gingerbreadrgb(143, 72, 34)hsl(21, 62%, 35%)
Cabbagergb(140, 212, 189)hsl(161, 46%, 69%)
Wine Tastingrgb(75, 39, 51)hsl(340, 32%, 22%)
Elfrgb(27, 137, 112)hsl(166, 67%, 32%)
Maliburgb(100, 188, 232)hsl(200, 74%, 65%)
Treasure Map Watersrgb(93, 145, 167)hsl(198, 30%, 51%)

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.49:1 Very good#8CD4BD on #4B2733
  • Aa7.49:1 Very good#4B2733 on #8CD4BD
  • Aa6.05:1 Good#4B2733 on #64BCE8
  • Aa6.05:1 Good#64BCE8 on #4B2733
  • Aa3.93:1 Poor#8F4822 on #8CD4BD
  • Aa3.93:1 Poor#8CD4BD on #8F4822
  • Aa3.71:1 Poor#4B2733 on #5D91A7
  • Aa3.71:1 Poor#5D91A7 on #4B2733

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Gingerbread to Treasure Map Waters — https://swatchly.xyz/palette/8f4822-8cd4bd-4b2733-1b8970-64bce8-5d91a7 */
:root {
  --gingerbread: #8f4822;
  --cabbage: #8cd4bd;
  --wine-tasting: #4b2733;
  --elf: #1b8970;
  --malibu: #64bce8;
  --treasure-map-waters: #5d91a7;
}

Tailwind CSS v4

/* Gingerbread to Treasure Map Waters — https://swatchly.xyz/palette/8f4822-8cd4bd-4b2733-1b8970-64bce8-5d91a7 */
@theme {
  --color-gingerbread: #8f4822;
  --color-gingerbread-50: #fff2ec;
  --color-gingerbread-100: #ffe5d9;
  --color-gingerbread-200: #ffcdb5;
  --color-gingerbread-300: #f6b292;
  --color-gingerbread-400: #dc926e;
  --color-gingerbread-500: #c27752;
  --color-gingerbread-600: #a75e39;
  --color-gingerbread-700: #8f4822;
  --color-gingerbread-800: #723616;
  --color-gingerbread-900: #5b280a;
  --color-gingerbread-950: #3c1703;
  --color-cabbage: #8cd4bd;
  --color-cabbage-50: #defff3;
  --color-cabbage-100: #cdf8e9;
  --color-cabbage-200: #b3e6d5;
  --color-cabbage-300: #8cd4bd;
  --color-cabbage-400: #6fb39e;
  --color-cabbage-500: #509782;
  --color-cabbage-600: #347b67;
  --color-cabbage-700: #1f6351;
  --color-cabbage-800: #0f4e3f;
  --color-cabbage-900: #053c2f;
  --color-cabbage-950: #01261d;
  --color-wine-tasting: #4b2733;
  --color-wine-tasting-50: #fff1f5;
  --color-wine-tasting-100: #ffe3ea;
  --color-wine-tasting-200: #f0cdd7;
  --color-wine-tasting-300: #dcb5c0;
  --color-wine-tasting-400: #bf94a1;
  --color-wine-tasting-500: #a47985;
  --color-wine-tasting-600: #885f6b;
  --color-wine-tasting-700: #6e4a55;
  --color-wine-tasting-800: #583942;
  --color-wine-tasting-900: #4b2733;
  --color-wine-tasting-950: #2d1920;
  --color-elf: #1b8970;
  --color-elf-50: #dafff2;
  --color-elf-100: #c4fbe9;
  --color-elf-200: #a9ecd7;
  --color-elf-300: #8bd9c1;
  --color-elf-400: #62bda3;
  --color-elf-500: #3fa389;
  --color-elf-600: #1b8970;
  --color-elf-700: #006e58;
  --color-elf-800: #005644;
  --color-elf-900: #004234;
  --color-elf-950: #002920;
  --color-malibu: #64bce8;
  --color-malibu-50: #f5fbff;
  --color-malibu-100: #e6f6ff;
  --color-malibu-200: #c0e9ff;
  --color-malibu-300: #95d8fc;
  --color-malibu-400: #64bce8;
  --color-malibu-500: #459dc7;
  --color-malibu-600: #1f7fa8;
  --color-malibu-700: #006489;
  --color-malibu-800: #004d6b;
  --color-malibu-900: #003a51;
  --color-malibu-950: #002333;
  --color-treasure-map-waters: #5d91a7;
  --color-treasure-map-waters-50: #eaf8ff;
  --color-treasure-map-waters-100: #d4f2ff;
  --color-treasure-map-waters-200: #b9e0f1;
  --color-treasure-map-waters-300: #9ecbde;
  --color-treasure-map-waters-400: #7aacc2;
  --color-treasure-map-waters-500: #5d91a7;
  --color-treasure-map-waters-600: #43768a;
  --color-treasure-map-waters-700: #2e5e71;
  --color-treasure-map-waters-800: #1f495a;
  --color-treasure-map-waters-900: #143847;
  --color-treasure-map-waters-950: #09232d;
}

Similar palettes