Drover to Black Box Color Palette

About this palette

Drover to Black Box is a 5-color warm palette: #F8E996 (Drover), #00C5DB (Caribbean Blue), #947400 (Glazed Chestnut), #8A2A6F (Violet Vixen), #002930 (Black Box). It mixes yellow, turquoise, red tones and feels warm overall. The strongest text pairing is #F8E996 on #002930 with a contrast ratio of 12.57:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Drover	rgb(248, 233, 150)	hsl(51, 87%, 78%)
Caribbean Blue	rgb(0, 197, 219)	hsl(186, 100%, 43%)
Glazed Chestnut	rgb(148, 116, 0)	hsl(47, 100%, 29%)
Violet Vixen	rgb(138, 42, 111)	hsl(317, 53%, 35%)
Black Box	rgb(0, 41, 48)	hsl(189, 100%, 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.

Aa12.57:1 Super#F8E996 on #002930
Aa12.57:1 Super#002930 on #F8E996
Aa7.36:1 Very good#00C5DB on #002930
Aa7.36:1 Very good#002930 on #00C5DB
Aa6.47:1 Good#F8E996 on #8A2A6F
Aa6.47:1 Good#8A2A6F on #F8E996
Aa3.79:1 Poor#00C5DB on #8A2A6F
Aa3.79:1 Poor#8A2A6F on #00C5DB

Color blindness preview

CSS variables

/* Drover to Black Box — https://swatchly.xyz/palette/f8e996-00c5db-947400-8a2a6f-002930 */
:root {
  --drover: #f8e996;
  --caribbean-blue: #00c5db;
  --glazed-chestnut: #947400;
  --violet-vixen: #8a2a6f;
  --black-box: #002930;
}

Tailwind CSS v4

/* Drover to Black Box — https://swatchly.xyz/palette/f8e996-00c5db-947400-8a2a6f-002930 */
@theme {
  --color-drover: #f8e996;
  --color-drover-50: #fbf3c5;
  --color-drover-100: #f8e996;
  --color-drover-200: #e1d699;
  --color-drover-300: #ccc07b;
  --color-drover-400: #afa153;
  --color-drover-500: #948632;
  --color-drover-600: #7a6c13;
  --color-drover-700: #625500;
  --color-drover-800: #4d4300;
  --color-drover-900: #3b3300;
  --color-drover-950: #251f00;
  --color-caribbean-blue: #00c5db;
  --color-caribbean-blue-50: #f0fdff;
  --color-caribbean-blue-100: #d9f9ff;
  --color-caribbean-blue-200: #9cf1ff;
  --color-caribbean-blue-300: #71e0f1;
  --color-caribbean-blue-400: #00c5db;
  --color-caribbean-blue-500: #00a4b6;
  --color-caribbean-blue-600: #008392;
  --color-caribbean-blue-700: #006774;
  --color-caribbean-blue-800: #00505a;
  --color-caribbean-blue-900: #003c44;
  --color-caribbean-blue-950: #00242a;
  --color-glazed-chestnut: #947400;
  --color-glazed-chestnut-50: #fff5da;
  --color-glazed-chestnut-100: #ffecbc;
  --color-glazed-chestnut-200: #f2da9c;
  --color-glazed-chestnut-300: #e1c57d;
  --color-glazed-chestnut-400: #c6a753;
  --color-glazed-chestnut-500: #ad8d2f;
  --color-glazed-chestnut-600: #947400;
  --color-glazed-chestnut-700: #765c00;
  --color-glazed-chestnut-800: #5c4700;
  --color-glazed-chestnut-900: #473600;
  --color-glazed-chestnut-950: #2d2100;
  --color-violet-vixen: #8a2a6f;
  --color-violet-vixen-50: #fff0f9;
  --color-violet-vixen-100: #ffe1f3;
  --color-violet-vixen-200: #ffc2e8;
  --color-violet-vixen-300: #fa9fda;
  --color-violet-vixen-400: #de7bbd;
  --color-violet-vixen-500: #c15ea2;
  --color-violet-vixen-600: #a34386;
  --color-violet-vixen-700: #8a2a6f;
  --color-violet-vixen-800: #6d1f57;
  --color-violet-vixen-900: #571444;
  --color-violet-vixen-950: #39082c;
  --color-black-box: #002930;
  --color-black-box-50: #e3faff;
  --color-black-box-100: #d7f1f6;
  --color-black-box-200: #c0dee4;
  --color-black-box-300: #a5c8cf;
  --color-black-box-400: #83a9b1;
  --color-black-box-500: #688f97;
  --color-black-box-600: #4f757c;
  --color-black-box-700: #3b5e65;
  --color-black-box-800: #2c4b52;
  --color-black-box-900: #203b41;
  --color-black-box-950: #002930;
}