Start generating

Zen Garden to Galaxea color palette

C6DCBFZen Garden83BC85Frog PondB6857FDusty DuchessAE554DHot Sauce35578AGlimpse of Void24325FGalaxea
Open in generator Export PNG, PDF, ASE…

About this palette

Zen Garden to Galaxea is a 6-color cool palette: #C6DCBF (Zen Garden), #83BC85 (Frog Pond), #B6857F (Dusty Duchess), #AE554D (Hot Sauce), #35578A (Glimpse of Void), #24325F (Galaxea). It mixes green, red, blue tones and feels cool overall. The strongest text pairing is #C6DCBF on #24325F with a contrast ratio of 8.48:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Zen Gardenrgb(198, 220, 191)hsl(106, 29%, 81%)
Frog Pondrgb(131, 188, 133)hsl(122, 30%, 63%)
Dusty Duchessrgb(182, 133, 127)hsl(7, 27%, 61%)
Hot Saucergb(174, 85, 77)hsl(5, 39%, 49%)
Glimpse of Voidrgb(53, 87, 138)hsl(216, 45%, 37%)
Galaxeargb(36, 50, 95)hsl(226, 45%, 26%)

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.48:1 Very good#C6DCBF on #24325F
  • Aa8.48:1 Very good#24325F on #C6DCBF
  • Aa5.60:1 Good#83BC85 on #24325F
  • Aa5.60:1 Good#24325F on #83BC85
  • Aa4.99:1 Good#C6DCBF on #35578A
  • Aa4.99:1 Good#35578A on #C6DCBF
  • Aa3.92:1 Poor#B6857F on #24325F
  • Aa3.92:1 Poor#24325F on #B6857F

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Zen Garden to Galaxea — https://swatchly.xyz/palette/c6dcbf-83bc85-b6857f-ae554d-35578a-24325f */
:root {
  --zen-garden: #c6dcbf;
  --frog-pond: #83bc85;
  --dusty-duchess: #b6857f;
  --hot-sauce: #ae554d;
  --glimpse-of-void: #35578a;
  --galaxea: #24325f;
}

Tailwind CSS v4

/* Zen Garden to Galaxea — https://swatchly.xyz/palette/c6dcbf-83bc85-b6857f-ae554d-35578a-24325f */
@theme {
  --color-zen-garden: #c6dcbf;
  --color-zen-garden-50: #ebf7e7;
  --color-zen-garden-100: #dfeddb;
  --color-zen-garden-200: #c6dcbf;
  --color-zen-garden-300: #b2c5ac;
  --color-zen-garden-400: #92a68c;
  --color-zen-garden-500: #778c71;
  --color-zen-garden-600: #5e7158;
  --color-zen-garden-700: #495b44;
  --color-zen-garden-800: #384733;
  --color-zen-garden-900: #2a3726;
  --color-zen-garden-950: #192216;
  --color-frog-pond: #83bc85;
  --color-frog-pond-50: #ebffeb;
  --color-frog-pond-100: #d9fbda;
  --color-frog-pond-200: #c2ebc3;
  --color-frog-pond-300: #a9d8aa;
  --color-frog-pond-400: #83bc85;
  --color-frog-pond-500: #669e69;
  --color-frog-pond-600: #4a814e;
  --color-frog-pond-700: #356738;
  --color-frog-pond-800: #245127;
  --color-frog-pond-900: #183e1b;
  --color-frog-pond-950: #0b260d;
  --color-dusty-duchess: #b6857f;
  --color-dusty-duchess-50: #fff5f3;
  --color-dusty-duchess-100: #ffebe8;
  --color-dusty-duchess-200: #fad4cf;
  --color-dusty-duchess-300: #e9beb9;
  --color-dusty-duchess-400: #cf9f99;
  --color-dusty-duchess-500: #b6857f;
  --color-dusty-duchess-600: #976863;
  --color-dusty-duchess-700: #7b504b;
  --color-dusty-duchess-800: #623d38;
  --color-dusty-duchess-900: #4c2d29;
  --color-dusty-duchess-950: #301a18;
  --color-hot-sauce: #ae554d;
  --color-hot-sauce-50: #fff2f0;
  --color-hot-sauce-100: #ffe6e3;
  --color-hot-sauce-200: #ffccc6;
  --color-hot-sauce-300: #ffada3;
  --color-hot-sauce-400: #e58b81;
  --color-hot-sauce-500: #ca6f66;
  --color-hot-sauce-600: #ae554d;
  --color-hot-sauce-700: #903f38;
  --color-hot-sauce-800: #742d28;
  --color-hot-sauce-900: #5c1f1b;
  --color-hot-sauce-950: #3d110e;
  --color-glimpse-of-void: #35578a;
  --color-glimpse-of-void-50: #eff6ff;
  --color-glimpse-of-void-100: #e0ecff;
  --color-glimpse-of-void-200: #c1daff;
  --color-glimpse-of-void-300: #a2c3f5;
  --color-glimpse-of-void-400: #80a4da;
  --color-glimpse-of-void-500: #6489bf;
  --color-glimpse-of-void-600: #4b6ea2;
  --color-glimpse-of-void-700: #35578a;
  --color-glimpse-of-void-800: #28446d;
  --color-glimpse-of-void-900: #1c3457;
  --color-glimpse-of-void-950: #0f2039;
  --color-galaxea: #24325f;
  --color-galaxea-50: #f1f5ff;
  --color-galaxea-100: #e3ebff;
  --color-galaxea-200: #c7d7ff;
  --color-galaxea-300: #aec0ef;
  --color-galaxea-400: #8ea1d4;
  --color-galaxea-500: #7385b9;
  --color-galaxea-600: #5a6b9c;
  --color-galaxea-700: #455582;
  --color-galaxea-800: #35436a;
  --color-galaxea-900: #24325f;
  --color-galaxea-950: #182038;
}

Similar palettes