Strawberry Milk to Noir Mystique Color Palette

About this palette

Strawberry Milk to Noir Mystique is a 5-color warm, vintage palette: #FFD7E7 (Strawberry Milk), #67C8AE (Cockatoo), #496FF0 (Bluetiful), #662748 (Siren), #1D1300 (Noir Mystique). It mixes pink, turquoise, blue, red, black tones and feels warm overall. The strongest text pairing is #FFD7E7 on #1D1300 with a contrast ratio of 14.08:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Strawberry Milk	rgb(255, 215, 231)	hsl(336, 100%, 92%)
Cockatoo	rgb(103, 200, 174)	hsl(164, 47%, 59%)
Bluetiful	rgb(73, 111, 240)	hsl(226, 85%, 61%)
Siren	rgb(102, 39, 72)	hsl(329, 45%, 28%)
Noir Mystique	rgb(29, 19, 0)	hsl(39, 100%, 6%)

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.

Aa14.08:1 Super#FFD7E7 on #1D1300
Aa14.08:1 Super#1D1300 on #FFD7E7
Aa9.12:1 Very good#67C8AE on #1D1300
Aa9.12:1 Very good#1D1300 on #67C8AE
Aa8.28:1 Very good#FFD7E7 on #662748
Aa8.28:1 Very good#662748 on #FFD7E7
Aa5.36:1 Good#67C8AE on #662748
Aa5.36:1 Good#662748 on #67C8AE

Color blindness preview

CSS variables

/* Strawberry Milk to Noir Mystique — https://swatchly.xyz/palette/ffd7e7-67c8ae-496ff0-662748-1d1300 */
:root {
  --strawberry-milk: #ffd7e7;
  --cockatoo: #67c8ae;
  --bluetiful: #496ff0;
  --siren: #662748;
  --noir-mystique: #1d1300;
}

Tailwind CSS v4

/* Strawberry Milk to Noir Mystique — https://swatchly.xyz/palette/ffd7e7-67c8ae-496ff0-662748-1d1300 */
@theme {
  --color-strawberry-milk: #ffd7e7;
  --color-strawberry-milk-50: #ffe8f1;
  --color-strawberry-milk-100: #ffd7e7;
  --color-strawberry-milk-200: #e6c8d4;
  --color-strawberry-milk-300: #d3b1bf;
  --color-strawberry-milk-400: #b692a1;
  --color-strawberry-milk-500: #9c7887;
  --color-strawberry-milk-600: #815f6e;
  --color-strawberry-milk-700: #694b58;
  --color-strawberry-milk-800: #543945;
  --color-strawberry-milk-900: #412b35;
  --color-strawberry-milk-950: #2a1a21;
  --color-cockatoo: #67c8ae;
  --color-cockatoo-50: #c5fceb;
  --color-cockatoo-100: #b3f1de;
  --color-cockatoo-200: #93ddc7;
  --color-cockatoo-300: #67c8ae;
  --color-cockatoo-400: #4aaa92;
  --color-cockatoo-500: #289179;
  --color-cockatoo-600: #007761;
  --color-cockatoo-700: #00604e;
  --color-cockatoo-800: #004c3d;
  --color-cockatoo-900: #003d30;
  --color-cockatoo-950: #00261d;
  --color-bluetiful: #496ff0;
  --color-bluetiful-50: #eef3ff;
  --color-bluetiful-100: #dde7ff;
  --color-bluetiful-200: #bfd1ff;
  --color-bluetiful-300: #9cb8ff;
  --color-bluetiful-400: #6c92ff;
  --color-bluetiful-500: #496ff0;
  --color-bluetiful-600: #3555cf;
  --color-bluetiful-700: #2640af;
  --color-bluetiful-800: #1a3091;
  --color-bluetiful-900: #122376;
  --color-bluetiful-950: #091451;
  --color-siren: #662748;
  --color-siren-50: #fff1f7;
  --color-siren-100: #ffe2ee;
  --color-siren-200: #fec4de;
  --color-siren-300: #ecaac8;
  --color-siren-400: #cf88a9;
  --color-siren-500: #b26c8d;
  --color-siren-600: #945272;
  --color-siren-700: #793d5b;
  --color-siren-800: #662748;
  --color-siren-900: #4c2037;
  --color-siren-950: #311222;
  --color-noir-mystique: #1d1300;
  --color-noir-mystique-50: #fcf4e5;
  --color-noir-mystique-100: #f3ead9;
  --color-noir-mystique-200: #e0d6c2;
  --color-noir-mystique-300: #cbc0a9;
  --color-noir-mystique-400: #ada087;
  --color-noir-mystique-500: #8f8269;
  --color-noir-mystique-600: #72664e;
  --color-noir-mystique-700: #584e38;
  --color-noir-mystique-800: #423927;
  --color-noir-mystique-900: #2f281a;
  --color-noir-mystique-950: #1d1300;
}