Majestic Dune to Shadow Play Color Palette

About this palette

Majestic Dune to Shadow Play is a 4-color warm, earthy, vintage, monochromatic, gradient palette: #F7BD7C (Majestic Dune), #B88754 (Deer), #63482B (Florida’s Alligator), #2B1901 (Shadow Play). It mixes orange, brown tones and feels warm overall. The strongest text pairing is #F7BD7C on #2B1901 with a contrast ratio of 10.08:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Majestic Dune	rgb(247, 189, 124)	hsl(32, 88%, 73%)
Deer	rgb(184, 135, 84)	hsl(31, 41%, 53%)
Florida’s Alligator	rgb(99, 72, 43)	hsl(31, 39%, 28%)
Shadow Play	rgb(43, 25, 1)	hsl(34, 95%, 9%)

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.

Aa10.08:1 Very good#F7BD7C on #2B1901
Aa10.08:1 Very good#2B1901 on #F7BD7C
Aa5.34:1 Good#B88754 on #2B1901
Aa5.34:1 Good#2B1901 on #B88754
Aa5.03:1 Good#F7BD7C on #63482B
Aa5.03:1 Good#63482B on #F7BD7C

Color blindness preview

CSS variables

/* Majestic Dune to Shadow Play — https://swatchly.xyz/palette/f7bd7c-b88754-63482b-2b1901 */
:root {
  --majestic-dune: #f7bd7c;
  --deer: #b88754;
  --florida-s-alligator: #63482b;
  --shadow-play: #2b1901;
}

Tailwind CSS v4

/* Majestic Dune to Shadow Play — https://swatchly.xyz/palette/f7bd7c-b88754-63482b-2b1901 */
@theme {
  --color-majestic-dune: #f7bd7c;
  --color-majestic-dune-50: #fff8f2;
  --color-majestic-dune-100: #ffeedc;
  --color-majestic-dune-200: #ffd7ac;
  --color-majestic-dune-300: #f7bd7c;
  --color-majestic-dune-400: #d29d61;
  --color-majestic-dune-500: #b57f3e;
  --color-majestic-dune-600: #97631f;
  --color-majestic-dune-700: #7b4c03;
  --color-majestic-dune-800: #603a00;
  --color-majestic-dune-900: #4a2b00;
  --color-majestic-dune-950: #2f1a00;
  --color-deer: #b88754;
  --color-deer-50: #fff6ed;
  --color-deer-100: #ffecda;
  --color-deer-200: #fcd7b2;
  --color-deer-300: #ebc197;
  --color-deer-400: #d1a272;
  --color-deer-500: #b88754;
  --color-deer-600: #996a37;
  --color-deer-700: #7d5221;
  --color-deer-800: #643e11;
  --color-deer-900: #4e2e06;
  --color-deer-950: #321b01;
  --color-florida-s-alligator: #63482b;
  --color-florida-s-alligator-50: #fff3e7;
  --color-florida-s-alligator-100: #fce7d3;
  --color-florida-s-alligator-200: #ead1b9;
  --color-florida-s-alligator-300: #d4b99d;
  --color-florida-s-alligator-400: #b59779;
  --color-florida-s-alligator-500: #987b5c;
  --color-florida-s-alligator-600: #7b6043;
  --color-florida-s-alligator-700: #63482b;
  --color-florida-s-alligator-800: #4d3822;
  --color-florida-s-alligator-900: #3c2a18;
  --color-florida-s-alligator-950: #26190c;
  --color-shadow-play: #2b1901;
  --color-shadow-play-50: #fff3e5;
  --color-shadow-play-100: #f8e9d6;
  --color-shadow-play-200: #e7d4bf;
  --color-shadow-play-300: #d2bda5;
  --color-shadow-play-400: #b49d82;
  --color-shadow-play-500: #988266;
  --color-shadow-play-600: #7c674d;
  --color-shadow-play-700: #645039;
  --color-shadow-play-800: #4e3e29;
  --color-shadow-play-900: #3c2e1d;
  --color-shadow-play-950: #2b1901;
}