German Hop to Cinnapink Color Palette

About this palette

German Hop to Cinnapink is a 5-color cool palette: #8EAC3B (German Hop), #801F44 (Beet Red), #8ACEFF (Clear Sky), #2A5B95 (Hyper Blue), #A55D73 (Cinnapink). It mixes green, red, blue tones and feels cool overall. The strongest text pairing is #801F44 on #8ACEFF with a contrast ratio of 5.62:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
German Hop	rgb(142, 172, 59)	hsl(76, 49%, 45%)
Beet Red	rgb(128, 31, 68)	hsl(337, 61%, 31%)
Clear Sky	rgb(138, 206, 255)	hsl(205, 100%, 77%)
Hyper Blue	rgb(42, 91, 149)	hsl(213, 56%, 37%)
Cinnapink	rgb(165, 93, 115)	hsl(342, 29%, 51%)

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.

Aa5.62:1 Good#801F44 on #8ACEFF
Aa5.62:1 Good#8ACEFF on #801F44
Aa4.08:1 Poor#8ACEFF on #2A5B95
Aa4.08:1 Poor#2A5B95 on #8ACEFF
Aa3.69:1 Poor#8EAC3B on #801F44
Aa3.69:1 Poor#801F44 on #8EAC3B

Color blindness preview

CSS variables

/* German Hop to Cinnapink — https://swatchly.xyz/palette/8eac3b-801f44-8aceff-2a5b95-a55d73 */
:root {
  --german-hop: #8eac3b;
  --beet-red: #801f44;
  --clear-sky: #8aceff;
  --hyper-blue: #2a5b95;
  --cinnapink: #a55d73;
}

Tailwind CSS v4

/* German Hop to Cinnapink — https://swatchly.xyz/palette/8eac3b-801f44-8aceff-2a5b95-a55d73 */
@theme {
  --color-german-hop: #8eac3b;
  --color-german-hop-50: #eafdc2;
  --color-german-hop-100: #def4b1;
  --color-german-hop-200: #c8e191;
  --color-german-hop-300: #afcb6e;
  --color-german-hop-400: #8eac3b;
  --color-german-hop-500: #749016;
  --color-german-hop-600: #5c7500;
  --color-german-hop-700: #495d00;
  --color-german-hop-800: #394900;
  --color-german-hop-900: #2b3800;
  --color-german-hop-950: #1a2300;
  --color-beet-red: #801f44;
  --color-beet-red-50: #fff1f4;
  --color-beet-red-100: #ffe3e9;
  --color-beet-red-200: #ffc6d4;
  --color-beet-red-300: #ffa4bc;
  --color-beet-red-400: #e6809e;
  --color-beet-red-500: #cb6484;
  --color-beet-red-600: #ae4b6b;
  --color-beet-red-700: #933756;
  --color-beet-red-800: #801f44;
  --color-beet-red-900: #621a34;
  --color-beet-red-950: #420d20;
  --color-clear-sky: #8aceff;
  --color-clear-sky-50: #f1f9ff;
  --color-clear-sky-100: #dff1ff;
  --color-clear-sky-200: #b9e1ff;
  --color-clear-sky-300: #8aceff;
  --color-clear-sky-400: #6dadda;
  --color-clear-sky-500: #4e90be;
  --color-clear-sky-600: #3274a0;
  --color-clear-sky-700: #1c5c84;
  --color-clear-sky-800: #0c486a;
  --color-clear-sky-900: #023754;
  --color-clear-sky-950: #002237;
  --color-hyper-blue: #2a5b95;
  --color-hyper-blue-50: #eff6ff;
  --color-hyper-blue-100: #deedff;
  --color-hyper-blue-200: #bfdbff;
  --color-hyper-blue-300: #9ac6fe;
  --color-hyper-blue-400: #76a7e4;
  --color-hyper-blue-500: #5a8cca;
  --color-hyper-blue-600: #4172ad;
  --color-hyper-blue-700: #2a5b95;
  --color-hyper-blue-800: #1e4777;
  --color-hyper-blue-900: #13365f;
  --color-hyper-blue-950: #08213f;
  --color-cinnapink: #a55d73;
  --color-cinnapink-50: #fff1f4;
  --color-cinnapink-100: #ffe6ec;
  --color-cinnapink-200: #ffccd9;
  --color-cinnapink-300: #f4b1c4;
  --color-cinnapink-400: #da91a6;
  --color-cinnapink-500: #c0768c;
  --color-cinnapink-600: #a55d73;
  --color-cinnapink-700: #88465b;
  --color-cinnapink-800: #6d3346;
  --color-cinnapink-900: #562535;
  --color-cinnapink-950: #381520;
}