Leafy to Pink Palazzo Color Palette

About this palette

Leafy to Pink Palazzo is a 5-color cool, vintage palette: #5D986B (Leafy), #AA4B30 (Barbarossa), #D8E1FF (Puffy Cloud), #414368 (Genie), #DF9F8C (Pink Palazzo). It mixes green, red, blue, purple tones and feels cool overall. The strongest text pairing is #D8E1FF on #414368 with a contrast ratio of 7.24:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Leafy	rgb(93, 152, 107)	hsl(134, 24%, 48%)
Barbarossa	rgb(170, 75, 48)	hsl(13, 56%, 43%)
Puffy Cloud	rgb(216, 225, 255)	hsl(226, 100%, 92%)
Genie	rgb(65, 67, 104)	hsl(237, 23%, 33%)
Pink Palazzo	rgb(223, 159, 140)	hsl(14, 56%, 71%)

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.

Aa7.24:1 Very good#D8E1FF on #414368
Aa7.24:1 Very good#414368 on #D8E1FF
Aa4.29:1 Poor#AA4B30 on #D8E1FF
Aa4.29:1 Poor#D8E1FF on #AA4B30
Aa4.25:1 Poor#414368 on #DF9F8C
Aa4.25:1 Poor#DF9F8C on #414368

Color blindness preview

CSS variables

/* Leafy to Pink Palazzo — https://swatchly.xyz/palette/5d986b-aa4b30-d8e1ff-414368-df9f8c */
:root {
  --leafy: #5d986b;
  --barbarossa: #aa4b30;
  --puffy-cloud: #d8e1ff;
  --genie: #414368;
  --pink-palazzo: #df9f8c;
}

Tailwind CSS v4

/* Leafy to Pink Palazzo — https://swatchly.xyz/palette/5d986b-aa4b30-d8e1ff-414368-df9f8c */
@theme {
  --color-leafy: #5d986b;
  --color-leafy-50: #e0ffe6;
  --color-leafy-100: #d2f7d9;
  --color-leafy-200: #b9e6c2;
  --color-leafy-300: #9ed1a9;
  --color-leafy-400: #7ab387;
  --color-leafy-500: #5d986b;
  --color-leafy-600: #437c51;
  --color-leafy-700: #2e643d;
  --color-leafy-800: #1f4f2d;
  --color-leafy-900: #143d20;
  --color-leafy-950: #092612;
  --color-barbarossa: #aa4b30;
  --color-barbarossa-50: #fff2ee;
  --color-barbarossa-100: #ffe5dd;
  --color-barbarossa-200: #ffc9ba;
  --color-barbarossa-300: #ffa88f;
  --color-barbarossa-400: #e58368;
  --color-barbarossa-500: #c8664b;
  --color-barbarossa-600: #aa4b30;
  --color-barbarossa-700: #8c371e;
  --color-barbarossa-800: #712710;
  --color-barbarossa-900: #5a1b07;
  --color-barbarossa-950: #3b0e02;
  --color-puffy-cloud: #d8e1ff;
  --color-puffy-cloud-50: #e7edff;
  --color-puffy-cloud-100: #d8e1ff;
  --color-puffy-cloud-200: #c8cfe6;
  --color-puffy-cloud-300: #b2bad4;
  --color-puffy-cloud-400: #949cb7;
  --color-puffy-cloud-500: #7a829d;
  --color-puffy-cloud-600: #626983;
  --color-puffy-cloud-700: #4e546b;
  --color-puffy-cloud-800: #3c4156;
  --color-puffy-cloud-900: #2d3243;
  --color-puffy-cloud-950: #1b1f2b;
  --color-genie: #414368;
  --color-genie-50: #f3f4ff;
  --color-genie-100: #e7e9ff;
  --color-genie-200: #d1d5f6;
  --color-genie-300: #bbbfe4;
  --color-genie-400: #9ca0c8;
  --color-genie-500: #8285ae;
  --color-genie-600: #686b93;
  --color-genie-700: #53567a;
  --color-genie-800: #414368;
  --color-genie-900: #32344f;
  --color-genie-950: #1f2034;
  --color-pink-palazzo: #df9f8c;
  --color-pink-palazzo-50: #fff9f7;
  --color-pink-palazzo-100: #ffefeb;
  --color-pink-palazzo-200: #ffd8cd;
  --color-pink-palazzo-300: #f5c0b0;
  --color-pink-palazzo-400: #df9f8c;
  --color-pink-palazzo-500: #be816f;
  --color-pink-palazzo-600: #9f6453;
  --color-pink-palazzo-700: #814c3c;
  --color-pink-palazzo-800: #67382b;
  --color-pink-palazzo-900: #50291d;
  --color-pink-palazzo-950: #32170f;
}