Cupid to Natural Wool Color Palette

About this palette

Cupid to Natural Wool is a 5-color pastel, light, warm palette: #F5B1C8 (Cupid), #E9C09A (Laksa), #D9E0FF (Puffy Cloud), #ACF2FF (Pale Sky), #FEF6D4 (Natural Wool). It mixes pink, orange, purple, turquoise, white tones and feels warm overall. The strongest text pairing is #F5B1C8 on #FEF6D4 with a contrast ratio of 1.61:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cupid	rgb(245, 177, 200)	hsl(340, 77%, 83%)
Laksa	rgb(233, 192, 154)	hsl(29, 64%, 76%)
Puffy Cloud	rgb(217, 224, 255)	hsl(229, 100%, 93%)
Pale Sky	rgb(172, 242, 255)	hsl(189, 100%, 84%)
Natural Wool	rgb(254, 246, 212)	hsl(49, 95%, 91%)

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

/* Cupid to Natural Wool — https://swatchly.xyz/palette/f5b1c8-e9c09a-d9e0ff-acf2ff-fef6d4 */
:root {
  --cupid: #f5b1c8;
  --laksa: #e9c09a;
  --puffy-cloud: #d9e0ff;
  --pale-sky: #acf2ff;
  --natural-wool: #fef6d4;
}

Tailwind CSS v4

/* Cupid to Natural Wool — https://swatchly.xyz/palette/f5b1c8-e9c09a-d9e0ff-acf2ff-fef6d4 */
@theme {
  --color-cupid: #f5b1c8;
  --color-cupid-50: #fff6f8;
  --color-cupid-100: #ffe9f0;
  --color-cupid-200: #ffcddd;
  --color-cupid-300: #f5b1c8;
  --color-cupid-400: #d092a7;
  --color-cupid-500: #b4758b;
  --color-cupid-600: #955a6f;
  --color-cupid-700: #7a4458;
  --color-cupid-800: #613244;
  --color-cupid-900: #4c2433;
  --color-cupid-950: #31151f;
  --color-laksa: #e9c09a;
  --color-laksa-50: #fff8f1;
  --color-laksa-100: #ffeddd;
  --color-laksa-200: #f6d8bd;
  --color-laksa-300: #e9c09a;
  --color-laksa-400: #c5a07d;
  --color-laksa-500: #a9835e;
  --color-laksa-600: #8b6744;
  --color-laksa-700: #71502f;
  --color-laksa-800: #593d20;
  --color-laksa-900: #452d15;
  --color-laksa-950: #2c1b09;
  --color-puffy-cloud: #d9e0ff;
  --color-puffy-cloud-50: #e8ecff;
  --color-puffy-cloud-100: #d9e0ff;
  --color-puffy-cloud-200: #c9cee6;
  --color-puffy-cloud-300: #b3b9d4;
  --color-puffy-cloud-400: #959bb8;
  --color-puffy-cloud-500: #7c829e;
  --color-puffy-cloud-600: #636983;
  --color-puffy-cloud-700: #4f546c;
  --color-puffy-cloud-800: #3d4156;
  --color-puffy-cloud-900: #2e3243;
  --color-puffy-cloud-950: #1c1e2b;
  --color-pale-sky: #acf2ff;
  --color-pale-sky-50: #d1f8ff;
  --color-pale-sky-100: #acf2ff;
  --color-pale-sky-200: #a8dce6;
  --color-pale-sky-300: #8dc8d3;
  --color-pale-sky-400: #69aab6;
  --color-pale-sky-500: #4b909c;
  --color-pale-sky-600: #327681;
  --color-pale-sky-700: #1e5f6a;
  --color-pale-sky-800: #0e4b54;
  --color-pale-sky-900: #043a42;
  --color-pale-sky-950: #01242a;
  --color-natural-wool: #fef6d4;
  --color-natural-wool-50: #fef6d4;
  --color-natural-wool-100: #f1ecd7;
  --color-natural-wool-200: #ded8c0;
  --color-natural-wool-300: #c8c1a6;
  --color-natural-wool-400: #a9a284;
  --color-natural-wool-500: #8e8768;
  --color-natural-wool-600: #736c4f;
  --color-natural-wool-700: #5c553b;
  --color-natural-wool-800: #48422b;
  --color-natural-wool-900: #38331f;
  --color-natural-wool-950: #231f11;
}