Puff of Pink to Rose Elegance Color Palette

About this palette

Puff of Pink to Rose Elegance is a 5-color warm, vintage palette: #FFCEE7 (Puff of Pink), #008E65 (Viridian), #963804 (Chocoholic), #002A39 (Black Box), #E6A1BA (Rose Elegance). It mixes pink, green, brown, blue tones and feels warm overall. The strongest text pairing is #FFCEE7 on #002A39 with a contrast ratio of 10.96:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Puff of Pink	rgb(255, 206, 231)	hsl(329, 100%, 90%)
Viridian	rgb(0, 142, 101)	hsl(163, 100%, 28%)
Chocoholic	rgb(150, 56, 4)	hsl(21, 95%, 30%)
Black Box	rgb(0, 42, 57)	hsl(196, 100%, 11%)
Rose Elegance	rgb(230, 161, 186)	hsl(338, 58%, 77%)

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.

Aa10.96:1 Very good#FFCEE7 on #002A39
Aa10.96:1 Very good#002A39 on #FFCEE7
Aa7.32:1 Very good#002A39 on #E6A1BA
Aa7.32:1 Very good#E6A1BA on #002A39
Aa5.32:1 Good#FFCEE7 on #963804
Aa5.32:1 Good#963804 on #FFCEE7
Aa3.64:1 Poor#008E65 on #002A39
Aa3.64:1 Poor#002A39 on #008E65

Color blindness preview

CSS variables

/* Puff of Pink to Rose Elegance — https://swatchly.xyz/palette/ffcee7-008e65-963804-002a39-e6a1ba */
:root {
  --puff-of-pink: #ffcee7;
  --viridian: #008e65;
  --chocoholic: #963804;
  --black-box: #002a39;
  --rose-elegance: #e6a1ba;
}

Tailwind CSS v4

/* Puff of Pink to Rose Elegance — https://swatchly.xyz/palette/ffcee7-008e65-963804-002a39-e6a1ba */
@theme {
  --color-puff-of-pink: #ffcee7;
  --color-puff-of-pink-50: #fff7fb;
  --color-puff-of-pink-100: #ffeaf4;
  --color-puff-of-pink-200: #ffcee7;
  --color-puff-of-pink-300: #e1b9ce;
  --color-puff-of-pink-400: #c397ae;
  --color-puff-of-pink-500: #a67a91;
  --color-puff-of-pink-600: #895f75;
  --color-puff-of-pink-700: #6f495d;
  --color-puff-of-pink-800: #573748;
  --color-puff-of-pink-900: #442938;
  --color-puff-of-pink-950: #2c1823;
  --color-viridian: #008e65;
  --color-viridian-50: #dbffee;
  --color-viridian-100: #c0fee1;
  --color-viridian-200: #a5efcd;
  --color-viridian-300: #87ddb7;
  --color-viridian-400: #5cc197;
  --color-viridian-500: #36a87d;
  --color-viridian-600: #008e65;
  --color-viridian-700: #007150;
  --color-viridian-800: #00583d;
  --color-viridian-900: #00442e;
  --color-viridian-950: #002b1c;
  --color-chocoholic: #963804;
  --color-chocoholic-50: #fff2ed;
  --color-chocoholic-100: #ffe5db;
  --color-chocoholic-200: #ffcbb7;
  --color-chocoholic-300: #ffab8a;
  --color-chocoholic-400: #e8875f;
  --color-chocoholic-500: #cd6a41;
  --color-chocoholic-600: #af5026;
  --color-chocoholic-700: #963804;
  --color-chocoholic-800: #772a00;
  --color-chocoholic-900: #5e1f00;
  --color-chocoholic-950: #3d1100;
  --color-black-box: #002a39;
  --color-black-box-50: #e9f8ff;
  --color-black-box-100: #d6f0fc;
  --color-black-box-200: #beddec;
  --color-black-box-300: #a4c7d8;
  --color-black-box-400: #81a8ba;
  --color-black-box-500: #668ea0;
  --color-black-box-600: #4e7586;
  --color-black-box-700: #3b5e6e;
  --color-black-box-800: #2c4c5a;
  --color-black-box-900: #203d49;
  --color-black-box-950: #002a39;
  --color-rose-elegance: #e6a1ba;
  --color-rose-elegance-50: #ffeaf1;
  --color-rose-elegance-100: #ffd9e6;
  --color-rose-elegance-200: #f6bed1;
  --color-rose-elegance-300: #e6a1ba;
  --color-rose-elegance-400: #c5849c;
  --color-rose-elegance-500: #aa6a82;
  --color-rose-elegance-600: #8e5269;
  --color-rose-elegance-700: #753f54;
  --color-rose-elegance-800: #5f2f42;
  --color-rose-elegance-900: #4c2434;
  --color-rose-elegance-950: #311420;
}