Himalaya to Sunken Harbour Color Palette

About this palette

Himalaya to Sunken Harbour is a 5-color dark, warm, earthy palette: #746030 (Himalaya), #001705 (Memorial Black), #584D31 (Jungle King), #222300 (Midnight Pines), #1F3F42 (Sunken Harbour). It mixes brown, black, turquoise tones and feels warm overall. The strongest text pairing is #746030 on #001705 with a contrast ratio of 3.07:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Himalaya	rgb(116, 96, 48)	hsl(42, 41%, 32%)
Memorial Black	rgb(0, 23, 5)	hsl(133, 100%, 5%)
Jungle King	rgb(88, 77, 49)	hsl(43, 28%, 27%)
Midnight Pines	rgb(34, 35, 0)	hsl(62, 100%, 7%)
Sunken Harbour	rgb(31, 63, 66)	hsl(185, 36%, 19%)

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.07:1 Poor#746030 on #001705
Aa3.07:1 Poor#001705 on #746030

Color blindness preview

CSS variables

/* Himalaya to Sunken Harbour — https://swatchly.xyz/palette/746030-001705-584d31-222300-1f3f42 */
:root {
  --himalaya: #746030;
  --memorial-black: #001705;
  --jungle-king: #584d31;
  --midnight-pines: #222300;
  --sunken-harbour: #1f3f42;
}

Tailwind CSS v4

/* Himalaya to Sunken Harbour — https://swatchly.xyz/palette/746030-001705-584d31-222300-1f3f42 */
@theme {
  --color-himalaya: #746030;
  --color-himalaya-50: #fff4dc;
  --color-himalaya-100: #f6e8c8;
  --color-himalaya-200: #e3d2ac;
  --color-himalaya-300: #cdba8e;
  --color-himalaya-400: #ad9969;
  --color-himalaya-500: #907c4b;
  --color-himalaya-600: #746030;
  --color-himalaya-700: #5d4c22;
  --color-himalaya-800: #4a3b15;
  --color-himalaya-900: #3a2d0d;
  --color-himalaya-950: #251b05;
  --color-memorial-black: #001705;
  --color-memorial-black-50: #e9fbeb;
  --color-memorial-black-100: #def1e0;
  --color-memorial-black-200: #c7dfcb;
  --color-memorial-black-300: #afc9b2;
  --color-memorial-black-400: #8daa92;
  --color-memorial-black-500: #6e8c73;
  --color-memorial-black-600: #526e57;
  --color-memorial-black-700: #3c5440;
  --color-memorial-black-800: #293d2d;
  --color-memorial-black-900: #1b2b1e;
  --color-memorial-black-950: #001705;
  --color-jungle-king: #584d31;
  --color-jungle-king-50: #fcf5e3;
  --color-jungle-king-100: #f3ebd7;
  --color-jungle-king-200: #dfd5be;
  --color-jungle-king-300: #c8bda2;
  --color-jungle-king-400: #a89d7f;
  --color-jungle-king-500: #8c8062;
  --color-jungle-king-600: #706549;
  --color-jungle-king-700: #584d31;
  --color-jungle-king-800: #443c26;
  --color-jungle-king-900: #352e1c;
  --color-jungle-king-950: #211c0f;
  --color-midnight-pines: #222300;
  --color-midnight-pines-50: #f5f8e1;
  --color-midnight-pines-100: #ebeed4;
  --color-midnight-pines-200: #d8dbbc;
  --color-midnight-pines-300: #c1c4a2;
  --color-midnight-pines-400: #a2a580;
  --color-midnight-pines-500: #878a64;
  --color-midnight-pines-600: #6d704b;
  --color-midnight-pines-700: #575938;
  --color-midnight-pines-800: #444629;
  --color-midnight-pines-900: #35361d;
  --color-midnight-pines-950: #222300;
  --color-sunken-harbour: #1f3f42;
  --color-sunken-harbour-50: #e6fafb;
  --color-sunken-harbour-100: #daf0f2;
  --color-sunken-harbour-200: #c3dde0;
  --color-sunken-harbour-300: #a9c8ca;
  --color-sunken-harbour-400: #89aaad;
  --color-sunken-harbour-500: #6e9093;
  --color-sunken-harbour-600: #557679;
  --color-sunken-harbour-700: #426063;
  --color-sunken-harbour-800: #324d50;
  --color-sunken-harbour-900: #1f3f42;
  --color-sunken-harbour-950: #162829;
}