Caramel to Sunken Ship Color Palette

About this palette

Caramel to Sunken Ship is a 5-color cool palette: #AD6D00 (Caramel), #E5DBFF (Scented Spring), #BD81FF (Illicit Purple), #004B40 (Tropical Forest), #002625 (Sunken Ship). It mixes orange, purple, turquoise tones and feels cool overall. The strongest text pairing is #E5DBFF on #002625 with a contrast ratio of 12.20:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Caramel	rgb(173, 109, 0)	hsl(38, 100%, 34%)
Scented Spring	rgb(229, 219, 255)	hsl(257, 100%, 93%)
Illicit Purple	rgb(189, 129, 255)	hsl(269, 100%, 75%)
Tropical Forest	rgb(0, 75, 64)	hsl(171, 100%, 15%)
Sunken Ship	rgb(0, 38, 37)	hsl(178, 100%, 7%)

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.

Aa12.20:1 Super#E5DBFF on #002625
Aa12.20:1 Super#002625 on #E5DBFF
Aa7.65:1 Very good#E5DBFF on #004B40
Aa7.65:1 Very good#004B40 on #E5DBFF
Aa5.94:1 Good#BD81FF on #002625
Aa5.94:1 Good#002625 on #BD81FF
Aa3.81:1 Poor#AD6D00 on #002625
Aa3.81:1 Poor#002625 on #AD6D00

Color blindness preview

CSS variables

/* Caramel to Sunken Ship — https://swatchly.xyz/palette/ad6d00-e5dbff-bd81ff-004b40-002625 */
:root {
  --caramel: #ad6d00;
  --scented-spring: #e5dbff;
  --illicit-purple: #bd81ff;
  --tropical-forest: #004b40;
  --sunken-ship: #002625;
}

Tailwind CSS v4

/* Caramel to Sunken Ship — https://swatchly.xyz/palette/ad6d00-e5dbff-bd81ff-004b40-002625 */
@theme {
  --color-caramel: #ad6d00;
  --color-caramel-50: #fff1e2;
  --color-caramel-100: #ffe3c3;
  --color-caramel-200: #fdc78b;
  --color-caramel-300: #e9ad66;
  --color-caramel-400: #cb8a37;
  --color-caramel-500: #ad6d00;
  --color-caramel-600: #8c5700;
  --color-caramel-700: #704500;
  --color-caramel-800: #593500;
  --color-caramel-900: #462900;
  --color-caramel-950: #2d1900;
  --color-scented-spring: #e5dbff;
  --color-scented-spring-50: #efe9ff;
  --color-scented-spring-100: #e5dbff;
  --color-scented-spring-200: #d2cbe6;
  --color-scented-spring-300: #beb5d4;
  --color-scented-spring-400: #a097b8;
  --color-scented-spring-500: #877d9e;
  --color-scented-spring-600: #6e6583;
  --color-scented-spring-700: #58506c;
  --color-scented-spring-800: #453e56;
  --color-scented-spring-900: #352f43;
  --color-scented-spring-950: #211c2b;
  --color-illicit-purple: #bd81ff;
  --color-illicit-purple-50: #f8f3ff;
  --color-illicit-purple-100: #f1e7ff;
  --color-illicit-purple-200: #e3ceff;
  --color-illicit-purple-300: #d3b0ff;
  --color-illicit-purple-400: #bd81ff;
  --color-illicit-purple-500: #a164e0;
  --color-illicit-purple-600: #8549c0;
  --color-illicit-purple-700: #6c33a1;
  --color-illicit-purple-800: #562284;
  --color-illicit-purple-900: #43166a;
  --color-illicit-purple-950: #2b0a46;
  --color-tropical-forest: #004b40;
  --color-tropical-forest-50: #dcfef5;
  --color-tropical-forest-100: #cef5eb;
  --color-tropical-forest-200: #b5e3d8;
  --color-tropical-forest-300: #98cdc1;
  --color-tropical-forest-400: #73aea1;
  --color-tropical-forest-500: #549285;
  --color-tropical-forest-600: #3a766a;
  --color-tropical-forest-700: #265e53;
  --color-tropical-forest-800: #004b40;
  --color-tropical-forest-900: #0d3931;
  --color-tropical-forest-950: #05231e;
  --color-sunken-ship: #002625;
  --color-sunken-ship-50: #e5faf9;
  --color-sunken-ship-100: #d9f1f0;
  --color-sunken-ship-200: #c1dedd;
  --color-sunken-ship-300: #a7c9c7;
  --color-sunken-ship-400: #85aaa8;
  --color-sunken-ship-500: #698f8d;
  --color-sunken-ship-600: #507472;
  --color-sunken-ship-700: #3c5d5b;
  --color-sunken-ship-800: #2c4948;
  --color-sunken-ship-900: #203937;
  --color-sunken-ship-950: #002625;
}