Black Stallion to Sailor Color Palette

About this palette

Black Stallion to Sailor is a 4-color muted, vintage palette: #0D1A16 (Black Stallion), #BE9656 (Amaretto Sour), #FCDDE4 (Marshmallow Heart), #47557D (Sailor). It mixes black, yellow, pink, blue tones and feels warm overall. The strongest text pairing is #0D1A16 on #FCDDE4 with a contrast ratio of 14.11:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Stallion	rgb(13, 26, 22)	hsl(162, 33%, 8%)
Amaretto Sour	rgb(190, 150, 86)	hsl(37, 44%, 54%)
Marshmallow Heart	rgb(252, 221, 228)	hsl(346, 84%, 93%)
Sailor	rgb(71, 85, 125)	hsl(224, 28%, 38%)

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.

Aa14.11:1 Super#0D1A16 on #FCDDE4
Aa14.11:1 Super#FCDDE4 on #0D1A16
Aa6.53:1 Good#0D1A16 on #BE9656
Aa6.53:1 Good#BE9656 on #0D1A16
Aa5.80:1 Good#FCDDE4 on #47557D
Aa5.80:1 Good#47557D on #FCDDE4

Color blindness preview

CSS variables

/* Black Stallion to Sailor — https://swatchly.xyz/palette/0d1a16-be9656-fcdde4-47557d */
:root {
  --black-stallion: #0d1a16;
  --amaretto-sour: #be9656;
  --marshmallow-heart: #fcdde4;
  --sailor: #47557d;
}

Tailwind CSS v4

/* Black Stallion to Sailor — https://swatchly.xyz/palette/0d1a16-be9656-fcdde4-47557d */
@theme {
  --color-black-stallion: #0d1a16;
  --color-black-stallion-50: #eef8f4;
  --color-black-stallion-100: #e3eeea;
  --color-black-stallion-200: #cedbd6;
  --color-black-stallion-300: #b6c5c0;
  --color-black-stallion-400: #96a6a0;
  --color-black-stallion-500: #798983;
  --color-black-stallion-600: #5d6c67;
  --color-black-stallion-700: #47544f;
  --color-black-stallion-800: #343f3b;
  --color-black-stallion-900: #252e2b;
  --color-black-stallion-950: #0d1a16;
  --color-amaretto-sour: #be9656;
  --color-amaretto-sour-50: #fff2de;
  --color-amaretto-sour-100: #ffe5be;
  --color-amaretto-sour-200: #efcf9f;
  --color-amaretto-sour-300: #dbb780;
  --color-amaretto-sour-400: #be9656;
  --color-amaretto-sour-500: #a27b3b;
  --color-amaretto-sour-600: #876221;
  --color-amaretto-sour-700: #6e4c0b;
  --color-amaretto-sour-800: #583b00;
  --color-amaretto-sour-900: #452d00;
  --color-amaretto-sour-950: #2c1c00;
  --color-marshmallow-heart: #fcdde4;
  --color-marshmallow-heart-50: #feecf0;
  --color-marshmallow-heart-100: #fcdde4;
  --color-marshmallow-heart-200: #e4ccd2;
  --color-marshmallow-heart-300: #d0b6bc;
  --color-marshmallow-heart-400: #b3979d;
  --color-marshmallow-heart-500: #987c83;
  --color-marshmallow-heart-600: #7d6369;
  --color-marshmallow-heart-700: #654e54;
  --color-marshmallow-heart-800: #503c41;
  --color-marshmallow-heart-900: #3f2d32;
  --color-marshmallow-heart-950: #281b1e;
  --color-sailor: #47557d;
  --color-sailor-50: #f1f5ff;
  --color-sailor-100: #e3ebff;
  --color-sailor-200: #cad7fa;
  --color-sailor-300: #b2c1e8;
  --color-sailor-400: #91a1cc;
  --color-sailor-500: #7686b1;
  --color-sailor-600: #5d6c95;
  --color-sailor-700: #47557d;
  --color-sailor-800: #374263;
  --color-sailor-900: #29324e;
  --color-sailor-950: #181f33;
}