Aloe Vera to Rosemary Color Palette

About this palette

Aloe Vera to Rosemary is a 5-color muted, cool palette: #58897D (Aloe Vera), #EACCBD (Humble Blush), #A89BC3 (Imperial Lilac), #312D38 (Haiti), #3B5F58 (Rosemary). It mixes turquoise, orange, purple, gray tones and feels cool overall. The strongest text pairing is #EACCBD on #312D38 with a contrast ratio of 8.87:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Aloe Vera	rgb(88, 137, 125)	hsl(165, 22%, 44%)
Humble Blush	rgb(234, 204, 189)	hsl(20, 52%, 83%)
Imperial Lilac	rgb(168, 155, 195)	hsl(260, 25%, 69%)
Haiti	rgb(49, 45, 56)	hsl(262, 11%, 20%)
Rosemary	rgb(59, 95, 88)	hsl(168, 23%, 30%)

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.

Aa8.87:1 Very good#EACCBD on #312D38
Aa8.87:1 Very good#312D38 on #EACCBD
Aa5.21:1 Good#A89BC3 on #312D38
Aa5.21:1 Good#312D38 on #A89BC3
Aa4.68:1 Good#EACCBD on #3B5F58
Aa4.68:1 Good#3B5F58 on #EACCBD
Aa3.38:1 Poor#58897D on #312D38
Aa3.38:1 Poor#312D38 on #58897D

Color blindness preview

CSS variables

/* Aloe Vera to Rosemary — https://swatchly.xyz/palette/58897d-eaccbd-a89bc3-312d38-3b5f58 */
:root {
  --aloe-vera: #58897d;
  --humble-blush: #eaccbd;
  --imperial-lilac: #a89bc3;
  --haiti: #312d38;
  --rosemary: #3b5f58;
}

Tailwind CSS v4

/* Aloe Vera to Rosemary — https://swatchly.xyz/palette/58897d-eaccbd-a89bc3-312d38-3b5f58 */
@theme {
  --color-aloe-vera: #58897d;
  --color-aloe-vera-50: #defbf3;
  --color-aloe-vera-100: #d0f0e7;
  --color-aloe-vera-200: #b6ddd2;
  --color-aloe-vera-300: #9ac6ba;
  --color-aloe-vera-400: #75a699;
  --color-aloe-vera-500: #58897d;
  --color-aloe-vera-600: #416f64;
  --color-aloe-vera-700: #2e594f;
  --color-aloe-vera-800: #21473e;
  --color-aloe-vera-900: #173730;
  --color-aloe-vera-950: #0b231e;
  --color-humble-blush: #eaccbd;
  --color-humble-blush-50: #ffeee6;
  --color-humble-blush-100: #f7e3d9;
  --color-humble-blush-200: #eaccbd;
  --color-humble-blush-300: #d1b7ab;
  --color-humble-blush-400: #b4988a;
  --color-humble-blush-500: #997d70;
  --color-humble-blush-600: #7e6457;
  --color-humble-blush-700: #664f43;
  --color-humble-blush-800: #513d33;
  --color-humble-blush-900: #402e26;
  --color-humble-blush-950: #281c16;
  --color-imperial-lilac: #a89bc3;
  --color-imperial-lilac-50: #f7f3ff;
  --color-imperial-lilac-100: #efe8ff;
  --color-imperial-lilac-200: #dcd3f2;
  --color-imperial-lilac-300: #c6bbde;
  --color-imperial-lilac-400: #a89bc3;
  --color-imperial-lilac-500: #8c80a6;
  --color-imperial-lilac-600: #71658a;
  --color-imperial-lilac-700: #5a4f70;
  --color-imperial-lilac-800: #473d5a;
  --color-imperial-lilac-900: #362e46;
  --color-imperial-lilac-950: #221c2d;
  --color-haiti: #312d38;
  --color-haiti-50: #f6f3fc;
  --color-haiti-100: #ece9f2;
  --color-haiti-200: #d9d5e0;
  --color-haiti-300: #c3beca;
  --color-haiti-400: #a39eab;
  --color-haiti-500: #87828f;
  --color-haiti-600: #6c6774;
  --color-haiti-700: #54505b;
  --color-haiti-800: #413d47;
  --color-haiti-900: #312d38;
  --color-haiti-950: #1d1b21;
  --color-rosemary: #3b5f58;
  --color-rosemary-50: #e5fbf6;
  --color-rosemary-100: #d9f1ec;
  --color-rosemary-200: #c2dfd9;
  --color-rosemary-300: #a9cac3;
  --color-rosemary-400: #87aba4;
  --color-rosemary-500: #6b9088;
  --color-rosemary-600: #52766e;
  --color-rosemary-700: #3b5f58;
  --color-rosemary-800: #2d4a45;
  --color-rosemary-900: #203935;
  --color-rosemary-950: #122420;
}