Girlie to Rich Black Color Palette

About this palette

Girlie to Rich Black is a 5-color cool palette: #FFD3D2 (Girlie), #35DD8C (Envy’s Love), #009E62 (Shamrock), #9E2549 (Vampirella), #003F49 (Rich Black). It mixes pink, green, red, turquoise tones and feels cool overall. The strongest text pairing is #FFD3D2 on #003F49 with a contrast ratio of 8.58:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Girlie	rgb(255, 211, 210)	hsl(1, 100%, 91%)
Envy’s Love	rgb(53, 221, 140)	hsl(151, 71%, 54%)
Shamrock	rgb(0, 158, 98)	hsl(157, 100%, 31%)
Vampirella	rgb(158, 37, 73)	hsl(342, 62%, 38%)
Rich Black	rgb(0, 63, 73)	hsl(188, 100%, 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.58:1 Very good#FFD3D2 on #003F49
Aa8.58:1 Very good#003F49 on #FFD3D2
Aa6.57:1 Good#35DD8C on #003F49
Aa6.57:1 Good#003F49 on #35DD8C
Aa5.51:1 Good#FFD3D2 on #9E2549
Aa5.51:1 Good#9E2549 on #FFD3D2
Aa4.22:1 Poor#35DD8C on #9E2549
Aa4.22:1 Poor#9E2549 on #35DD8C

Color blindness preview

CSS variables

/* Girlie to Rich Black — https://swatchly.xyz/palette/ffd3d2-35dd8c-009e62-9e2549-003f49 */
:root {
  --girlie: #ffd3d2;
  --envy-s-love: #35dd8c;
  --shamrock: #009e62;
  --vampirella: #9e2549;
  --rich-black: #003f49;
}

Tailwind CSS v4

/* Girlie to Rich Black — https://swatchly.xyz/palette/ffd3d2-35dd8c-009e62-9e2549-003f49 */
@theme {
  --color-girlie: #ffd3d2;
  --color-girlie-50: #fff9f9;
  --color-girlie-100: #ffedec;
  --color-girlie-200: #ffd3d2;
  --color-girlie-300: #e1bdbd;
  --color-girlie-400: #c39b9a;
  --color-girlie-500: #a67e7e;
  --color-girlie-600: #896362;
  --color-girlie-700: #6e4c4c;
  --color-girlie-800: #573939;
  --color-girlie-900: #442b2b;
  --color-girlie-950: #2b1a1a;
  --color-envy-s-love: #35dd8c;
  --color-envy-s-love-50: #d5ffe3;
  --color-envy-s-love-100: #a8ffc9;
  --color-envy-s-love-200: #82eeaf;
  --color-envy-s-love-300: #35dd8c;
  --color-envy-s-love-400: #00bb71;
  --color-envy-s-love-500: #009c5d;
  --color-envy-s-love-600: #007e4a;
  --color-envy-s-love-700: #00653a;
  --color-envy-s-love-800: #004f2d;
  --color-envy-s-love-900: #003e22;
  --color-envy-s-love-950: #002713;
  --color-shamrock: #009e62;
  --color-shamrock-50: #dcffe9;
  --color-shamrock-100: #b8fed4;
  --color-shamrock-200: #98edbc;
  --color-shamrock-300: #74d8a1;
  --color-shamrock-400: #42ba7e;
  --color-shamrock-500: #009e62;
  --color-shamrock-600: #007f4e;
  --color-shamrock-700: #00653d;
  --color-shamrock-800: #004f2f;
  --color-shamrock-900: #003d23;
  --color-shamrock-950: #002714;
  --color-vampirella: #9e2549;
  --color-vampirella-50: #fff1f3;
  --color-vampirella-100: #ffe3e7;
  --color-vampirella-200: #ffc8d0;
  --color-vampirella-300: #ffa6b5;
  --color-vampirella-400: #f17992;
  --color-vampirella-500: #d65b77;
  --color-vampirella-600: #b8405e;
  --color-vampirella-700: #9e2549;
  --color-vampirella-800: #7e1938;
  --color-vampirella-900: #650d2a;
  --color-vampirella-950: #430419;
  --color-rich-black: #003f49;
  --color-rich-black-50: #e3faff;
  --color-rich-black-100: #d1f2fa;
  --color-rich-black-200: #b8e0e8;
  --color-rich-black-300: #9ccad4;
  --color-rich-black-400: #79acb7;
  --color-rich-black-500: #5d929d;
  --color-rich-black-600: #437782;
  --color-rich-black-700: #30616b;
  --color-rich-black-800: #214d56;
  --color-rich-black-900: #003f49;
  --color-rich-black-950: #0a272d;
}