Hidden Paradise to Brown Coffee Color Palette

About this palette

Hidden Paradise to Brown Coffee is a 5-color cool, earthy, vintage palette: #5A8C3E (Hidden Paradise), #396332 (Greenhouse), #B4D0FF (Night Snow), #E78A96 (Xoxo), #4A2727 (Brown Coffee). It mixes green, blue, red, brown tones and feels cool overall. The strongest text pairing is #B4D0FF on #4A2727 with a contrast ratio of 8.32:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hidden Paradise	rgb(90, 140, 62)	hsl(98, 39%, 40%)
Greenhouse	rgb(57, 99, 50)	hsl(111, 33%, 29%)
Night Snow	rgb(180, 208, 255)	hsl(218, 100%, 85%)
Xoxo	rgb(231, 138, 150)	hsl(352, 66%, 72%)
Brown Coffee	rgb(74, 39, 39)	hsl(0, 31%, 22%)

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.

Aa8.32:1 Very good#B4D0FF on #4A2727
Aa8.32:1 Very good#4A2727 on #B4D0FF
Aa5.26:1 Good#E78A96 on #4A2727
Aa5.26:1 Good#4A2727 on #E78A96
Aa4.46:1 Poor#396332 on #B4D0FF
Aa4.46:1 Poor#B4D0FF on #396332
Aa3.26:1 Poor#5A8C3E on #4A2727
Aa3.26:1 Poor#4A2727 on #5A8C3E

Color blindness preview

CSS variables

/* Hidden Paradise to Brown Coffee — https://swatchly.xyz/palette/5a8c3e-396332-b4d0ff-e78a96-4a2727 */
:root {
  --hidden-paradise: #5a8c3e;
  --greenhouse: #396332;
  --night-snow: #b4d0ff;
  --xoxo: #e78a96;
  --brown-coffee: #4a2727;
}

Tailwind CSS v4

/* Hidden Paradise to Brown Coffee — https://swatchly.xyz/palette/5a8c3e-396332-b4d0ff-e78a96-4a2727 */
@theme {
  --color-hidden-paradise: #5a8c3e;
  --color-hidden-paradise-50: #dffed1;
  --color-hidden-paradise-100: #d1f4c0;
  --color-hidden-paradise-200: #b7e1a3;
  --color-hidden-paradise-300: #9bca83;
  --color-hidden-paradise-400: #77a95d;
  --color-hidden-paradise-500: #5a8c3e;
  --color-hidden-paradise-600: #437227;
  --color-hidden-paradise-700: #315c15;
  --color-hidden-paradise-800: #244909;
  --color-hidden-paradise-900: #1a3903;
  --color-hidden-paradise-950: #0e2501;
  --color-greenhouse: #396332;
  --color-greenhouse-50: #e4fedf;
  --color-greenhouse-100: #d8f5d2;
  --color-greenhouse-200: #c1e3ba;
  --color-greenhouse-300: #a7cea0;
  --color-greenhouse-400: #85b07d;
  --color-greenhouse-500: #699561;
  --color-greenhouse-600: #507a48;
  --color-greenhouse-700: #396332;
  --color-greenhouse-800: #2b4d26;
  --color-greenhouse-900: #1f3c1a;
  --color-greenhouse-950: #11260d;
  --color-night-snow: #b4d0ff;
  --color-night-snow-50: #e7f0ff;
  --color-night-snow-100: #d5e5ff;
  --color-night-snow-200: #b4d0ff;
  --color-night-snow-300: #a3bbe4;
  --color-night-snow-400: #839dc8;
  --color-night-snow-500: #6983ae;
  --color-night-snow-600: #526a92;
  --color-night-snow-700: #3f5479;
  --color-night-snow-800: #2f4263;
  --color-night-snow-900: #23334e;
  --color-night-snow-950: #141f33;
  --color-xoxo: #e78a96;
  --color-xoxo-50: #fff5f6;
  --color-xoxo-100: #ffe9eb;
  --color-xoxo-200: #ffcfd3;
  --color-xoxo-300: #feaeb7;
  --color-xoxo-400: #e78a96;
  --color-xoxo-500: #c76e7a;
  --color-xoxo-600: #a7525f;
  --color-xoxo-700: #8a3c49;
  --color-xoxo-800: #6f2a37;
  --color-xoxo-900: #571d28;
  --color-xoxo-950: #380f17;
  --color-brown-coffee: #4a2727;
  --color-brown-coffee-50: #fff1f1;
  --color-brown-coffee-100: #ffe4e3;
  --color-brown-coffee-200: #f1cecd;
  --color-brown-coffee-300: #ddb6b5;
  --color-brown-coffee-400: #bf9594;
  --color-brown-coffee-500: #a47a79;
  --color-brown-coffee-600: #87605f;
  --color-brown-coffee-700: #6e4a4a;
  --color-brown-coffee-800: #573938;
  --color-brown-coffee-900: #4a2727;
  --color-brown-coffee-950: #2c1919;
}