Black Box to Dusty Boots Color Palette

About this palette

Black Box to Dusty Boots is a 4-color vintage palette: #002B2C (Black Box), #624C80 (Sumptuous Purple), #D0883E (Peru), #F7C18B (Dusty Boots). It mixes turquoise, purple, orange tones and feels balanced overall. The strongest text pairing is #002B2C on #F7C18B with a contrast ratio of 9.38:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Box	rgb(0, 43, 44)	hsl(181, 100%, 9%)
Sumptuous Purple	rgb(98, 76, 128)	hsl(265, 25%, 40%)
Peru	rgb(208, 136, 62)	hsl(30, 61%, 53%)
Dusty Boots	rgb(247, 193, 139)	hsl(30, 87%, 76%)

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.

Aa9.38:1 Very good#002B2C on #F7C18B
Aa9.38:1 Very good#F7C18B on #002B2C
Aa5.26:1 Good#002B2C on #D0883E
Aa5.26:1 Good#D0883E on #002B2C
Aa4.52:1 Good#624C80 on #F7C18B
Aa4.52:1 Good#F7C18B on #624C80

Color blindness preview

CSS variables

/* Black Box to Dusty Boots — https://swatchly.xyz/palette/002b2c-624c80-d0883e-f7c18b */
:root {
  --black-box: #002b2c;
  --sumptuous-purple: #624c80;
  --peru: #d0883e;
  --dusty-boots: #f7c18b;
}

Tailwind CSS v4

/* Black Box to Dusty Boots — https://swatchly.xyz/palette/002b2c-624c80-d0883e-f7c18b */
@theme {
  --color-black-box: #002b2c;
  --color-black-box-50: #e3fbfb;
  --color-black-box-100: #d7f1f1;
  --color-black-box-200: #bfdfdf;
  --color-black-box-300: #a5c9c9;
  --color-black-box-400: #83aaab;
  --color-black-box-500: #679091;
  --color-black-box-600: #4f7677;
  --color-black-box-700: #3b6060;
  --color-black-box-800: #2c4d4d;
  --color-black-box-900: #213d3e;
  --color-black-box-950: #002b2c;
  --color-sumptuous-purple: #624c80;
  --color-sumptuous-purple-50: #f7f3ff;
  --color-sumptuous-purple-100: #efe6ff;
  --color-sumptuous-purple-200: #e0cffb;
  --color-sumptuous-purple-300: #cbb7ea;
  --color-sumptuous-purple-400: #ad97ce;
  --color-sumptuous-purple-500: #937cb4;
  --color-sumptuous-purple-600: #786297;
  --color-sumptuous-purple-700: #624c80;
  --color-sumptuous-purple-800: #4d3b65;
  --color-sumptuous-purple-900: #3b2c50;
  --color-sumptuous-purple-950: #251a34;
  --color-peru: #d0883e;
  --color-peru-50: #fff0e2;
  --color-peru-100: #ffe1c7;
  --color-peru-200: #ffc691;
  --color-peru-300: #edab6d;
  --color-peru-400: #d0883e;
  --color-peru-500: #b46e1e;
  --color-peru-600: #955600;
  --color-peru-700: #774400;
  --color-peru-800: #5f3500;
  --color-peru-900: #4b2800;
  --color-peru-950: #311800;
  --color-dusty-boots: #f7c18b;
  --color-dusty-boots-50: #ffead6;
  --color-dusty-boots-100: #ffdbb8;
  --color-dusty-boots-200: #f7c18b;
  --color-dusty-boots-300: #ddae7f;
  --color-dusty-boots-400: #c18f5c;
  --color-dusty-boots-500: #a77541;
  --color-dusty-boots-600: #8c5d29;
  --color-dusty-boots-700: #734917;
  --color-dusty-boots-800: #5e390a;
  --color-dusty-boots-900: #4a2a02;
  --color-dusty-boots-950: #301900;
}