Girlie to Ghost White Color Palette

About this palette

Girlie to Ghost White is a 4-color pastel, light palette: #FFD0C8 (Girlie), #D8BFE5 (York Plum), #C1E6FF (Breaking the Ice), #F4F9FF (Ghost White). It mixes pink, purple, blue, white tones and feels cool overall. The strongest text pairing is #D8BFE5 on #F4F9FF with a contrast ratio of 1.59:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Girlie	rgb(255, 208, 200)	hsl(9, 100%, 89%)
York Plum	rgb(216, 191, 229)	hsl(279, 42%, 82%)
Breaking the Ice	rgb(193, 230, 255)	hsl(204, 100%, 88%)
Ghost White	rgb(244, 249, 255)	hsl(213, 100%, 98%)

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.

Color blindness preview

CSS variables

/* Girlie to Ghost White — https://swatchly.xyz/palette/ffd0c8-d8bfe5-c1e6ff-f4f9ff */
:root {
  --girlie: #ffd0c8;
  --york-plum: #d8bfe5;
  --breaking-the-ice: #c1e6ff;
  --ghost-white: #f4f9ff;
}

Tailwind CSS v4

/* Girlie to Ghost White — https://swatchly.xyz/palette/ffd0c8-d8bfe5-c1e6ff-f4f9ff */
@theme {
  --color-girlie: #ffd0c8;
  --color-girlie-50: #fff6f5;
  --color-girlie-100: #ffeae7;
  --color-girlie-200: #ffd0c8;
  --color-girlie-300: #e1bbb4;
  --color-girlie-400: #c39992;
  --color-girlie-500: #a77d76;
  --color-girlie-600: #8a625b;
  --color-girlie-700: #704b46;
  --color-girlie-800: #583934;
  --color-girlie-900: #452b27;
  --color-girlie-950: #2c1a17;
  --color-york-plum: #d8bfe5;
  --color-york-plum-50: #fcf8ff;
  --color-york-plum-100: #f8ecff;
  --color-york-plum-200: #e9d7f2;
  --color-york-plum-300: #d8bfe5;
  --color-york-plum-400: #b69fc1;
  --color-york-plum-500: #9981a5;
  --color-york-plum-600: #7c6688;
  --color-york-plum-700: #634f6d;
  --color-york-plum-800: #4d3c56;
  --color-york-plum-900: #3b2c42;
  --color-york-plum-950: #251a2a;
  --color-breaking-the-ice: #c1e6ff;
  --color-breaking-the-ice-50: #f7fcff;
  --color-breaking-the-ice-100: #e6f5ff;
  --color-breaking-the-ice-200: #c1e6ff;
  --color-breaking-the-ice-300: #afcde1;
  --color-breaking-the-ice-400: #8bacc3;
  --color-breaking-the-ice-500: #6d8fa6;
  --color-breaking-the-ice-600: #527389;
  --color-breaking-the-ice-700: #3c5b6e;
  --color-breaking-the-ice-800: #2b4657;
  --color-breaking-the-ice-900: #1f3644;
  --color-breaking-the-ice-950: #11212c;
  --color-ghost-white: #f4f9ff;
  --color-ghost-white-50: #f4f9ff;
  --color-ghost-white-100: #ebeef2;
  --color-ghost-white-200: #d6dade;
  --color-ghost-white-300: #bfc3c8;
  --color-ghost-white-400: #9fa3a8;
  --color-ghost-white-500: #83878c;
  --color-ghost-white-600: #686c71;
  --color-ghost-white-700: #52565a;
  --color-ghost-white-800: #3f4347;
  --color-ghost-white-900: #303336;
  --color-ghost-white-950: #1d1f22;
}