Botanical Garden to The Count’s Black Color Palette

About this palette

Botanical Garden to The Count’s Black is a 4-color cool palette: #4AAB00 (Botanical Garden), #FFABB3 (Poodle Skirt), #2F5285 (Galaxy Blue), #0E2339 (The Count’s Black). It mixes green, pink, blue tones and feels cool overall. The strongest text pairing is #FFABB3 on #0E2339 with a contrast ratio of 8.90:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Botanical Garden	rgb(74, 171, 0)	hsl(94, 100%, 34%)
Poodle Skirt	rgb(255, 171, 179)	hsl(354, 100%, 84%)
Galaxy Blue	rgb(47, 82, 133)	hsl(216, 48%, 35%)
The Count’s Black	rgb(14, 35, 57)	hsl(211, 61%, 14%)

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.90:1 Very good#FFABB3 on #0E2339
Aa8.90:1 Very good#0E2339 on #FFABB3
Aa5.40:1 Good#4AAB00 on #0E2339
Aa5.40:1 Good#0E2339 on #4AAB00
Aa4.40:1 Poor#FFABB3 on #2F5285
Aa4.40:1 Poor#2F5285 on #FFABB3

Color blindness preview

CSS variables

/* Botanical Garden to The Count’s Black — https://swatchly.xyz/palette/4aab00-ffabb3-2f5285-0e2339 */
:root {
  --botanical-garden: #4aab00;
  --poodle-skirt: #ffabb3;
  --galaxy-blue: #2f5285;
  --the-count-s-black: #0e2339;
}

Tailwind CSS v4

/* Botanical Garden to The Count’s Black — https://swatchly.xyz/palette/4aab00-ffabb3-2f5285-0e2339 */
@theme {
  --color-botanical-garden: #4aab00;
  --color-botanical-garden-50: #e9ffe1;
  --color-botanical-garden-100: #d1ffc0;
  --color-botanical-garden-200: #aff395;
  --color-botanical-garden-300: #92e173;
  --color-botanical-garden-400: #6bc542;
  --color-botanical-garden-500: #4aab00;
  --color-botanical-garden-600: #3a8a00;
  --color-botanical-garden-700: #2d6d00;
  --color-botanical-garden-800: #215500;
  --color-botanical-garden-900: #174100;
  --color-botanical-garden-950: #0c2800;
  --color-poodle-skirt: #ffabb3;
  --color-poodle-skirt-50: #fff5f5;
  --color-poodle-skirt-100: #ffe8e9;
  --color-poodle-skirt-200: #ffcdd1;
  --color-poodle-skirt-300: #ffabb3;
  --color-poodle-skirt-400: #da8d94;
  --color-poodle-skirt-500: #bd6f78;
  --color-poodle-skirt-600: #9e545d;
  --color-poodle-skirt-700: #823f48;
  --color-poodle-skirt-800: #682e36;
  --color-poodle-skirt-900: #522128;
  --color-poodle-skirt-950: #351217;
  --color-galaxy-blue: #2f5285;
  --color-galaxy-blue-50: #eff6ff;
  --color-galaxy-blue-100: #dfecff;
  --color-galaxy-blue-200: #bfd9ff;
  --color-galaxy-blue-300: #9fc2f4;
  --color-galaxy-blue-400: #7ca1d8;
  --color-galaxy-blue-500: #6085bc;
  --color-galaxy-blue-600: #466a9d;
  --color-galaxy-blue-700: #2f5285;
  --color-galaxy-blue-800: #244068;
  --color-galaxy-blue-900: #193153;
  --color-galaxy-blue-950: #0d1e36;
  --color-the-count-s-black: #0e2339;
  --color-the-count-s-black-50: #eef6ff;
  --color-the-count-s-black-100: #ddedff;
  --color-the-count-s-black-200: #c6daf0;
  --color-the-count-s-black-300: #adc3dc;
  --color-the-count-s-black-400: #8ca4bf;
  --color-the-count-s-black-500: #7189a4;
  --color-the-count-s-black-600: #586f89;
  --color-the-count-s-black-700: #445970;
  --color-the-count-s-black-800: #33465b;
  --color-the-count-s-black-900: #273748;
  --color-the-count-s-black-950: #0e2339;
}