It’s a Girl! to Black Sea Night Color Palette

About this palette

It’s a Girl! to Black Sea Night is a 5-color cool palette: #FFDBE0 (It’s a Girl!), #99DA8C (Leek), #57A300 (Lawn Green), #9B0041 (Cranberry), #002961 (Black Sea Night). It mixes pink, green, red, blue tones and feels cool overall. The strongest text pairing is #FFDBE0 on #002961 with a contrast ratio of 11.05:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
It’s a Girl!	rgb(255, 219, 224)	hsl(352, 100%, 93%)
Leek	rgb(153, 218, 140)	hsl(110, 51%, 70%)
Lawn Green	rgb(87, 163, 0)	hsl(88, 100%, 32%)
Cranberry	rgb(155, 0, 65)	hsl(335, 100%, 30%)
Black Sea Night	rgb(0, 41, 97)	hsl(215, 100%, 19%)

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.

Aa11.05:1 Very good#FFDBE0 on #002961
Aa11.05:1 Very good#002961 on #FFDBE0
Aa8.57:1 Very good#99DA8C on #002961
Aa8.57:1 Very good#002961 on #99DA8C
Aa6.66:1 Good#FFDBE0 on #9B0041
Aa6.66:1 Good#9B0041 on #FFDBE0
Aa5.17:1 Good#99DA8C on #9B0041
Aa5.17:1 Good#9B0041 on #99DA8C

Color blindness preview

CSS variables

/* It’s a Girl! to Black Sea Night — https://swatchly.xyz/palette/ffdbe0-99da8c-57a300-9b0041-002961 */
:root {
  --it-s-a-girl: #ffdbe0;
  --leek: #99da8c;
  --lawn-green: #57a300;
  --cranberry: #9b0041;
  --black-sea-night: #002961;
}

Tailwind CSS v4

/* It’s a Girl! to Black Sea Night — https://swatchly.xyz/palette/ffdbe0-99da8c-57a300-9b0041-002961 */
@theme {
  --color-it-s-a-girl: #ffdbe0;
  --color-it-s-a-girl-50: #ffeaed;
  --color-it-s-a-girl-100: #ffdbe0;
  --color-it-s-a-girl-200: #e6cbcf;
  --color-it-s-a-girl-300: #d3b4b9;
  --color-it-s-a-girl-400: #b6959a;
  --color-it-s-a-girl-500: #9b7b7f;
  --color-it-s-a-girl-600: #806266;
  --color-it-s-a-girl-700: #684d51;
  --color-it-s-a-girl-800: #533b3f;
  --color-it-s-a-girl-900: #412d30;
  --color-it-s-a-girl-950: #291b1d;
  --color-leek: #99da8c;
  --color-leek-50: #eaffe5;
  --color-leek-100: #d5fccd;
  --color-leek-200: #bcebb3;
  --color-leek-300: #99da8c;
  --color-leek-400: #7cb870;
  --color-leek-500: #5d9b51;
  --color-leek-600: #427f36;
  --color-leek-700: #2e6622;
  --color-leek-800: #1e5013;
  --color-leek-900: #133d09;
  --color-leek-950: #082703;
  --color-lawn-green: #57a300;
  --color-lawn-green-50: #e7ffdb;
  --color-lawn-green-100: #ceffb2;
  --color-lawn-green-200: #b5ef93;
  --color-lawn-green-300: #9adb70;
  --color-lawn-green-400: #75be3f;
  --color-lawn-green-500: #57a300;
  --color-lawn-green-600: #458300;
  --color-lawn-green-700: #356800;
  --color-lawn-green-800: #285100;
  --color-lawn-green-900: #1d3e00;
  --color-lawn-green-950: #102700;
  --color-cranberry: #9b0041;
  --color-cranberry-50: #fff1f3;
  --color-cranberry-100: #ffe3e7;
  --color-cranberry-200: #ffc5cf;
  --color-cranberry-300: #ffa1b3;
  --color-cranberry-400: #f56c8d;
  --color-cranberry-500: #d74b71;
  --color-cranberry-600: #b62e57;
  --color-cranberry-700: #9b0041;
  --color-cranberry-800: #7a0332;
  --color-cranberry-900: #610026;
  --color-cranberry-950: #3f0016;
  --color-black-sea-night: #002961;
  --color-black-sea-night-50: #eff6ff;
  --color-black-sea-night-100: #e0ecff;
  --color-black-sea-night-200: #c0d9ff;
  --color-black-sea-night-300: #9cc3fd;
  --color-black-sea-night-400: #77a2e1;
  --color-black-sea-night-500: #5984c4;
  --color-black-sea-night-600: #3f68a4;
  --color-black-sea-night-700: #2c5086;
  --color-black-sea-night-800: #1d3c6a;
  --color-black-sea-night-900: #002961;
  --color-black-sea-night-950: #081a34;
}