Puffy Cloud to Fennel Flower Color Palette

About this palette

Puffy Cloud to Fennel Flower is a 4-color palette: #D2E2FF (Puffy Cloud), #534800 (Alligator Gladiator), #B85300 (Bloodhound), #81AAF9 (Fennel Flower). It mixes blue, brown tones and feels balanced overall. The strongest text pairing is #D2E2FF on #534800 with a contrast ratio of 7.00:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Puffy Cloud	rgb(210, 226, 255)	hsl(219, 100%, 91%)
Alligator Gladiator	rgb(83, 72, 0)	hsl(52, 100%, 16%)
Bloodhound	rgb(184, 83, 0)	hsl(27, 100%, 36%)
Fennel Flower	rgb(129, 170, 249)	hsl(220, 91%, 74%)

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.00:1 Good#D2E2FF on #534800
Aa7.00:1 Good#534800 on #D2E2FF
Aa3.94:1 Poor#534800 on #81AAF9
Aa3.94:1 Poor#81AAF9 on #534800
Aa3.76:1 Poor#D2E2FF on #B85300
Aa3.76:1 Poor#B85300 on #D2E2FF

Color blindness preview

CSS variables

/* Puffy Cloud to Fennel Flower — https://swatchly.xyz/palette/d2e2ff-534800-b85300-81aaf9 */
:root {
  --puffy-cloud: #d2e2ff;
  --alligator-gladiator: #534800;
  --bloodhound: #b85300;
  --fennel-flower: #81aaf9;
}

Tailwind CSS v4

/* Puffy Cloud to Fennel Flower — https://swatchly.xyz/palette/d2e2ff-534800-b85300-81aaf9 */
@theme {
  --color-puffy-cloud: #d2e2ff;
  --color-puffy-cloud-50: #fafcff;
  --color-puffy-cloud-100: #edf4ff;
  --color-puffy-cloud-200: #d2e2ff;
  --color-puffy-cloud-300: #bdc9e1;
  --color-puffy-cloud-400: #9aa8c2;
  --color-puffy-cloud-500: #7d8ba6;
  --color-puffy-cloud-600: #616f88;
  --color-puffy-cloud-700: #4b576e;
  --color-puffy-cloud-800: #384356;
  --color-puffy-cloud-900: #2a3343;
  --color-puffy-cloud-950: #191f2b;
  --color-alligator-gladiator: #534800;
  --color-alligator-gladiator-50: #fcf6d4;
  --color-alligator-gladiator-100: #f3edc6;
  --color-alligator-gladiator-200: #e1d9ab;
  --color-alligator-gladiator-300: #cdc38f;
  --color-alligator-gladiator-400: #b0a56a;
  --color-alligator-gladiator-500: #958a4d;
  --color-alligator-gladiator-600: #7b7134;
  --color-alligator-gladiator-700: #655b21;
  --color-alligator-gladiator-800: #534800;
  --color-alligator-gladiator-900: #3f3708;
  --color-alligator-gladiator-950: #282302;
  --color-bloodhound: #b85300;
  --color-bloodhound-50: #fff2ec;
  --color-bloodhound-100: #ffe7db;
  --color-bloodhound-200: #ffcfb6;
  --color-bloodhound-300: #ffb187;
  --color-bloodhound-400: #ee8a51;
  --color-bloodhound-500: #d46d2d;
  --color-bloodhound-600: #b85300;
  --color-bloodhound-700: #934100;
  --color-bloodhound-800: #743200;
  --color-bloodhound-900: #5a2500;
  --color-bloodhound-950: #3a1500;
  --color-fennel-flower: #81aaf9;
  --color-fennel-flower-50: #f5f9ff;
  --color-fennel-flower-100: #e9f1ff;
  --color-fennel-flower-200: #cddfff;
  --color-fennel-flower-300: #adcaff;
  --color-fennel-flower-400: #81aaf9;
  --color-fennel-flower-500: #658cd8;
  --color-fennel-flower-600: #4a6fb9;
  --color-fennel-flower-700: #35579a;
  --color-fennel-flower-800: #25427d;
  --color-fennel-flower-900: #193163;
  --color-fennel-flower-950: #0c1d40;
}