Summer’s End to Alligator Gladiator Color Palette

About this palette

Summer’s End to Alligator Gladiator is a 4-color warm, earthy, vintage palette: #DF905D (Summer’s End), #F6DDBF (Toes in the Sand), #A45837 (Garfield), #46460F (Alligator Gladiator). It mixes orange, brown tones and feels warm overall. The strongest text pairing is #F6DDBF on #46460F with a contrast ratio of 7.47:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Summer’s End	rgb(223, 144, 93)	hsl(24, 67%, 62%)
Toes in the Sand	rgb(246, 221, 191)	hsl(33, 75%, 86%)
Garfield	rgb(164, 88, 55)	hsl(18, 50%, 43%)
Alligator Gladiator	rgb(70, 70, 15)	hsl(60, 65%, 17%)

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.47:1 Very good#F6DDBF on #46460F
Aa7.47:1 Very good#46460F on #F6DDBF
Aa3.97:1 Poor#F6DDBF on #A45837
Aa3.97:1 Poor#A45837 on #F6DDBF
Aa3.87:1 Poor#DF905D on #46460F
Aa3.87:1 Poor#46460F on #DF905D

Color blindness preview

CSS variables

/* Summer’s End to Alligator Gladiator — https://swatchly.xyz/palette/df905d-f6ddbf-a45837-46460f */
:root {
  --summer-s-end: #df905d;
  --toes-in-the-sand: #f6ddbf;
  --garfield: #a45837;
  --alligator-gladiator: #46460f;
}

Tailwind CSS v4

/* Summer’s End to Alligator Gladiator — https://swatchly.xyz/palette/df905d-f6ddbf-a45837-46460f */
@theme {
  --color-summer-s-end: #df905d;
  --color-summer-s-end-50: #fff4ee;
  --color-summer-s-end-100: #ffe8db;
  --color-summer-s-end-200: #ffcfb2;
  --color-summer-s-end-300: #f7b388;
  --color-summer-s-end-400: #df905d;
  --color-summer-s-end-500: #c07441;
  --color-summer-s-end-600: #a15925;
  --color-summer-s-end-700: #85430d;
  --color-summer-s-end-800: #6b3100;
  --color-summer-s-end-900: #532500;
  --color-summer-s-end-950: #351500;
  --color-toes-in-the-sand: #f6ddbf;
  --color-toes-in-the-sand-50: #faead8;
  --color-toes-in-the-sand-100: #f6ddbf;
  --color-toes-in-the-sand-200: #dfccb5;
  --color-toes-in-the-sand-300: #ccb79d;
  --color-toes-in-the-sand-400: #af997d;
  --color-toes-in-the-sand-500: #967f63;
  --color-toes-in-the-sand-600: #7c664c;
  --color-toes-in-the-sand-700: #655139;
  --color-toes-in-the-sand-800: #503f2a;
  --color-toes-in-the-sand-900: #3e301e;
  --color-toes-in-the-sand-950: #271d10;
  --color-garfield: #a45837;
  --color-garfield-50: #fff2ed;
  --color-garfield-100: #ffe6dc;
  --color-garfield-200: #ffccb7;
  --color-garfield-300: #f7b092;
  --color-garfield-400: #dc8e6e;
  --color-garfield-500: #c17251;
  --color-garfield-600: #a45837;
  --color-garfield-700: #874224;
  --color-garfield-800: #6d3115;
  --color-garfield-900: #56230b;
  --color-garfield-950: #381404;
  --color-alligator-gladiator: #46460f;
  --color-alligator-gladiator-50: #f6f8d9;
  --color-alligator-gladiator-100: #edeecc;
  --color-alligator-gladiator-200: #d9dbb2;
  --color-alligator-gladiator-300: #c3c596;
  --color-alligator-gladiator-400: #a4a672;
  --color-alligator-gladiator-500: #898b55;
  --color-alligator-gladiator-600: #6f703c;
  --color-alligator-gladiator-700: #585929;
  --color-alligator-gladiator-800: #46460f;
  --color-alligator-gladiator-900: #353611;
  --color-alligator-gladiator-950: #212107;
}