Black Stallion to Rocky Racoon Color Palette

About this palette

Black Stallion to Rocky Racoon is a 4-color vintage palette: #081A23 (Black Stallion), #734B2D (Coffee), #A1D0FF (Baby Blue), #AF7D42 (Rocky Racoon). It mixes black, brown, blue, orange tones and feels warm overall. The strongest text pairing is #081A23 on #A1D0FF with a contrast ratio of 10.98:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Stallion	rgb(8, 26, 35)	hsl(200, 63%, 8%)
Coffee	rgb(115, 75, 45)	hsl(26, 44%, 31%)
Baby Blue	rgb(161, 208, 255)	hsl(210, 100%, 82%)
Rocky Racoon	rgb(175, 125, 66)	hsl(32, 45%, 47%)

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.98:1 Very good#081A23 on #A1D0FF
Aa10.98:1 Very good#A1D0FF on #081A23
Aa4.93:1 Good#081A23 on #AF7D42
Aa4.93:1 Good#AF7D42 on #081A23
Aa4.68:1 Good#734B2D on #A1D0FF
Aa4.68:1 Good#A1D0FF on #734B2D

Color blindness preview

CSS variables

/* Black Stallion to Rocky Racoon — https://swatchly.xyz/palette/081a23-734b2d-a1d0ff-af7d42 */
:root {
  --black-stallion: #081a23;
  --coffee: #734b2d;
  --baby-blue: #a1d0ff;
  --rocky-racoon: #af7d42;
}

Tailwind CSS v4

/* Black Stallion to Rocky Racoon — https://swatchly.xyz/palette/081a23-734b2d-a1d0ff-af7d42 */
@theme {
  --color-black-stallion: #081a23;
  --color-black-stallion-50: #ebf7fe;
  --color-black-stallion-100: #e0eef6;
  --color-black-stallion-200: #cadae4;
  --color-black-stallion-300: #b1c4cf;
  --color-black-stallion-400: #90a5b1;
  --color-black-stallion-500: #738894;
  --color-black-stallion-600: #586c77;
  --color-black-stallion-700: #42545d;
  --color-black-stallion-800: #303f47;
  --color-black-stallion-900: #222e35;
  --color-black-stallion-950: #081a23;
  --color-coffee: #734b2d;
  --color-coffee-50: #fff2ea;
  --color-coffee-100: #ffe6d4;
  --color-coffee-200: #f3d0b7;
  --color-coffee-300: #e0b89c;
  --color-coffee-400: #c39779;
  --color-coffee-500: #a77c5d;
  --color-coffee-600: #8b6244;
  --color-coffee-700: #734b2d;
  --color-coffee-800: #5a3a22;
  --color-coffee-900: #472c17;
  --color-coffee-950: #2e1a0b;
  --color-baby-blue: #a1d0ff;
  --color-baby-blue-50: #f7fbff;
  --color-baby-blue-100: #e8f4ff;
  --color-baby-blue-200: #c8e3ff;
  --color-baby-blue-300: #a1d0ff;
  --color-baby-blue-400: #83aed9;
  --color-baby-blue-500: #6491bc;
  --color-baby-blue-600: #49749e;
  --color-baby-blue-700: #335b81;
  --color-baby-blue-800: #234667;
  --color-baby-blue-900: #173551;
  --color-baby-blue-950: #0b2135;
  --color-rocky-racoon: #af7d42;
  --color-rocky-racoon-50: #fff3e7;
  --color-rocky-racoon-100: #ffe8cf;
  --color-rocky-racoon-200: #f9d1a6;
  --color-rocky-racoon-300: #e6b988;
  --color-rocky-racoon-400: #ca9961;
  --color-rocky-racoon-500: #af7d42;
  --color-rocky-racoon-600: #926227;
  --color-rocky-racoon-700: #774c11;
  --color-rocky-racoon-800: #5f3a01;
  --color-rocky-racoon-900: #4a2c00;
  --color-rocky-racoon-950: #301a00;
}