Kiss a Frog to Greenhouse color palette

B5C085Kiss a Frog 1E8369Shadows of Time D2F8DBHint of Mint 52A78DJewel Weed 3B3F00Dark Olive 456533Greenhouse

Open in generator Export PNG, PDF, ASE…

About this palette

Kiss a Frog to Greenhouse is a 6-color cool palette: #B5C085 (Kiss a Frog), #1E8369 (Shadows of Time), #D2F8DB (Hint of Mint), #52A78D (Jewel Weed), #3B3F00 (Dark Olive), #456533 (Greenhouse). It mixes green, turquoise, white tones and feels cool overall. The strongest text pairing is #D2F8DB on #3B3F00 with a contrast ratio of 9.59:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Kiss a Frog	rgb(181, 192, 133)	hsl(71, 32%, 64%)
Shadows of Time	rgb(30, 131, 105)	hsl(165, 63%, 32%)
Hint of Mint	rgb(210, 248, 219)	hsl(134, 73%, 90%)
Jewel Weed	rgb(82, 167, 141)	hsl(162, 34%, 49%)
Dark Olive	rgb(59, 63, 0)	hsl(64, 100%, 12%)
Greenhouse	rgb(69, 101, 51)	hsl(98, 33%, 30%)

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.

Aa9.59:1 Very good#D2F8DB on #3B3F00
Aa9.59:1 Very good#3B3F00 on #D2F8DB
Aa5.75:1 Good#D2F8DB on #456533
Aa5.75:1 Good#456533 on #D2F8DB
Aa5.72:1 Good#B5C085 on #3B3F00
Aa5.72:1 Good#3B3F00 on #B5C085
Aa4.04:1 Poor#1E8369 on #D2F8DB
Aa4.04:1 Poor#D2F8DB on #1E8369

Color blindness preview

CSS variables

/* Kiss a Frog to Greenhouse — https://swatchly.xyz/palette/b5c085-1e8369-d2f8db-52a78d-3b3f00-456533 */
:root {
  --kiss-a-frog: #b5c085;
  --shadows-of-time: #1e8369;
  --hint-of-mint: #d2f8db;
  --jewel-weed: #52a78d;
  --dark-olive: #3b3f00;
  --greenhouse: #456533;
}

Tailwind CSS v4

/* Kiss a Frog to Greenhouse — https://swatchly.xyz/palette/b5c085-1e8369-d2f8db-52a78d-3b3f00-456533 */
@theme {
  --color-kiss-a-frog: #b5c085;
  --color-kiss-a-frog-50: #eef6d3;
  --color-kiss-a-frog-100: #e3ebc4;
  --color-kiss-a-frog-200: #cdd7a8;
  --color-kiss-a-frog-300: #b5c085;
  --color-kiss-a-frog-400: #97a26a;
  --color-kiss-a-frog-500: #7e884f;
  --color-kiss-a-frog-600: #656e37;
  --color-kiss-a-frog-700: #505826;
  --color-kiss-a-frog-800: #3f4619;
  --color-kiss-a-frog-900: #313710;
  --color-kiss-a-frog-950: #1e2206;
  --color-shadows-of-time: #1e8369;
  --color-shadows-of-time-50: #dafff1;
  --color-shadows-of-time-100: #c5fae7;
  --color-shadows-of-time-200: #a9e9d3;
  --color-shadows-of-time-300: #8bd6bc;
  --color-shadows-of-time-400: #62b89d;
  --color-shadows-of-time-500: #409e82;
  --color-shadows-of-time-600: #1e8369;
  --color-shadows-of-time-700: #006952;
  --color-shadows-of-time-800: #005240;
  --color-shadows-of-time-900: #003f30;
  --color-shadows-of-time-950: #00281d;
  --color-hint-of-mint: #d2f8db;
  --color-hint-of-mint-50: #e8fded;
  --color-hint-of-mint-100: #d2f8db;
  --color-hint-of-mint-200: #c6e1cc;
  --color-hint-of-mint-300: #accbb3;
  --color-hint-of-mint-400: #8aac92;
  --color-hint-of-mint-500: #6e9177;
  --color-hint-of-mint-600: #54755d;
  --color-hint-of-mint-700: #3f5e47;
  --color-hint-of-mint-800: #2f4a36;
  --color-hint-of-mint-900: #223929;
  --color-hint-of-mint-950: #132418;
  --color-jewel-weed: #52a78d;
  --color-jewel-weed-50: #cdfdec;
  --color-jewel-weed-100: #bcf2df;
  --color-jewel-weed-200: #9edec8;
  --color-jewel-weed-300: #7dc7af;
  --color-jewel-weed-400: #52a78d;
  --color-jewel-weed-500: #368d74;
  --color-jewel-weed-600: #1b745d;
  --color-jewel-weed-700: #025e49;
  --color-jewel-weed-800: #004b3a;
  --color-jewel-weed-900: #003b2d;
  --color-jewel-weed-950: #00261c;
  --color-dark-olive: #3b3f00;
  --color-dark-olive-50: #f4f9d8;
  --color-dark-olive-100: #eaefca;
  --color-dark-olive-200: #d7dcb0;
  --color-dark-olive-300: #bfc592;
  --color-dark-olive-400: #9ea46d;
  --color-dark-olive-500: #81874f;
  --color-dark-olive-600: #666b35;
  --color-dark-olive-700: #4f5322;
  --color-dark-olive-800: #3b3f00;
  --color-dark-olive-900: #2d300b;
  --color-dark-olive-950: #1b1d04;
  --color-greenhouse: #456533;
  --color-greenhouse-50: #e8fdde;
  --color-greenhouse-100: #dcf4d1;
  --color-greenhouse-200: #c7e2ba;
  --color-greenhouse-300: #afcea0;
  --color-greenhouse-400: #8fb07d;
  --color-greenhouse-500: #749662;
  --color-greenhouse-600: #5b7b49;
  --color-greenhouse-700: #456533;
  --color-greenhouse-800: #354f26;
  --color-greenhouse-900: #273d1a;
  --color-greenhouse-950: #16270d;
}