Hold Your Horses to Gum Leaf Color Palette

About this palette

Hold Your Horses to Gum Leaf is a 5-color muted, cool, earthy palette: #725748 (Hold Your Horses), #897094 (Purple Haze), #D4F1FF (Water), #24382A (Aztec), #A4C5AD (Gum Leaf). It mixes brown, purple, white, green tones and feels cool overall. The strongest text pairing is #D4F1FF on #24382A with a contrast ratio of 10.65:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hold Your Horses	rgb(114, 87, 72)	hsl(21, 23%, 36%)
Purple Haze	rgb(137, 112, 148)	hsl(282, 14%, 51%)
Water	rgb(212, 241, 255)	hsl(200, 100%, 92%)
Aztec	rgb(36, 56, 42)	hsl(138, 22%, 18%)
Gum Leaf	rgb(164, 197, 173)	hsl(136, 22%, 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.65:1 Very good#D4F1FF on #24382A
Aa10.65:1 Very good#24382A on #D4F1FF
Aa6.67:1 Good#24382A on #A4C5AD
Aa6.67:1 Good#A4C5AD on #24382A
Aa5.62:1 Good#725748 on #D4F1FF
Aa5.62:1 Good#D4F1FF on #725748
Aa3.71:1 Poor#897094 on #D4F1FF
Aa3.71:1 Poor#D4F1FF on #897094

Color blindness preview

CSS variables

/* Hold Your Horses to Gum Leaf — https://swatchly.xyz/palette/725748-897094-d4f1ff-24382a-a4c5ad */
:root {
  --hold-your-horses: #725748;
  --purple-haze: #897094;
  --water: #d4f1ff;
  --aztec: #24382a;
  --gum-leaf: #a4c5ad;
}

Tailwind CSS v4

/* Hold Your Horses to Gum Leaf — https://swatchly.xyz/palette/725748-897094-d4f1ff-24382a-a4c5ad */
@theme {
  --color-hold-your-horses: #725748;
  --color-hold-your-horses-50: #fff2eb;
  --color-hold-your-horses-100: #fbe7dc;
  --color-hold-your-horses-200: #ebd4c7;
  --color-hold-your-horses-300: #d8beb0;
  --color-hold-your-horses-400: #bc9f90;
  --color-hold-your-horses-500: #a28575;
  --color-hold-your-horses-600: #886c5d;
  --color-hold-your-horses-700: #725748;
  --color-hold-your-horses-800: #5a4337;
  --color-hold-your-horses-900: #463328;
  --color-hold-your-horses-950: #2d1f17;
  --color-purple-haze: #897094;
  --color-purple-haze-50: #faeeff;
  --color-purple-haze-100: #f1e0fa;
  --color-purple-haze-200: #dec8e7;
  --color-purple-haze-300: #c6afd1;
  --color-purple-haze-400: #a68db1;
  --color-purple-haze-500: #897094;
  --color-purple-haze-600: #70597a;
  --color-purple-haze-700: #5a4563;
  --color-purple-haze-800: #47354f;
  --color-purple-haze-900: #38293f;
  --color-purple-haze-950: #241929;
  --color-water: #d4f1ff;
  --color-water-50: #eaf8ff;
  --color-water-100: #d4f1ff;
  --color-water-200: #c7dce6;
  --color-water-300: #aec6d1;
  --color-water-400: #8ca6b3;
  --color-water-500: #708b98;
  --color-water-600: #57707c;
  --color-water-700: #425964;
  --color-water-800: #31464f;
  --color-water-900: #24363e;
  --color-water-950: #152127;
  --color-aztec: #24382a;
  --color-aztec-50: #ecf9ef;
  --color-aztec-100: #e1f0e4;
  --color-aztec-200: #cbddcf;
  --color-aztec-300: #b3c7b8;
  --color-aztec-400: #92a898;
  --color-aztec-500: #768d7c;
  --color-aztec-600: #5c7262;
  --color-aztec-700: #475b4d;
  --color-aztec-800: #36473b;
  --color-aztec-900: #24382a;
  --color-aztec-950: #18221b;
  --color-gum-leaf: #a4c5ad;
  --color-gum-leaf-50: #e5f8ea;
  --color-gum-leaf-100: #d8eede;
  --color-gum-leaf-200: #c1dac8;
  --color-gum-leaf-300: #a4c5ad;
  --color-gum-leaf-400: #87a690;
  --color-gum-leaf-500: #6c8c75;
  --color-gum-leaf-600: #54725d;
  --color-gum-leaf-700: #405b48;
  --color-gum-leaf-800: #304838;
  --color-gum-leaf-900: #24382a;
  --color-gum-leaf-950: #152319;
}