Velvet Black to Creamy Berry color palette

261D21Velvet Black 5C4551Plum Intended 765E6EChimaera A78799Punched Pink DABECACreamy Berry

About this palette

Velvet Black to Creamy Berry is a 5-color muted, warm, gradient palette: #261D21 (Velvet Black), #5C4551 (Plum Intended), #765E6E (Chimaera), #A78799 (Punched Pink), #DABECA (Creamy Berry). It mixes gray, red, pink tones and feels warm overall. The strongest text pairing is #261D21 on #DABECA with a contrast ratio of 9.53:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Velvet Black	rgb(38, 29, 33)	hsl(333, 13%, 13%)
Plum Intended	rgb(92, 69, 81)	hsl(329, 14%, 32%)
Chimaera	rgb(118, 94, 110)	hsl(320, 11%, 42%)
Punched Pink	rgb(167, 135, 153)	hsl(326, 15%, 59%)
Creamy Berry	rgb(218, 190, 202)	hsl(334, 27%, 80%)

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.

Aa9.53:1 Very good#261D21 on #DABECA
Aa9.53:1 Very good#DABECA on #261D21
Aa5.13:1 Good#261D21 on #A78799
Aa5.13:1 Good#A78799 on #261D21
Aa5.03:1 Good#5C4551 on #DABECA
Aa5.03:1 Good#DABECA on #5C4551
Aa3.39:1 Poor#765E6E on #DABECA
Aa3.39:1 Poor#DABECA on #765E6E

Color blindness preview

CSS variables

/* Velvet Black to Creamy Berry — https://swatchly.xyz/palette/261d21-5c4551-765e6e-a78799-dabeca */
:root {
  --velvet-black: #261d21;
  --plum-intended: #5c4551;
  --chimaera: #765e6e;
  --punched-pink: #a78799;
  --creamy-berry: #dabeca;
}

Tailwind CSS v4

/* Velvet Black to Creamy Berry — https://swatchly.xyz/palette/261d21-5c4551-765e6e-a78799-dabeca */
@theme {
  --color-velvet-black: #261d21;
  --color-velvet-black-50: #faf3f6;
  --color-velvet-black-100: #f1e9ec;
  --color-velvet-black-200: #ded4d8;
  --color-velvet-black-300: #c8bec2;
  --color-velvet-black-400: #a99ea3;
  --color-velvet-black-500: #8e8388;
  --color-velvet-black-600: #74696d;
  --color-velvet-black-700: #5c5357;
  --color-velvet-black-800: #494044;
  --color-velvet-black-900: #383134;
  --color-velvet-black-950: #261d21;
  --color-plum-intended: #5c4551;
  --color-plum-intended-50: #fff0f8;
  --color-plum-intended-100: #f7e5ee;
  --color-plum-intended-200: #e4cfd9;
  --color-plum-intended-300: #ceb6c2;
  --color-plum-intended-400: #ae94a1;
  --color-plum-intended-500: #917885;
  --color-plum-intended-600: #745d69;
  --color-plum-intended-700: #5c4551;
  --color-plum-intended-800: #47363f;
  --color-plum-intended-900: #372930;
  --color-plum-intended-950: #23181e;
  --color-chimaera: #765e6e;
  --color-chimaera-50: #fff0fa;
  --color-chimaera-100: #f6e4f0;
  --color-chimaera-200: #e3cedc;
  --color-chimaera-300: #cdb6c5;
  --color-chimaera-400: #ae95a6;
  --color-chimaera-500: #927989;
  --color-chimaera-600: #765e6e;
  --color-chimaera-700: #5f4a58;
  --color-chimaera-800: #4b3945;
  --color-chimaera-900: #3a2b35;
  --color-chimaera-950: #251a21;
  --color-punched-pink: #a78799;
  --color-punched-pink-50: #fff4fa;
  --color-punched-pink-100: #fee9f4;
  --color-punched-pink-200: #eed6e3;
  --color-punched-pink-300: #dcc0cf;
  --color-punched-pink-400: #c0a1b2;
  --color-punched-pink-500: #a78799;
  --color-punched-pink-600: #896b7c;
  --color-punched-pink-700: #6f5363;
  --color-punched-pink-800: #573f4d;
  --color-punched-pink-900: #432f3b;
  --color-punched-pink-950: #2a1c24;
  --color-creamy-berry: #dabeca;
  --color-creamy-berry-50: #fff5f9;
  --color-creamy-berry-100: #fbeaf1;
  --color-creamy-berry-200: #ebd6df;
  --color-creamy-berry-300: #dabeca;
  --color-creamy-berry-400: #b89ea9;
  --color-creamy-berry-500: #9b828d;
  --color-creamy-berry-600: #7f6671;
  --color-creamy-berry-700: #665059;
  --color-creamy-berry-800: #503d45;
  --color-creamy-berry-900: #3e2d35;
  --color-creamy-berry-950: #271b21;
}