Cactus to Hōjicha Color Palette

About this palette

Cactus to Hōjicha is a 5-color dark, cool, earthy palette: #516E5B (Cactus), #002321 (Sunken Ship), #223A19 (Queen of Trees), #00120B (Jedi Night), #444C2E (Hōjicha). It mixes green, turquoise, black tones and feels cool overall. The strongest text pairing is #516E5B on #00120B with a contrast ratio of 3.42:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cactus	rgb(81, 110, 91)	hsl(141, 15%, 37%)
Sunken Ship	rgb(0, 35, 33)	hsl(177, 100%, 7%)
Queen of Trees	rgb(34, 58, 25)	hsl(104, 40%, 16%)
Jedi Night	rgb(0, 18, 11)	hsl(157, 100%, 4%)
Hōjicha	rgb(68, 76, 46)	hsl(76, 25%, 24%)

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.42:1 Poor#516E5B on #00120B
Aa3.42:1 Poor#00120B on #516E5B

Color blindness preview

CSS variables

/* Cactus to Hōjicha — https://swatchly.xyz/palette/516e5b-002321-223a19-00120b-444c2e */
:root {
  --cactus: #516e5b;
  --sunken-ship: #002321;
  --queen-of-trees: #223a19;
  --jedi-night: #00120b;
  --h-jicha: #444c2e;
}

Tailwind CSS v4

/* Cactus to Hōjicha — https://swatchly.xyz/palette/516e5b-002321-223a19-00120b-444c2e */
@theme {
  --color-cactus: #516e5b;
  --color-cactus-50: #e9faee;
  --color-cactus-100: #dcf0e2;
  --color-cactus-200: #c4dccc;
  --color-cactus-300: #aac6b3;
  --color-cactus-400: #88a692;
  --color-cactus-500: #6c8a76;
  --color-cactus-600: #516e5b;
  --color-cactus-700: #3e5847;
  --color-cactus-800: #2f4536;
  --color-cactus-900: #233529;
  --color-cactus-950: #142119;
  --color-sunken-ship: #002321;
  --color-sunken-ship-50: #e5faf8;
  --color-sunken-ship-100: #daf1ee;
  --color-sunken-ship-200: #c2dedb;
  --color-sunken-ship-300: #a9c8c5;
  --color-sunken-ship-400: #87aaa6;
  --color-sunken-ship-500: #6a8e8b;
  --color-sunken-ship-600: #507370;
  --color-sunken-ship-700: #3c5b58;
  --color-sunken-ship-800: #2b4744;
  --color-sunken-ship-900: #1f3634;
  --color-sunken-ship-950: #002321;
  --color-queen-of-trees: #223a19;
  --color-queen-of-trees-50: #eafbe5;
  --color-queen-of-trees-100: #dff2d9;
  --color-queen-of-trees-200: #c9dfc2;
  --color-queen-of-trees-300: #b1caa8;
  --color-queen-of-trees-400: #90ab86;
  --color-queen-of-trees-500: #748f6a;
  --color-queen-of-trees-600: #5a7451;
  --color-queen-of-trees-700: #455d3d;
  --color-queen-of-trees-800: #34492d;
  --color-queen-of-trees-900: #223a19;
  --color-queen-of-trees-950: #172312;
  --color-jedi-night: #00120b;
  --color-jedi-night-50: #eaf9f3;
  --color-jedi-night-100: #dff0e9;
  --color-jedi-night-200: #c9ddd4;
  --color-jedi-night-300: #b0c7be;
  --color-jedi-night-400: #8fa89e;
  --color-jedi-night-500: #70897f;
  --color-jedi-night-600: #536a61;
  --color-jedi-night-700: #3b5048;
  --color-jedi-night-800: #283932;
  --color-jedi-night-900: #192621;
  --color-jedi-night-950: #00120b;
  --color-h-jicha: #444c2e;
  --color-h-jicha-50: #f2f8e5;
  --color-h-jicha-100: #e8efd9;
  --color-h-jicha-200: #d4dbc2;
  --color-h-jicha-300: #bec7a9;
  --color-h-jicha-400: #9fa888;
  --color-h-jicha-500: #858e6e;
  --color-h-jicha-600: #6c7455;
  --color-h-jicha-700: #565e41;
  --color-h-jicha-800: #444c2e;
  --color-h-jicha-900: #343a24;
  --color-h-jicha-950: #202515;
}