Start generating

Cream Puff to Prunella color palette

FFB99ECream Puff7E3206Caponata84CE65Fairy Tale Green008BACCorfu Waters864188Prunella
Open in generator Export PNG, PDF, ASE…

About this palette

Cream Puff to Prunella is a 5-color cool palette: #FFB99E (Cream Puff), #7E3206 (Caponata), #84CE65 (Fairy Tale Green), #008BAC (Corfu Waters), #864188 (Prunella). It mixes orange, brown, green, blue, pink tones and feels cool overall. The strongest text pairing is #FFB99E on #7E3206 with a contrast ratio of 5.41:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Cream Puffrgb(255, 185, 158)hsl(17, 100%, 81%)
Caponatargb(126, 50, 6)hsl(22, 91%, 26%)
Fairy Tale Greenrgb(132, 206, 101)hsl(102, 52%, 60%)
Corfu Watersrgb(0, 139, 172)hsl(192, 100%, 34%)
Prunellargb(134, 65, 136)hsl(298, 35%, 39%)

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.

  • Aa5.41:1 Good#FFB99E on #7E3206
  • Aa5.41:1 Good#7E3206 on #FFB99E
  • Aa4.69:1 Good#7E3206 on #84CE65
  • Aa4.69:1 Good#84CE65 on #7E3206
  • Aa4.06:1 Poor#FFB99E on #864188
  • Aa4.06:1 Poor#864188 on #FFB99E
  • Aa3.52:1 Poor#84CE65 on #864188
  • Aa3.52:1 Poor#864188 on #84CE65

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Cream Puff to Prunella — https://swatchly.xyz/palette/ffb99e-7e3206-84ce65-008bac-864188 */
:root {
  --cream-puff: #ffb99e;
  --caponata: #7e3206;
  --fairy-tale-green: #84ce65;
  --corfu-waters: #008bac;
  --prunella: #864188;
}

Tailwind CSS v4

/* Cream Puff to Prunella — https://swatchly.xyz/palette/ffb99e-7e3206-84ce65-008bac-864188 */
@theme {
  --color-cream-puff: #ffb99e;
  --color-cream-puff-50: #fff9f7;
  --color-cream-puff-100: #ffefe9;
  --color-cream-puff-200: #ffd7c7;
  --color-cream-puff-300: #ffb99e;
  --color-cream-puff-400: #d89981;
  --color-cream-puff-500: #bb7b61;
  --color-cream-puff-600: #9c5e46;
  --color-cream-puff-700: #7f4731;
  --color-cream-puff-800: #653521;
  --color-cream-puff-900: #4e2616;
  --color-cream-puff-950: #33160a;
  --color-caponata: #7e3206;
  --color-caponata-50: #fff2ed;
  --color-caponata-100: #ffe5da;
  --color-caponata-200: #ffc8b0;
  --color-caponata-300: #f5a987;
  --color-caponata-400: #d78560;
  --color-caponata-500: #b86742;
  --color-caponata-600: #984c28;
  --color-caponata-700: #7e3206;
  --color-caponata-800: #622809;
  --color-caponata-900: #4d1d03;
  --color-caponata-950: #320f01;
  --color-fairy-tale-green: #84ce65;
  --color-fairy-tale-green-50: #d4ffc3;
  --color-fairy-tale-green-100: #c3f5b0;
  --color-fairy-tale-green-200: #a8e291;
  --color-fairy-tale-green-300: #84ce65;
  --color-fairy-tale-green-400: #68af49;
  --color-fairy-tale-green-500: #4d9529;
  --color-fairy-tale-green-600: #357a06;
  --color-fairy-tale-green-700: #286200;
  --color-fairy-tale-green-800: #1e4e00;
  --color-fairy-tale-green-900: #163d00;
  --color-fairy-tale-green-950: #0b2700;
  --color-corfu-waters: #008bac;
  --color-corfu-waters-50: #e3f7ff;
  --color-corfu-waters-100: #c7f0ff;
  --color-corfu-waters-200: #93e0fb;
  --color-corfu-waters-300: #6fc9e7;
  --color-corfu-waters-400: #3da8c9;
  --color-corfu-waters-500: #008bac;
  --color-corfu-waters-600: #00708b;
  --color-corfu-waters-700: #00596f;
  --color-corfu-waters-800: #004658;
  --color-corfu-waters-900: #003645;
  --color-corfu-waters-950: #00222d;
  --color-prunella: #864188;
  --color-prunella-50: #ffefff;
  --color-prunella-100: #ffdcff;
  --color-prunella-200: #f7bcf7;
  --color-prunella-300: #e2a0e3;
  --color-prunella-400: #c37bc4;
  --color-prunella-500: #a45da6;
  --color-prunella-600: #864188;
  --color-prunella-700: #6c316e;
  --color-prunella-800: #572358;
  --color-prunella-900: #451946;
  --color-prunella-950: #2d0d2e;
}

Similar palettes