Italian Roast to Cane Sugar color palette

251012Italian Roast 004742Tropical Forest 2B746EGreen Sleeves 63A8E0Acapulco Dive E8BC81Cane Sugar

About this palette

Italian Roast to Cane Sugar is a 5-color cool, vintage palette: #251012 (Italian Roast), #004742 (Tropical Forest), #2B746E (Green Sleeves), #63A8E0 (Acapulco Dive), #E8BC81 (Cane Sugar). It mixes brown, turquoise, blue, orange tones and feels cool overall. The strongest text pairing is #251012 on #E8BC81 with a contrast ratio of 10.28:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Italian Roast	rgb(37, 16, 18)	hsl(354, 40%, 10%)
Tropical Forest	rgb(0, 71, 66)	hsl(176, 100%, 14%)
Green Sleeves	rgb(43, 116, 110)	hsl(175, 46%, 31%)
Acapulco Dive	rgb(99, 168, 224)	hsl(207, 67%, 63%)
Cane Sugar	rgb(232, 188, 129)	hsl(34, 69%, 71%)

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.

Aa10.28:1 Very good#251012 on #E8BC81
Aa10.28:1 Very good#E8BC81 on #251012
Aa7.07:1 Very good#251012 on #63A8E0
Aa7.07:1 Very good#63A8E0 on #251012
Aa6.03:1 Good#004742 on #E8BC81
Aa6.03:1 Good#E8BC81 on #004742
Aa4.15:1 Poor#004742 on #63A8E0
Aa4.15:1 Poor#63A8E0 on #004742

Color blindness preview

CSS variables

/* Italian Roast to Cane Sugar — https://swatchly.xyz/palette/251012-004742-2b746e-63a8e0-e8bc81 */
:root {
  --italian-roast: #251012;
  --tropical-forest: #004742;
  --green-sleeves: #2b746e;
  --acapulco-dive: #63a8e0;
  --cane-sugar: #e8bc81;
}

Tailwind CSS v4

/* Italian Roast to Cane Sugar — https://swatchly.xyz/palette/251012-004742-2b746e-63a8e0-e8bc81 */
@theme {
  --color-italian-roast: #251012;
  --color-italian-roast-50: #fff1f2;
  --color-italian-roast-100: #fae6e6;
  --color-italian-roast-200: #e8d1d2;
  --color-italian-roast-300: #d4b9bb;
  --color-italian-roast-400: #b6999b;
  --color-italian-roast-500: #997c7e;
  --color-italian-roast-600: #7b6162;
  --color-italian-roast-700: #61494b;
  --color-italian-roast-800: #4a3637;
  --color-italian-roast-900: #372728;
  --color-italian-roast-950: #251012;
  --color-tropical-forest: #004742;
  --color-tropical-forest-50: #dcfdf9;
  --color-tropical-forest-100: #cff4ef;
  --color-tropical-forest-200: #b6e2dc;
  --color-tropical-forest-300: #99ccc5;
  --color-tropical-forest-400: #73aca5;
  --color-tropical-forest-500: #558f89;
  --color-tropical-forest-600: #3a736d;
  --color-tropical-forest-700: #265a55;
  --color-tropical-forest-800: #004742;
  --color-tropical-forest-900: #0e3532;
  --color-tropical-forest-950: #05211e;
  --color-green-sleeves: #2b746e;
  --color-green-sleeves-50: #d8fefa;
  --color-green-sleeves-100: #c9f5ef;
  --color-green-sleeves-200: #ade2dc;
  --color-green-sleeves-300: #8fccc5;
  --color-green-sleeves-400: #68aca5;
  --color-green-sleeves-500: #499089;
  --color-green-sleeves-600: #2b746e;
  --color-green-sleeves-700: #1a5d58;
  --color-green-sleeves-800: #0b4945;
  --color-green-sleeves-900: #033935;
  --color-green-sleeves-950: #002421;
  --color-acapulco-dive: #63a8e0;
  --color-acapulco-dive-50: #edf6ff;
  --color-acapulco-dive-100: #daeeff;
  --color-acapulco-dive-200: #b5ddff;
  --color-acapulco-dive-300: #8dc7f9;
  --color-acapulco-dive-400: #63a8e0;
  --color-acapulco-dive-500: #478cc2;
  --color-acapulco-dive-600: #2c71a5;
  --color-acapulco-dive-700: #175988;
  --color-acapulco-dive-800: #06466f;
  --color-acapulco-dive-900: #003658;
  --color-acapulco-dive-950: #00213a;
  --color-cane-sugar: #e8bc81;
  --color-cane-sugar-50: #fff5e9;
  --color-cane-sugar-100: #ffeacf;
  --color-cane-sugar-200: #f5d5ab;
  --color-cane-sugar-300: #e8bc81;
  --color-cane-sugar-400: #c59c65;
  --color-cane-sugar-500: #a98046;
  --color-cane-sugar-600: #8c652b;
  --color-cane-sugar-700: #724e16;
  --color-cane-sugar-800: #5b3c07;
  --color-cane-sugar-900: #472d00;
  --color-cane-sugar-950: #2d1b00;
}