Alligator to Denim Color Palette

About this palette

Alligator to Denim is a 5-color warm palette: #8D6600 (Alligator), #FFE0B7 (White Strawberry), #6095DD (Blue Bay), #F0BF3E (Nicotine Gold), #1C41AE (Denim). It mixes brown, orange, blue, yellow tones and feels warm overall. The strongest text pairing is #FFE0B7 on #1C41AE with a contrast ratio of 6.87:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Alligator	rgb(141, 102, 0)	hsl(43, 100%, 28%)
White Strawberry	rgb(255, 224, 183)	hsl(34, 100%, 86%)
Blue Bay	rgb(96, 149, 221)	hsl(215, 65%, 62%)
Nicotine Gold	rgb(240, 191, 62)	hsl(43, 86%, 59%)
Denim	rgb(28, 65, 174)	hsl(225, 72%, 40%)

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.

Aa6.87:1 Good#FFE0B7 on #1C41AE
Aa6.87:1 Good#1C41AE on #FFE0B7
Aa5.06:1 Good#F0BF3E on #1C41AE
Aa5.06:1 Good#1C41AE on #F0BF3E
Aa4.12:1 Poor#8D6600 on #FFE0B7
Aa4.12:1 Poor#FFE0B7 on #8D6600
Aa3.03:1 Poor#8D6600 on #F0BF3E
Aa3.03:1 Poor#F0BF3E on #8D6600

Color blindness preview

CSS variables

/* Alligator to Denim — https://swatchly.xyz/palette/8d6600-ffe0b7-6095dd-f0bf3e-1c41ae */
:root {
  --alligator: #8d6600;
  --white-strawberry: #ffe0b7;
  --blue-bay: #6095dd;
  --nicotine-gold: #f0bf3e;
  --denim: #1c41ae;
}

Tailwind CSS v4

/* Alligator to Denim — https://swatchly.xyz/palette/8d6600-ffe0b7-6095dd-f0bf3e-1c41ae */
@theme {
  --color-alligator: #8d6600;
  --color-alligator-50: #fff4e0;
  --color-alligator-100: #ffe9c0;
  --color-alligator-200: #f3d49a;
  --color-alligator-300: #e0bc7a;
  --color-alligator-400: #c49c50;
  --color-alligator-500: #a9802d;
  --color-alligator-600: #8d6600;
  --color-alligator-700: #705000;
  --color-alligator-800: #583e00;
  --color-alligator-900: #443000;
  --color-alligator-950: #2b1d00;
  --color-white-strawberry: #ffe0b7;
  --color-white-strawberry-50: #ffedd6;
  --color-white-strawberry-100: #ffe0b7;
  --color-white-strawberry-200: #e6cfb0;
  --color-white-strawberry-300: #d3b996;
  --color-white-strawberry-400: #b69a74;
  --color-white-strawberry-500: #9b7f59;
  --color-white-strawberry-600: #806641;
  --color-white-strawberry-700: #69502f;
  --color-white-strawberry-800: #533e20;
  --color-white-strawberry-900: #412f16;
  --color-white-strawberry-950: #291d0a;
  --color-blue-bay: #6095dd;
  --color-blue-bay-50: #f3f8ff;
  --color-blue-bay-100: #e7f1ff;
  --color-blue-bay-200: #cbe1ff;
  --color-blue-bay-300: #a8cdff;
  --color-blue-bay-400: #7daff4;
  --color-blue-bay-500: #6095dd;
  --color-blue-bay-600: #4477bc;
  --color-blue-bay-700: #2d5d9d;
  --color-blue-bay-800: #1d4880;
  --color-blue-bay-900: #113665;
  --color-blue-bay-950: #062042;
  --color-nicotine-gold: #f0bf3e;
  --color-nicotine-gold-50: #fff7e6;
  --color-nicotine-gold-100: #ffedc5;
  --color-nicotine-gold-200: #fbd887;
  --color-nicotine-gold-300: #f0bf3e;
  --color-nicotine-gold-400: #cc9f1c;
  --color-nicotine-gold-500: #ab8300;
  --color-nicotine-gold-600: #8a6900;
  --color-nicotine-gold-700: #6d5200;
  --color-nicotine-gold-800: #554000;
  --color-nicotine-gold-900: #413000;
  --color-nicotine-gold-950: #291d00;
  --color-denim: #1c41ae;
  --color-denim-50: #f0f5ff;
  --color-denim-100: #e2ebff;
  --color-denim-200: #c3d6ff;
  --color-denim-300: #9fbdff;
  --color-denim-400: #6d99ff;
  --color-denim-500: #4b79eb;
  --color-denim-600: #335cc8;
  --color-denim-700: #1c41ae;
  --color-denim-800: #163387;
  --color-denim-900: #0e266d;
  --color-denim-950: #061649;
}