Purple Haze to Hōjicha Color Palette

About this palette

Purple Haze to Hōjicha is a 5-color muted, cool palette: #827393 (Purple Haze), #1B1614 (Twilight Zone), #CCD7C2 (Marsh Fog), #8FB3BD (Crystal Lake), #43503B (Hōjicha). It mixes purple, black, gray, blue, green tones and feels cool overall. The strongest text pairing is #1B1614 on #CCD7C2 with a contrast ratio of 12.01:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Purple Haze	rgb(130, 115, 147)	hsl(268, 13%, 51%)
Twilight Zone	rgb(27, 22, 20)	hsl(17, 15%, 9%)
Marsh Fog	rgb(204, 215, 194)	hsl(91, 21%, 80%)
Crystal Lake	rgb(143, 179, 189)	hsl(193, 26%, 65%)
Hōjicha	rgb(67, 80, 59)	hsl(97, 15%, 27%)

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.

Aa12.01:1 Super#1B1614 on #CCD7C2
Aa12.01:1 Super#CCD7C2 on #1B1614
Aa7.98:1 Very good#1B1614 on #8FB3BD
Aa7.98:1 Very good#8FB3BD on #1B1614
Aa5.74:1 Good#CCD7C2 on #43503B
Aa5.74:1 Good#43503B on #CCD7C2
Aa4.12:1 Poor#827393 on #1B1614
Aa4.12:1 Poor#1B1614 on #827393

Color blindness preview

CSS variables

/* Purple Haze to Hōjicha — https://swatchly.xyz/palette/827393-1b1614-ccd7c2-8fb3bd-43503b */
:root {
  --purple-haze: #827393;
  --twilight-zone: #1b1614;
  --marsh-fog: #ccd7c2;
  --crystal-lake: #8fb3bd;
  --h-jicha: #43503b;
}

Tailwind CSS v4

/* Purple Haze to Hōjicha — https://swatchly.xyz/palette/827393-1b1614-ccd7c2-8fb3bd-43503b */
@theme {
  --color-purple-haze: #827393;
  --color-purple-haze-50: #f6efff;
  --color-purple-haze-100: #ece2f9;
  --color-purple-haze-200: #d7cbe6;
  --color-purple-haze-300: #c0b2d0;
  --color-purple-haze-400: #9f90b0;
  --color-purple-haze-500: #827393;
  --color-purple-haze-600: #695b79;
  --color-purple-haze-700: #544862;
  --color-purple-haze-800: #43384f;
  --color-purple-haze-900: #342b3e;
  --color-purple-haze-950: #211a28;
  --color-twilight-zone: #1b1614;
  --color-twilight-zone-50: #f8f4f2;
  --color-twilight-zone-100: #efeae8;
  --color-twilight-zone-200: #dcd6d4;
  --color-twilight-zone-300: #c5bfbd;
  --color-twilight-zone-400: #a6a09d;
  --color-twilight-zone-500: #898380;
  --color-twilight-zone-600: #6d6764;
  --color-twilight-zone-700: #554f4d;
  --color-twilight-zone-800: #403b39;
  --color-twilight-zone-900: #2e2b29;
  --color-twilight-zone-950: #1b1614;
  --color-marsh-fog: #ccd7c2;
  --color-marsh-fog-50: #eef4e8;
  --color-marsh-fog-100: #e3eadc;
  --color-marsh-fog-200: #ccd7c2;
  --color-marsh-fog-300: #b7c1af;
  --color-marsh-fog-400: #98a28f;
  --color-marsh-fog-500: #7e8875;
  --color-marsh-fog-600: #656e5c;
  --color-marsh-fog-700: #4f5847;
  --color-marsh-fog-800: #3e4537;
  --color-marsh-fog-900: #2f3529;
  --color-marsh-fog-950: #1c2118;
  --color-crystal-lake: #8fb3bd;
  --color-crystal-lake-50: #effbff;
  --color-crystal-lake-100: #e0f5fb;
  --color-crystal-lake-200: #cae4eb;
  --color-crystal-lake-300: #b2d0d8;
  --color-crystal-lake-400: #8fb3bd;
  --color-crystal-lake-500: #72959f;
  --color-crystal-lake-600: #577982;
  --color-crystal-lake-700: #406068;
  --color-crystal-lake-800: #2f4a52;
  --color-crystal-lake-900: #21383f;
  --color-crystal-lake-950: #122227;
  --color-h-jicha: #43503b;
  --color-h-jicha-50: #f0f8ea;
  --color-h-jicha-100: #e5efdf;
  --color-h-jicha-200: #d0dcc9;
  --color-h-jicha-300: #bac8b3;
  --color-h-jicha-400: #9caa94;
  --color-h-jicha-500: #829179;
  --color-h-jicha-600: #697761;
  --color-h-jicha-700: #55624d;
  --color-h-jicha-800: #43503b;
  --color-h-jicha-900: #343e2e;
  --color-h-jicha-950: #20271b;
}