Black Stallion to Cold Canada color palette

051D1CBlack Stallion 2A4778Nautical A36F54Pecan DA9F7CBlushing Rose DFFCFFCold Canada

About this palette

Black Stallion to Cold Canada is a 5-color vintage palette: #051D1C (Black Stallion), #2A4778 (Nautical), #A36F54 (Pecan), #DA9F7C (Blushing Rose), #DFFCFF (Cold Canada). It mixes black, blue, orange, white tones and feels warm overall. The strongest text pairing is #051D1C on #DFFCFF with a contrast ratio of 16.27:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Stallion	rgb(5, 29, 28)	hsl(178, 71%, 7%)
Nautical	rgb(42, 71, 120)	hsl(218, 48%, 32%)
Pecan	rgb(163, 111, 84)	hsl(21, 32%, 48%)
Blushing Rose	rgb(218, 159, 124)	hsl(22, 56%, 67%)
Cold Canada	rgb(223, 252, 255)	hsl(186, 100%, 94%)

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.

Aa16.27:1 Super#051D1C on #DFFCFF
Aa16.27:1 Super#DFFCFF on #051D1C
Aa8.59:1 Very good#2A4778 on #DFFCFF
Aa8.59:1 Very good#DFFCFF on #2A4778
Aa7.70:1 Very good#051D1C on #DA9F7C
Aa7.70:1 Very good#DA9F7C on #051D1C
Aa4.14:1 Poor#051D1C on #A36F54
Aa4.14:1 Poor#A36F54 on #051D1C

Color blindness preview

CSS variables

/* Black Stallion to Cold Canada — https://swatchly.xyz/palette/051d1c-2a4778-a36f54-da9f7c-dffcff */
:root {
  --black-stallion: #051d1c;
  --nautical: #2a4778;
  --pecan: #a36f54;
  --blushing-rose: #da9f7c;
  --cold-canada: #dffcff;
}

Tailwind CSS v4

/* Black Stallion to Cold Canada — https://swatchly.xyz/palette/051d1c-2a4778-a36f54-da9f7c-dffcff */
@theme {
  --color-black-stallion: #051d1c;
  --color-black-stallion-50: #e9f9f8;
  --color-black-stallion-100: #deefee;
  --color-black-stallion-200: #c8dcdb;
  --color-black-stallion-300: #afc7c5;
  --color-black-stallion-400: #8ea8a6;
  --color-black-stallion-500: #708b89;
  --color-black-stallion-600: #566f6d;
  --color-black-stallion-700: #405655;
  --color-black-stallion-800: #2e4240;
  --color-black-stallion-900: #21302f;
  --color-black-stallion-950: #051d1c;
  --color-nautical: #2a4778;
  --color-nautical-50: #f0f5ff;
  --color-nautical-100: #e0ecff;
  --color-nautical-200: #c2d9ff;
  --color-nautical-300: #a6c3f4;
  --color-nautical-400: #84a5da;
  --color-nautical-500: #698ac0;
  --color-nautical-600: #5170a4;
  --color-nautical-700: #3e5a89;
  --color-nautical-800: #2a4778;
  --color-nautical-900: #21375b;
  --color-nautical-950: #13223c;
  --color-pecan: #a36f54;
  --color-pecan-50: #fff0e9;
  --color-pecan-100: #ffe1d2;
  --color-pecan-200: #f4c8b1;
  --color-pecan-300: #e0ae95;
  --color-pecan-400: #c18c71;
  --color-pecan-500: #a36f54;
  --color-pecan-600: #87573e;
  --color-pecan-700: #6f432c;
  --color-pecan-800: #59331f;
  --color-pecan-900: #472716;
  --color-pecan-950: #2e170b;
  --color-blushing-rose: #da9f7c;
  --color-blushing-rose-50: #fff8f4;
  --color-blushing-rose-100: #ffeee5;
  --color-blushing-rose-200: #ffd7c0;
  --color-blushing-rose-300: #f1c0a3;
  --color-blushing-rose-400: #da9f7c;
  --color-blushing-rose-500: #ba8160;
  --color-blushing-rose-600: #9b6544;
  --color-blushing-rose-700: #7e4d2e;
  --color-blushing-rose-800: #653a1e;
  --color-blushing-rose-900: #4e2a12;
  --color-blushing-rose-950: #311807;
  --color-cold-canada: #dffcff;
  --color-cold-canada-50: #dffcff;
  --color-cold-canada-100: #deeff1;
  --color-cold-canada-200: #c8dcdf;
  --color-cold-canada-300: #afc6c9;
  --color-cold-canada-400: #8da7aa;
  --color-cold-canada-500: #718c8f;
  --color-cold-canada-600: #587174;
  --color-cold-canada-700: #435a5c;
  --color-cold-canada-800: #324749;
  --color-cold-canada-900: #253638;
  --color-cold-canada-950: #152223;
}