Start generating

Alligator Gladiator to Kiss color palette

4A4300Alligator Gladiator31859DWaikiki3A1D2FBlack-Hearted356170AtlantisBBC199Beige and SageD389A6Kiss
Open in generator Export PNG, PDF, ASE…

About this palette

Alligator Gladiator to Kiss is a 6-color warm, vintage palette: #4A4300 (Alligator Gladiator), #31859D (Waikiki), #3A1D2F (Black-Hearted), #356170 (Atlantis), #BBC199 (Beige and Sage), #D389A6 (Kiss). It mixes brown, blue, red, green, pink tones and feels warm overall. The strongest text pairing is #3A1D2F on #BBC199 with a contrast ratio of 8.02:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Alligator Gladiatorrgb(74, 67, 0)hsl(54, 100%, 15%)
Waikikirgb(49, 133, 157)hsl(193, 52%, 40%)
Black-Heartedrgb(58, 29, 47)hsl(323, 33%, 17%)
Atlantisrgb(53, 97, 112)hsl(195, 36%, 32%)
Beige and Sagergb(187, 193, 153)hsl(69, 24%, 68%)
Kissrgb(211, 137, 166)hsl(336, 46%, 68%)

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.02:1 Very good#3A1D2F on #BBC199
  • Aa8.02:1 Very good#BBC199 on #3A1D2F
  • Aa5.66:1 Good#3A1D2F on #D389A6
  • Aa5.66:1 Good#D389A6 on #3A1D2F
  • Aa5.35:1 Good#4A4300 on #BBC199
  • Aa5.35:1 Good#BBC199 on #4A4300
  • Aa3.77:1 Poor#4A4300 on #D389A6
  • Aa3.77:1 Poor#D389A6 on #4A4300

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Alligator Gladiator to Kiss — https://swatchly.xyz/palette/4a4300-31859d-3a1d2f-356170-bbc199-d389a6 */
:root {
  --alligator-gladiator: #4a4300;
  --waikiki: #31859d;
  --black-hearted: #3a1d2f;
  --atlantis: #356170;
  --beige-and-sage: #bbc199;
  --kiss: #d389a6;
}

Tailwind CSS v4

/* Alligator Gladiator to Kiss — https://swatchly.xyz/palette/4a4300-31859d-3a1d2f-356170-bbc199-d389a6 */
@theme {
  --color-alligator-gladiator: #4a4300;
  --color-alligator-gladiator-50: #faf7d6;
  --color-alligator-gladiator-100: #f1edc8;
  --color-alligator-gladiator-200: #dedaad;
  --color-alligator-gladiator-300: #c9c390;
  --color-alligator-gladiator-400: #aaa46b;
  --color-alligator-gladiator-500: #8f884e;
  --color-alligator-gladiator-600: #746d34;
  --color-alligator-gladiator-700: #5c5621;
  --color-alligator-gladiator-800: #4a4300;
  --color-alligator-gladiator-900: #38330a;
  --color-alligator-gladiator-950: #232003;
  --color-waikiki: #31859d;
  --color-waikiki-50: #e1f7ff;
  --color-waikiki-100: #c1efff;
  --color-waikiki-200: #9fdbf0;
  --color-waikiki-300: #7dc4da;
  --color-waikiki-400: #53a3bb;
  --color-waikiki-500: #31859d;
  --color-waikiki-600: #166c82;
  --color-waikiki-700: #00576a;
  --color-waikiki-800: #004454;
  --color-waikiki-900: #003543;
  --color-waikiki-950: #00222b;
  --color-black-hearted: #3a1d2f;
  --color-black-hearted-50: #fff0f8;
  --color-black-hearted-100: #fce3f1;
  --color-black-hearted-200: #ebcede;
  --color-black-hearted-300: #d7b6c9;
  --color-black-hearted-400: #b995aa;
  --color-black-hearted-500: #a07c90;
  --color-black-hearted-600: #866377;
  --color-black-hearted-700: #6f4f62;
  --color-black-hearted-800: #5b3f50;
  --color-black-hearted-900: #4b3241;
  --color-black-hearted-950: #3a1d2f;
  --color-atlantis: #356170;
  --color-atlantis-50: #e7f9ff;
  --color-atlantis-100: #d4f1fc;
  --color-atlantis-200: #bddfec;
  --color-atlantis-300: #a3cad8;
  --color-atlantis-400: #81acbc;
  --color-atlantis-500: #6591a1;
  --color-atlantis-600: #4c7787;
  --color-atlantis-700: #356170;
  --color-atlantis-800: #274c58;
  --color-atlantis-900: #1b3b45;
  --color-atlantis-950: #0e252c;
  --color-beige-and-sage: #bbc199;
  --color-beige-and-sage-50: #f2f6de;
  --color-beige-and-sage-100: #e7ebd1;
  --color-beige-and-sage-200: #d2d7b8;
  --color-beige-and-sage-300: #bbc199;
  --color-beige-and-sage-400: #9da27c;
  --color-beige-and-sage-500: #828862;
  --color-beige-and-sage-600: #696e4a;
  --color-beige-and-sage-700: #535737;
  --color-beige-and-sage-800: #414528;
  --color-beige-and-sage-900: #32351d;
  --color-beige-and-sage-950: #1f210f;
  --color-kiss: #d389a6;
  --color-kiss-50: #fff1f6;
  --color-kiss-100: #ffe3ed;
  --color-kiss-200: #ffc6db;
  --color-kiss-300: #eeacc5;
  --color-kiss-400: #d389a6;
  --color-kiss-500: #b56e8a;
  --color-kiss-600: #975470;
  --color-kiss-700: #7c3f59;
  --color-kiss-800: #632e45;
  --color-kiss-900: #4e2235;
  --color-kiss-950: #331321;
}

Similar palettes