Start generating

Olive Leaf to Mojito color palette

544634Olive Leaf6C7A6DCamping Trip9B98AEMachinery7C7789Flying CarpetCEC2A3Castaway BeachE4F1DEMojito
Open in generator Export PNG, PDF, ASE…

About this palette

Olive Leaf to Mojito is a 6-color muted palette: #544634 (Olive Leaf), #6C7A6D (Camping Trip), #9B98AE (Machinery), #7C7789 (Flying Carpet), #CEC2A3 (Castaway Beach), #E4F1DE (Mojito). It mixes gray, yellow, white tones and feels warm overall. The strongest text pairing is #544634 on #E4F1DE with a contrast ratio of 7.79:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Olive Leafrgb(84, 70, 52)hsl(34, 24%, 27%)
Camping Triprgb(108, 122, 109)hsl(124, 6%, 45%)
Machineryrgb(155, 152, 174)hsl(248, 12%, 64%)
Flying Carpetrgb(124, 119, 137)hsl(257, 7%, 50%)
Castaway Beachrgb(206, 194, 163)hsl(43, 30%, 72%)
Mojitorgb(228, 241, 222)hsl(101, 40%, 91%)

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.

  • Aa7.79:1 Very good#544634 on #E4F1DE
  • Aa7.79:1 Very good#E4F1DE on #544634
  • Aa5.15:1 Good#544634 on #CEC2A3
  • Aa5.15:1 Good#CEC2A3 on #544634
  • Aa3.86:1 Poor#6C7A6D on #E4F1DE
  • Aa3.86:1 Poor#E4F1DE on #6C7A6D
  • Aa3.69:1 Poor#7C7789 on #E4F1DE
  • Aa3.69:1 Poor#E4F1DE on #7C7789

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Olive Leaf to Mojito — https://swatchly.xyz/palette/544634-6c7a6d-9b98ae-7c7789-cec2a3-e4f1de */
:root {
  --olive-leaf: #544634;
  --camping-trip: #6c7a6d;
  --machinery: #9b98ae;
  --flying-carpet: #7c7789;
  --castaway-beach: #cec2a3;
  --mojito: #e4f1de;
}

Tailwind CSS v4

/* Olive Leaf to Mojito — https://swatchly.xyz/palette/544634-6c7a6d-9b98ae-7c7789-cec2a3-e4f1de */
@theme {
  --color-olive-leaf: #544634;
  --color-olive-leaf-50: #fdf4e8;
  --color-olive-leaf-100: #f4e9dc;
  --color-olive-leaf-200: #e2d5c6;
  --color-olive-leaf-300: #cec0ae;
  --color-olive-leaf-400: #b1a18e;
  --color-olive-leaf-500: #978773;
  --color-olive-leaf-600: #7d6e5b;
  --color-olive-leaf-700: #665847;
  --color-olive-leaf-800: #544634;
  --color-olive-leaf-900: #403629;
  --color-olive-leaf-950: #292218;
  --color-camping-trip: #6c7a6d;
  --color-camping-trip-50: #eff8f0;
  --color-camping-trip-100: #e7f0e7;
  --color-camping-trip-200: #d4dfd4;
  --color-camping-trip-300: #becabe;
  --color-camping-trip-400: #9fada0;
  --color-camping-trip-500: #859386;
  --color-camping-trip-600: #6c7a6d;
  --color-camping-trip-700: #546155;
  --color-camping-trip-800: #414c41;
  --color-camping-trip-900: #313a31;
  --color-camping-trip-950: #1d241e;
  --color-machinery: #9b98ae;
  --color-machinery-50: #f3f1fe;
  --color-machinery-100: #e8e6f5;
  --color-machinery-200: #d3d0e2;
  --color-machinery-300: #bbb9cd;
  --color-machinery-400: #9b98ae;
  --color-machinery-500: #817e93;
  --color-machinery-600: #686579;
  --color-machinery-700: #525062;
  --color-machinery-800: #413e4e;
  --color-machinery-900: #32303d;
  --color-machinery-950: #1f1e27;
  --color-flying-carpet: #7c7789;
  --color-flying-carpet-50: #f4f1fc;
  --color-flying-carpet-100: #e8e4f2;
  --color-flying-carpet-200: #d2cede;
  --color-flying-carpet-300: #bab5c7;
  --color-flying-carpet-400: #9994a6;
  --color-flying-carpet-500: #7c7789;
  --color-flying-carpet-600: #645f70;
  --color-flying-carpet-700: #4f4b5a;
  --color-flying-carpet-800: #3e3b48;
  --color-flying-carpet-900: #312d38;
  --color-flying-carpet-950: #1e1c24;
  --color-castaway-beach: #cec2a3;
  --color-castaway-beach-50: #fcf6e4;
  --color-castaway-beach-100: #f3ecd9;
  --color-castaway-beach-200: #e1d9c2;
  --color-castaway-beach-300: #cec2a3;
  --color-castaway-beach-400: #ada285;
  --color-castaway-beach-500: #928669;
  --color-castaway-beach-600: #776c50;
  --color-castaway-beach-700: #5f553b;
  --color-castaway-beach-800: #4a422c;
  --color-castaway-beach-900: #39321f;
  --color-castaway-beach-950: #241f11;
  --color-mojito: #e4f1de;
  --color-mojito-50: #f1f9ee;
  --color-mojito-100: #e4f1de;
  --color-mojito-200: #d2dcce;
  --color-mojito-300: #bbc5b6;
  --color-mojito-400: #9ba695;
  --color-mojito-500: #7f8b7a;
  --color-mojito-600: #657060;
  --color-mojito-700: #4f594a;
  --color-mojito-800: #3d4539;
  --color-mojito-900: #2e352b;
  --color-mojito-950: #1c2119;
}

Similar palettes