Start generating

Cream Puff to Alligator Gladiator color palette

FDBDA6Cream PuffDFF5FFCotton BollA39BEECold Lips511E00Evil Cigar807100Muddy Brown504400Alligator Gladiator
Open in generator Export PNG, PDF, ASE…

About this palette

Cream Puff to Alligator Gladiator is a 6-color warm, earthy, vintage palette: #FDBDA6 (Cream Puff), #DFF5FF (Cotton Boll), #A39BEE (Cold Lips), #511E00 (Evil Cigar), #807100 (Muddy Brown), #504400 (Alligator Gladiator). It mixes orange, white, purple, brown tones and feels warm overall. The strongest text pairing is #DFF5FF on #511E00 with a contrast ratio of 12.14:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Cream Puffrgb(253, 189, 166)hsl(16, 96%, 82%)
Cotton Bollrgb(223, 245, 255)hsl(199, 100%, 94%)
Cold Lipsrgb(163, 155, 238)hsl(246, 71%, 77%)
Evil Cigarrgb(81, 30, 0)hsl(22, 100%, 16%)
Muddy Brownrgb(128, 113, 0)hsl(53, 100%, 25%)
Alligator Gladiatorrgb(80, 68, 0)hsl(51, 100%, 16%)

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.14:1 Super#DFF5FF on #511E00
  • Aa12.14:1 Super#511E00 on #DFF5FF
  • Aa8.60:1 Very good#DFF5FF on #504400
  • Aa8.60:1 Very good#504400 on #DFF5FF
  • Aa8.47:1 Very good#FDBDA6 on #511E00
  • Aa8.47:1 Very good#511E00 on #FDBDA6
  • Aa6.00:1 Good#FDBDA6 on #504400
  • Aa6.00:1 Good#504400 on #FDBDA6

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Cream Puff to Alligator Gladiator — https://swatchly.xyz/palette/fdbda6-dff5ff-a39bee-511e00-807100-504400 */
:root {
  --cream-puff: #fdbda6;
  --cotton-boll: #dff5ff;
  --cold-lips: #a39bee;
  --evil-cigar: #511e00;
  --muddy-brown: #807100;
  --alligator-gladiator: #504400;
}

Tailwind CSS v4

/* Cream Puff to Alligator Gladiator — https://swatchly.xyz/palette/fdbda6-dff5ff-a39bee-511e00-807100-504400 */
@theme {
  --color-cream-puff: #fdbda6;
  --color-cream-puff-50: #ffeae2;
  --color-cream-puff-100: #ffdacd;
  --color-cream-puff-200: #fdbda6;
  --color-cream-puff-300: #e2aa96;
  --color-cream-puff-400: #c68b76;
  --color-cream-puff-500: #ac715c;
  --color-cream-puff-600: #905945;
  --color-cream-puff-700: #774533;
  --color-cream-puff-800: #613525;
  --color-cream-puff-900: #4c271a;
  --color-cream-puff-950: #31170d;
  --color-cotton-boll: #dff5ff;
  --color-cotton-boll-50: #dff5ff;
  --color-cotton-boll-100: #dceaf1;
  --color-cotton-boll-200: #c8d8df;
  --color-cotton-boll-300: #b0c2cb;
  --color-cotton-boll-400: #90a4ad;
  --color-cotton-boll-500: #758992;
  --color-cotton-boll-600: #5c6f78;
  --color-cotton-boll-700: #475860;
  --color-cotton-boll-800: #36454c;
  --color-cotton-boll-900: #28353b;
  --color-cotton-boll-950: #182125;
  --color-cold-lips: #a39bee;
  --color-cold-lips-50: #f6f6ff;
  --color-cold-lips-100: #edecff;
  --color-cold-lips-200: #d9d7ff;
  --color-cold-lips-300: #c2bdff;
  --color-cold-lips-400: #a39bee;
  --color-cold-lips-500: #877ecf;
  --color-cold-lips-600: #6c63b0;
  --color-cold-lips-700: #554c92;
  --color-cold-lips-800: #423976;
  --color-cold-lips-900: #322a5e;
  --color-cold-lips-950: #1e183d;
  --color-evil-cigar: #511e00;
  --color-evil-cigar-50: #fff2ec;
  --color-evil-cigar-100: #ffe5d9;
  --color-evil-cigar-200: #fccbb5;
  --color-evil-cigar-300: #eab399;
  --color-evil-cigar-400: #cc9175;
  --color-evil-cigar-500: #b07458;
  --color-evil-cigar-600: #925a3f;
  --color-evil-cigar-700: #76442b;
  --color-evil-cigar-800: #5e331d;
  --color-evil-cigar-900: #511e00;
  --color-evil-cigar-950: #2e1508;
  --color-muddy-brown: #807100;
  --color-muddy-brown-50: #fef7c7;
  --color-muddy-brown-100: #f6eeb8;
  --color-muddy-brown-200: #e5db9b;
  --color-muddy-brown-300: #d2c57b;
  --color-muddy-brown-400: #b4a651;
  --color-muddy-brown-500: #9a8b2e;
  --color-muddy-brown-600: #807100;
  --color-muddy-brown-700: #665900;
  --color-muddy-brown-800: #4f4600;
  --color-muddy-brown-900: #3d3500;
  --color-muddy-brown-950: #262100;
  --color-alligator-gladiator: #504400;
  --color-alligator-gladiator-50: #fdf6d5;
  --color-alligator-gladiator-100: #f4ecc7;
  --color-alligator-gladiator-200: #e2d8ac;
  --color-alligator-gladiator-300: #cdc290;
  --color-alligator-gladiator-400: #afa36b;
  --color-alligator-gladiator-500: #94884d;
  --color-alligator-gladiator-600: #7a6e34;
  --color-alligator-gladiator-700: #625721;
  --color-alligator-gladiator-800: #504400;
  --color-alligator-gladiator-900: #3d3409;
  --color-alligator-gladiator-950: #262003;
}

Similar palettes