Alligator Gladiator to Freezy Breezy Color Palette

About this palette

Alligator Gladiator to Freezy Breezy is a 4-color muted, cool, gradient palette: #464523 (Alligator Gladiator), #637963 (Camping Trip), #80B0A7 (Beau Monde), #9DEBEF (Freezy Breezy). It mixes brown, green, turquoise tones and feels cool overall. The strongest text pairing is #464523 on #9DEBEF with a contrast ratio of 7.29:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Alligator Gladiator	rgb(70, 69, 35)	hsl(58, 33%, 21%)
Camping Trip	rgb(99, 121, 99)	hsl(120, 10%, 43%)
Beau Monde	rgb(128, 176, 167)	hsl(169, 23%, 60%)
Freezy Breezy	rgb(157, 235, 239)	hsl(183, 72%, 78%)

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.29:1 Very good#464523 on #9DEBEF
Aa7.29:1 Very good#9DEBEF on #464523
Aa4.07:1 Poor#464523 on #80B0A7
Aa4.07:1 Poor#80B0A7 on #464523
Aa3.50:1 Poor#637963 on #9DEBEF
Aa3.50:1 Poor#9DEBEF on #637963

Color blindness preview

CSS variables

/* Alligator Gladiator to Freezy Breezy — https://swatchly.xyz/palette/464523-637963-80b0a7-9debef */
:root {
  --alligator-gladiator: #464523;
  --camping-trip: #637963;
  --beau-monde: #80b0a7;
  --freezy-breezy: #9debef;
}

Tailwind CSS v4

/* Alligator Gladiator to Freezy Breezy — https://swatchly.xyz/palette/464523-637963-80b0a7-9debef */
@theme {
  --color-alligator-gladiator: #464523;
  --color-alligator-gladiator-50: #f7f7e1;
  --color-alligator-gladiator-100: #ededd5;
  --color-alligator-gladiator-200: #dadabd;
  --color-alligator-gladiator-300: #c4c4a3;
  --color-alligator-gladiator-400: #a5a481;
  --color-alligator-gladiator-500: #8a8965;
  --color-alligator-gladiator-600: #6f6f4c;
  --color-alligator-gladiator-700: #595838;
  --color-alligator-gladiator-800: #464523;
  --color-alligator-gladiator-900: #35351d;
  --color-alligator-gladiator-950: #212110;
  --color-camping-trip: #637963;
  --color-camping-trip-50: #ecfaec;
  --color-camping-trip-100: #e2f1e2;
  --color-camping-trip-200: #cee0ce;
  --color-camping-trip-300: #b7cbb7;
  --color-camping-trip-400: #97ad97;
  --color-camping-trip-500: #7c937c;
  --color-camping-trip-600: #637963;
  --color-camping-trip-700: #4d614d;
  --color-camping-trip-800: #3a4c3a;
  --color-camping-trip-900: #2b3a2b;
  --color-camping-trip-950: #1a241a;
  --color-beau-monde: #80b0a7;
  --color-beau-monde-50: #e3fdf8;
  --color-beau-monde-100: #d7f4ee;
  --color-beau-monde-200: #bfe3db;
  --color-beau-monde-300: #a5cec6;
  --color-beau-monde-400: #80b0a7;
  --color-beau-monde-500: #65948b;
  --color-beau-monde-600: #4a7870;
  --color-beau-monde-700: #366059;
  --color-beau-monde-800: #264b45;
  --color-beau-monde-900: #1a3a35;
  --color-beau-monde-950: #0d2420;
  --color-freezy-breezy: #9debef;
  --color-freezy-breezy-50: #e3feff;
  --color-freezy-breezy-100: #ccf8fa;
  --color-freezy-breezy-200: #9debef;
  --color-freezy-breezy-300: #92d1d4;
  --color-freezy-breezy-400: #69b2b6;
  --color-freezy-breezy-500: #48969a;
  --color-freezy-breezy-600: #2b7a7e;
  --color-freezy-breezy-700: #136165;
  --color-freezy-breezy-800: #014c50;
  --color-freezy-breezy-900: #003b3e;
  --color-freezy-breezy-950: #002527;
}