Creamy Strawberry to Rock’n’Rose color palette

FFD4DFCreamy Strawberry E84841Blazing 8B4100Otterly Brown 430C00Black Chocolate FF8EA8Rock’n’Rose

About this palette

Creamy Strawberry to Rock’n’Rose is a 5-color warm palette: #FFD4DF (Creamy Strawberry), #E84841 (Blazing), #8B4100 (Otterly Brown), #430C00 (Black Chocolate), #FF8EA8 (Rock’n’Rose). It mixes pink, red, brown tones and feels warm overall. The strongest text pairing is #FFD4DF on #430C00 with a contrast ratio of 12.19:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Creamy Strawberry	rgb(255, 212, 223)	hsl(345, 100%, 92%)
Blazing	rgb(232, 72, 65)	hsl(3, 78%, 58%)
Otterly Brown	rgb(139, 65, 0)	hsl(28, 100%, 27%)
Black Chocolate	rgb(67, 12, 0)	hsl(11, 100%, 13%)
Rock’n’Rose	rgb(255, 142, 168)	hsl(346, 100%, 78%)

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.

Aa12.19:1 Super#FFD4DF on #430C00
Aa12.19:1 Super#430C00 on #FFD4DF
Aa7.50:1 Very good#430C00 on #FF8EA8
Aa7.50:1 Very good#FF8EA8 on #430C00
Aa5.51:1 Good#FFD4DF on #8B4100
Aa5.51:1 Good#8B4100 on #FFD4DF
Aa4.21:1 Poor#E84841 on #430C00
Aa4.21:1 Poor#430C00 on #E84841

Color blindness preview

CSS variables

/* Creamy Strawberry to Rock’n’Rose — https://swatchly.xyz/palette/ffd4df-e84841-8b4100-430c00-ff8ea8 */
:root {
  --creamy-strawberry: #ffd4df;
  --blazing: #e84841;
  --otterly-brown: #8b4100;
  --black-chocolate: #430c00;
  --rock-n-rose: #ff8ea8;
}

Tailwind CSS v4

/* Creamy Strawberry to Rock’n’Rose — https://swatchly.xyz/palette/ffd4df-e84841-8b4100-430c00-ff8ea8 */
@theme {
  --color-creamy-strawberry: #ffd4df;
  --color-creamy-strawberry-50: #fffafb;
  --color-creamy-strawberry-100: #ffeef2;
  --color-creamy-strawberry-200: #ffd4df;
  --color-creamy-strawberry-300: #e1bec7;
  --color-creamy-strawberry-400: #c29ca6;
  --color-creamy-strawberry-500: #a57e89;
  --color-creamy-strawberry-600: #88636d;
  --color-creamy-strawberry-700: #6d4c55;
  --color-creamy-strawberry-800: #553941;
  --color-creamy-strawberry-900: #432b32;
  --color-creamy-strawberry-950: #2b191e;
  --color-blazing: #e84841;
  --color-blazing-50: #fff2f1;
  --color-blazing-100: #ffe5e2;
  --color-blazing-200: #ffcac3;
  --color-blazing-300: #ffa99e;
  --color-blazing-400: #ff7065;
  --color-blazing-500: #e84841;
  --color-blazing-600: #c62626;
  --color-blazing-700: #a50310;
  --color-blazing-800: #830009;
  --color-blazing-900: #670005;
  --color-blazing-950: #430002;
  --color-otterly-brown: #8b4100;
  --color-otterly-brown-50: #fff2eb;
  --color-otterly-brown-100: #ffe5d7;
  --color-otterly-brown-200: #ffccae;
  --color-otterly-brown-300: #f7b085;
  --color-otterly-brown-400: #dc8e5e;
  --color-otterly-brown-500: #c1723f;
  --color-otterly-brown-600: #a35824;
  --color-otterly-brown-700: #8b4100;
  --color-otterly-brown-800: #6e3200;
  --color-otterly-brown-900: #562500;
  --color-otterly-brown-950: #381600;
  --color-black-chocolate: #430c00;
  --color-black-chocolate-50: #fff2ee;
  --color-black-chocolate-100: #ffe5dd;
  --color-black-chocolate-200: #ffc9bb;
  --color-black-chocolate-300: #ecb1a0;
  --color-black-chocolate-400: #d08f7d;
  --color-black-chocolate-500: #b57462;
  --color-black-chocolate-600: #985a4a;
  --color-black-chocolate-700: #7e4637;
  --color-black-chocolate-800: #663528;
  --color-black-chocolate-900: #52281d;
  --color-black-chocolate-950: #430c00;
  --color-rock-n-rose: #ff8ea8;
  --color-rock-n-rose-50: #ffe9ed;
  --color-rock-n-rose-100: #ffd8df;
  --color-rock-n-rose-200: #ffb7c5;
  --color-rock-n-rose-300: #ff8ea8;
  --color-rock-n-rose-400: #dd728b;
  --color-rock-n-rose-500: #c15772;
  --color-rock-n-rose-600: #a43f5b;
  --color-rock-n-rose-700: #882c47;
  --color-rock-n-rose-800: #701e37;
  --color-rock-n-rose-900: #5b142b;
  --color-rock-n-rose-950: #3c0919;
}