Creamy Berry to Nirvana Color Palette

About this palette

Creamy Berry to Nirvana is a 5-color muted palette: #DFBFD3 (Creamy Berry), #202F36 (Nightmare Fuel), #535441 (Kelp), #597D86 (Night Owl), #AF91A0 (Nirvana). It mixes pink, gray, turquoise tones and feels warm overall. The strongest text pairing is #DFBFD3 on #202F36 with a contrast ratio of 8.24:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Creamy Berry	rgb(223, 191, 211)	hsl(322, 33%, 81%)
Nightmare Fuel	rgb(32, 47, 54)	hsl(199, 26%, 17%)
Kelp	rgb(83, 84, 65)	hsl(63, 13%, 29%)
Night Owl	rgb(89, 125, 134)	hsl(192, 20%, 44%)
Nirvana	rgb(175, 145, 160)	hsl(330, 16%, 63%)

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.

Aa8.24:1 Very good#DFBFD3 on #202F36
Aa8.24:1 Very good#202F36 on #DFBFD3
Aa4.85:1 Good#202F36 on #AF91A0
Aa4.85:1 Good#AF91A0 on #202F36
Aa4.62:1 Good#DFBFD3 on #535441
Aa4.62:1 Good#535441 on #DFBFD3
Aa3.09:1 Poor#202F36 on #597D86
Aa3.09:1 Poor#597D86 on #202F36

Color blindness preview

CSS variables

/* Creamy Berry to Nirvana — https://swatchly.xyz/palette/dfbfd3-202f36-535441-597d86-af91a0 */
:root {
  --creamy-berry: #dfbfd3;
  --nightmare-fuel: #202f36;
  --kelp: #535441;
  --night-owl: #597d86;
  --nirvana: #af91a0;
}

Tailwind CSS v4

/* Creamy Berry to Nirvana — https://swatchly.xyz/palette/dfbfd3-202f36-535441-597d86-af91a0 */
@theme {
  --color-creamy-berry: #dfbfd3;
  --color-creamy-berry-50: #fff7fc;
  --color-creamy-berry-100: #feebf7;
  --color-creamy-berry-200: #eed7e6;
  --color-creamy-berry-300: #dfbfd3;
  --color-creamy-berry-400: #bc9fb1;
  --color-creamy-berry-500: #9f8294;
  --color-creamy-berry-600: #826678;
  --color-creamy-berry-700: #684f5f;
  --color-creamy-berry-800: #523c4a;
  --color-creamy-berry-900: #3f2c38;
  --color-creamy-berry-950: #281a23;
  --color-nightmare-fuel: #202f36;
  --color-nightmare-fuel-50: #edf7fc;
  --color-nightmare-fuel-100: #e2edf3;
  --color-nightmare-fuel-200: #ccdae1;
  --color-nightmare-fuel-300: #b4c4cb;
  --color-nightmare-fuel-400: #92a3ac;
  --color-nightmare-fuel-500: #76878f;
  --color-nightmare-fuel-600: #5b6b73;
  --color-nightmare-fuel-700: #45535a;
  --color-nightmare-fuel-800: #333f45;
  --color-nightmare-fuel-900: #202f36;
  --color-nightmare-fuel-950: #151c1f;
  --color-kelp: #535441;
  --color-kelp-50: #f5f6ea;
  --color-kelp-100: #ebecdf;
  --color-kelp-200: #d7d8c8;
  --color-kelp-300: #c0c2af;
  --color-kelp-400: #a0a28d;
  --color-kelp-500: #858671;
  --color-kelp-600: #6a6b58;
  --color-kelp-700: #535441;
  --color-kelp-800: #414132;
  --color-kelp-900: #313225;
  --color-kelp-950: #1e1f16;
  --color-night-owl: #597d86;
  --color-night-owl-50: #e4faff;
  --color-night-owl-100: #dbf2f8;
  --color-night-owl-200: #c6e1e8;
  --color-night-owl-300: #aecdd5;
  --color-night-owl-400: #8db0b9;
  --color-night-owl-500: #72969f;
  --color-night-owl-600: #597d86;
  --color-night-owl-700: #42646c;
  --color-night-owl-800: #304e55;
  --color-night-owl-900: #233c42;
  --color-night-owl-950: #13252a;
  --color-nirvana: #af91a0;
  --color-nirvana-50: #ffedf6;
  --color-nirvana-100: #f6e1eb;
  --color-nirvana-200: #e3cbd7;
  --color-nirvana-300: #ceb2c0;
  --color-nirvana-400: #af91a0;
  --color-nirvana-500: #947786;
  --color-nirvana-600: #7a5f6c;
  --color-nirvana-700: #624a56;
  --color-nirvana-800: #4e3944;
  --color-nirvana-900: #3e2c35;
  --color-nirvana-950: #281b21;
}