Hint of Mint to Cola Color Palette

About this palette

Hint of Mint to Cola is a 5-color muted, cool palette: #E0EFCE (Hint of Mint), #B7BADD (Stardust Evening), #A3795B (Café au Lait), #505074 (Intergalactic), #3D2D1F (Cola). It mixes green, purple, orange, gray tones and feels cool overall. The strongest text pairing is #E0EFCE on #3D2D1F with a contrast ratio of 10.92:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hint of Mint	rgb(224, 239, 206)	hsl(87, 51%, 87%)
Stardust Evening	rgb(183, 186, 221)	hsl(235, 36%, 79%)
Café au Lait	rgb(163, 121, 91)	hsl(25, 28%, 50%)
Intergalactic	rgb(80, 80, 116)	hsl(240, 18%, 38%)
Cola	rgb(61, 45, 31)	hsl(28, 33%, 18%)

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.92:1 Very good#E0EFCE on #3D2D1F
Aa10.92:1 Very good#3D2D1F on #E0EFCE
Aa6.95:1 Good#B7BADD on #3D2D1F
Aa6.95:1 Good#3D2D1F on #B7BADD
Aa6.35:1 Good#E0EFCE on #505074
Aa6.35:1 Good#505074 on #E0EFCE
Aa4.04:1 Poor#B7BADD on #505074
Aa4.04:1 Poor#505074 on #B7BADD

Color blindness preview

CSS variables

/* Hint of Mint to Cola — https://swatchly.xyz/palette/e0efce-b7badd-a3795b-505074-3d2d1f */
:root {
  --hint-of-mint: #e0efce;
  --stardust-evening: #b7badd;
  --caf-au-lait: #a3795b;
  --intergalactic: #505074;
  --cola: #3d2d1f;
}

Tailwind CSS v4

/* Hint of Mint to Cola — https://swatchly.xyz/palette/e0efce-b7badd-a3795b-505074-3d2d1f */
@theme {
  --color-hint-of-mint: #e0efce;
  --color-hint-of-mint-50: #eef7e4;
  --color-hint-of-mint-100: #e0efce;
  --color-hint-of-mint-200: #cfdac2;
  --color-hint-of-mint-300: #b8c5a9;
  --color-hint-of-mint-400: #99a688;
  --color-hint-of-mint-500: #7e8b6d;
  --color-hint-of-mint-600: #647154;
  --color-hint-of-mint-700: #4f5a40;
  --color-hint-of-mint-800: #3d4630;
  --color-hint-of-mint-900: #2e3623;
  --color-hint-of-mint-950: #1c2214;
  --color-stardust-evening: #b7badd;
  --color-stardust-evening-50: #f1f2ff;
  --color-stardust-evening-100: #e4e7fe;
  --color-stardust-evening-200: #cfd2ed;
  --color-stardust-evening-300: #b7badd;
  --color-stardust-evening-400: #999bbc;
  --color-stardust-evening-500: #7e81a1;
  --color-stardust-evening-600: #656786;
  --color-stardust-evening-700: #50516d;
  --color-stardust-evening-800: #3e3f58;
  --color-stardust-evening-900: #2f3145;
  --color-stardust-evening-950: #1d1e2c;
  --color-caf-au-lait: #a3795b;
  --color-caf-au-lait-50: #fff2e9;
  --color-caf-au-lait-100: #ffe4d2;
  --color-caf-au-lait-200: #f1ceb6;
  --color-caf-au-lait-300: #ddb69b;
  --color-caf-au-lait-400: #bf9577;
  --color-caf-au-lait-500: #a3795b;
  --color-caf-au-lait-600: #876043;
  --color-caf-au-lait-700: #6e4a30;
  --color-caf-au-lait-800: #583922;
  --color-caf-au-lait-900: #452b17;
  --color-caf-au-lait-950: #2d1a0c;
  --color-intergalactic: #505074;
  --color-intergalactic-50: #f3f4ff;
  --color-intergalactic-100: #e8e9ff;
  --color-intergalactic-200: #d3d4f4;
  --color-intergalactic-300: #bcbde1;
  --color-intergalactic-400: #9c9dc4;
  --color-intergalactic-500: #8181a8;
  --color-intergalactic-600: #66678c;
  --color-intergalactic-700: #505074;
  --color-intergalactic-800: #3e3e5b;
  --color-intergalactic-900: #2f2f48;
  --color-intergalactic-950: #1d1d2e;
  --color-cola: #3d2d1f;
  --color-cola-50: #fff3e9;
  --color-cola-100: #f6e9de;
  --color-cola-200: #e4d4c7;
  --color-cola-300: #cfbdaf;
  --color-cola-400: #b09d8d;
  --color-cola-500: #948171;
  --color-cola-600: #796757;
  --color-cola-700: #605042;
  --color-cola-800: #4b3d32;
  --color-cola-900: #3d2d1f;
  --color-cola-950: #241c15;
}