Hōjicha to Gentle Cold color palette

434E37Hōjicha 43441FAlligator Gladiator 96708AFruit of Passion BBA5B4Foggy Plum C4EBE6Gentle Cold

About this palette

Hōjicha to Gentle Cold is a 5-color muted, vintage palette: #434E37 (Hōjicha), #43441F (Alligator Gladiator), #96708A (Fruit of Passion), #BBA5B4 (Foggy Plum), #C4EBE6 (Gentle Cold). It mixes green, brown, pink, gray, turquoise tones and feels balanced overall. The strongest text pairing is #43441F on #C4EBE6 with a contrast ratio of 7.85:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hōjicha	rgb(67, 78, 55)	hsl(89, 17%, 26%)
Alligator Gladiator	rgb(67, 68, 31)	hsl(62, 37%, 19%)
Fruit of Passion	rgb(150, 112, 138)	hsl(319, 15%, 51%)
Foggy Plum	rgb(187, 165, 180)	hsl(319, 14%, 69%)
Gentle Cold	rgb(196, 235, 230)	hsl(172, 49%, 85%)

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.85:1 Very good#43441F on #C4EBE6
Aa7.85:1 Very good#C4EBE6 on #43441F
Aa6.87:1 Good#434E37 on #C4EBE6
Aa6.87:1 Good#C4EBE6 on #434E37
Aa4.39:1 Poor#43441F on #BBA5B4
Aa4.39:1 Poor#BBA5B4 on #43441F
Aa3.84:1 Poor#434E37 on #BBA5B4
Aa3.84:1 Poor#BBA5B4 on #434E37

Color blindness preview

CSS variables

/* Hōjicha to Gentle Cold — https://swatchly.xyz/palette/434e37-43441f-96708a-bba5b4-c4ebe6 */
:root {
  --h-jicha: #434e37;
  --alligator-gladiator: #43441f;
  --fruit-of-passion: #96708a;
  --foggy-plum: #bba5b4;
  --gentle-cold: #c4ebe6;
}

Tailwind CSS v4

/* Hōjicha to Gentle Cold — https://swatchly.xyz/palette/434e37-43441f-96708a-bba5b4-c4ebe6 */
@theme {
  --color-h-jicha: #434e37;
  --color-h-jicha-50: #f1f8e9;
  --color-h-jicha-100: #e6efde;
  --color-h-jicha-200: #d2dcc7;
  --color-h-jicha-300: #bcc7b0;
  --color-h-jicha-400: #9da990;
  --color-h-jicha-500: #838f76;
  --color-h-jicha-600: #6a765e;
  --color-h-jicha-700: #55604a;
  --color-h-jicha-800: #434e37;
  --color-h-jicha-900: #343c2b;
  --color-h-jicha-950: #202619;
  --color-alligator-gladiator: #43441f;
  --color-alligator-gladiator-50: #f6f7e0;
  --color-alligator-gladiator-100: #eceed4;
  --color-alligator-gladiator-200: #d8dabb;
  --color-alligator-gladiator-300: #c2c4a1;
  --color-alligator-gladiator-400: #a3a57e;
  --color-alligator-gladiator-500: #878962;
  --color-alligator-gladiator-600: #6d6e49;
  --color-alligator-gladiator-700: #565735;
  --color-alligator-gladiator-800: #43441f;
  --color-alligator-gladiator-900: #33341b;
  --color-alligator-gladiator-950: #1f200e;
  --color-fruit-of-passion: #96708a;
  --color-fruit-of-passion-50: #ffeef9;
  --color-fruit-of-passion-100: #fadff1;
  --color-fruit-of-passion-200: #e8c8dd;
  --color-fruit-of-passion-300: #d2aec7;
  --color-fruit-of-passion-400: #b38da7;
  --color-fruit-of-passion-500: #96708a;
  --color-fruit-of-passion-600: #7b5870;
  --color-fruit-of-passion-700: #64445a;
  --color-fruit-of-passion-800: #503447;
  --color-fruit-of-passion-900: #3f2838;
  --color-fruit-of-passion-950: #291824;
  --color-foggy-plum: #bba5b4;
  --color-foggy-plum-50: #fff6fc;
  --color-foggy-plum-100: #faecf6;
  --color-foggy-plum-200: #eadae5;
  --color-foggy-plum-300: #d7c4d1;
  --color-foggy-plum-400: #bba5b4;
  --color-foggy-plum-500: #9d8896;
  --color-foggy-plum-600: #806c79;
  --color-foggy-plum-700: #665460;
  --color-foggy-plum-800: #50404b;
  --color-foggy-plum-900: #3d3039;
  --color-foggy-plum-950: #251c22;
  --color-gentle-cold: #c4ebe6;
  --color-gentle-cold-50: #dcf3f0;
  --color-gentle-cold-100: #c4ebe6;
  --color-gentle-cold-200: #b9d7d3;
  --color-gentle-cold-300: #a2c3be;
  --color-gentle-cold-400: #82a5a1;
  --color-gentle-cold-500: #678c87;
  --color-gentle-cold-600: #4f726e;
  --color-gentle-cold-700: #3c5c59;
  --color-gentle-cold-800: #2c4845;
  --color-gentle-cold-900: #203835;
  --color-gentle-cold-950: #122321;
}