Yellow Mana to Ballerina Color Palette

About this palette

Yellow Mana to Ballerina is a 4-color pastel, light, cool palette: #F1FFC3 (Yellow Mana), #D3C3E0 (Lavender Bliss), #B3DDFF (Broad Daylight), #F4D2E2 (Ballerina). It mixes green, purple, blue, pink tones and feels cool overall. The strongest text pairing is #F1FFC3 on #D3C3E0 with a contrast ratio of 1.57:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Yellow Mana	rgb(241, 255, 195)	hsl(74, 100%, 88%)
Lavender Bliss	rgb(211, 195, 224)	hsl(273, 32%, 82%)
Broad Daylight	rgb(179, 221, 255)	hsl(207, 100%, 85%)
Ballerina	rgb(244, 210, 226)	hsl(332, 61%, 89%)

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

/* Yellow Mana to Ballerina — https://swatchly.xyz/palette/f1ffc3-d3c3e0-b3ddff-f4d2e2 */
:root {
  --yellow-mana: #f1ffc3;
  --lavender-bliss: #d3c3e0;
  --broad-daylight: #b3ddff;
  --ballerina: #f4d2e2;
}

Tailwind CSS v4

/* Yellow Mana to Ballerina — https://swatchly.xyz/palette/f1ffc3-d3c3e0-b3ddff-f4d2e2 */
@theme {
  --color-yellow-mana: #f1ffc3;
  --color-yellow-mana-50: #f1ffc3;
  --color-yellow-mana-100: #e9f2ce;
  --color-yellow-mana-200: #d4deb4;
  --color-yellow-mana-300: #bdc897;
  --color-yellow-mana-400: #9da973;
  --color-yellow-mana-500: #818d56;
  --color-yellow-mana-600: #67723d;
  --color-yellow-mana-700: #515b29;
  --color-yellow-mana-800: #3f471b;
  --color-yellow-mana-900: #303711;
  --color-yellow-mana-950: #1d2207;
  --color-lavender-bliss: #d3c3e0;
  --color-lavender-bliss-50: #fcf8ff;
  --color-lavender-bliss-100: #f7edff;
  --color-lavender-bliss-200: #e6daef;
  --color-lavender-bliss-300: #d3c3e0;
  --color-lavender-bliss-400: #b1a2bd;
  --color-lavender-bliss-500: #9485a0;
  --color-lavender-bliss-600: #786983;
  --color-lavender-bliss-700: #5f5269;
  --color-lavender-bliss-800: #4a3e53;
  --color-lavender-bliss-900: #382e3f;
  --color-lavender-bliss-950: #231c28;
  --color-broad-daylight: #b3ddff;
  --color-broad-daylight-50: #ecf6ff;
  --color-broad-daylight-100: #d9eeff;
  --color-broad-daylight-200: #b3ddff;
  --color-broad-daylight-300: #a3c6e2;
  --color-broad-daylight-400: #80a6c5;
  --color-broad-daylight-500: #648baa;
  --color-broad-daylight-600: #4a708e;
  --color-broad-daylight-700: #365974;
  --color-broad-daylight-800: #27465d;
  --color-broad-daylight-900: #1c3649;
  --color-broad-daylight-950: #0e212f;
  --color-ballerina: #f4d2e2;
  --color-ballerina-50: #fff6fa;
  --color-ballerina-100: #fee9f3;
  --color-ballerina-200: #f4d2e2;
  --color-ballerina-300: #d8bcc9;
  --color-ballerina-400: #ba9ba9;
  --color-ballerina-500: #9d7e8d;
  --color-ballerina-600: #816472;
  --color-ballerina-700: #674d5a;
  --color-ballerina-800: #513b46;
  --color-ballerina-900: #3f2c36;
  --color-ballerina-950: #281b21;
}