Wild West to Kelp color palette

765E57Wild West 392A00Secret Passage 602223Jazz 152200Midnight Pines 150D00Balsamico 4A523CKelp

About this palette

Wild West to Kelp is a 6-color dark, earthy palette: #765E57 (Wild West), #392A00 (Secret Passage), #602223 (Jazz), #152200 (Midnight Pines), #150D00 (Balsamico), #4A523C (Kelp). It mixes gray, brown, green, black tones and feels balanced overall. The strongest text pairing is #765E57 on #150D00 with a contrast ratio of 3.22:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wild West	rgb(118, 94, 87)	hsl(14, 15%, 40%)
Secret Passage	rgb(57, 42, 0)	hsl(44, 100%, 11%)
Jazz	rgb(96, 34, 35)	hsl(359, 48%, 25%)
Midnight Pines	rgb(21, 34, 0)	hsl(83, 100%, 7%)
Balsamico	rgb(21, 13, 0)	hsl(37, 100%, 4%)
Kelp	rgb(74, 82, 60)	hsl(82, 15%, 28%)

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.

Aa3.22:1 Poor#765E57 on #150D00
Aa3.22:1 Poor#150D00 on #765E57

Color blindness preview

CSS variables

/* Wild West to Kelp — https://swatchly.xyz/palette/765e57-392a00-602223-152200-150d00-4a523c */
:root {
  --wild-west: #765e57;
  --secret-passage: #392a00;
  --jazz: #602223;
  --midnight-pines: #152200;
  --balsamico: #150d00;
  --kelp: #4a523c;
}

Tailwind CSS v4

/* Wild West to Kelp — https://swatchly.xyz/palette/765e57-392a00-602223-152200-150d00-4a523c */
@theme {
  --color-wild-west: #765e57;
  --color-wild-west-50: #fff2ee;
  --color-wild-west-100: #f7e5e0;
  --color-wild-west-200: #e5cfc9;
  --color-wild-west-300: #cfb7b0;
  --color-wild-west-400: #af968e;
  --color-wild-west-500: #927972;
  --color-wild-west-600: #765e57;
  --color-wild-west-700: #5f4a44;
  --color-wild-west-800: #4b3934;
  --color-wild-west-900: #3b2b27;
  --color-wild-west-950: #251a17;
  --color-secret-passage: #392a00;
  --color-secret-passage-50: #fff4dd;
  --color-secret-passage-100: #f6ead0;
  --color-secret-passage-200: #e4d6b7;
  --color-secret-passage-300: #cfc09c;
  --color-secret-passage-400: #af9f77;
  --color-secret-passage-500: #938259;
  --color-secret-passage-600: #766640;
  --color-secret-passage-700: #5d4f2c;
  --color-secret-passage-800: #473b1d;
  --color-secret-passage-900: #392a00;
  --color-secret-passage-950: #201908;
  --color-jazz: #602223;
  --color-jazz-50: #fff2f1;
  --color-jazz-100: #ffe4e2;
  --color-jazz-200: #ffc8c5;
  --color-jazz-300: #efaeaa;
  --color-jazz-400: #d48d8a;
  --color-jazz-500: #b97270;
  --color-jazz-600: #9d5957;
  --color-jazz-700: #834544;
  --color-jazz-800: #6c3534;
  --color-jazz-900: #602223;
  --color-jazz-950: #3b1818;
  --color-midnight-pines: #152200;
  --color-midnight-pines-50: #effae2;
  --color-midnight-pines-100: #e4f0d6;
  --color-midnight-pines-200: #cfdebe;
  --color-midnight-pines-300: #b7c8a4;
  --color-midnight-pines-400: #97a982;
  --color-midnight-pines-500: #7b8d66;
  --color-midnight-pines-600: #61724c;
  --color-midnight-pines-700: #4b5a38;
  --color-midnight-pines-800: #394629;
  --color-midnight-pines-900: #2b351d;
  --color-midnight-pines-950: #152200;
  --color-balsamico: #150d00;
  --color-balsamico-50: #fbf5e7;
  --color-balsamico-100: #f2eadc;
  --color-balsamico-200: #dfd7c5;
  --color-balsamico-300: #c9c0ac;
  --color-balsamico-400: #aba08b;
  --color-balsamico-500: #8c816c;
  --color-balsamico-600: #6d644f;
  --color-balsamico-700: #534a39;
  --color-balsamico-800: #3b3526;
  --color-balsamico-900: #282318;
  --color-balsamico-950: #150d00;
  --color-kelp: #4a523c;
  --color-kelp-50: #f2f8e9;
  --color-kelp-100: #e8eede;
  --color-kelp-200: #d2d9c6;
  --color-kelp-300: #bac2ac;
  --color-kelp-400: #99a28a;
  --color-kelp-500: #7c856d;
  --color-kelp-600: #616a53;
  --color-kelp-700: #4a523c;
  --color-kelp-800: #39402f;
  --color-kelp-900: #2c3123;
  --color-kelp-950: #1a1e14;
}