Black Pearl to Fatback Color Palette

About this palette

Black Pearl to Fatback is a 4-color muted palette: #1A2629 (Black Pearl), #585D7D (Admiral Blue), #B0987D (Incense), #FFF7EF (Fatback). It mixes gray, purple, orange, white tones and feels balanced overall. The strongest text pairing is #1A2629 on #FFF7EF with a contrast ratio of 14.63:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Pearl	rgb(26, 38, 41)	hsl(192, 22%, 13%)
Admiral Blue	rgb(88, 93, 125)	hsl(232, 17%, 42%)
Incense	rgb(176, 152, 125)	hsl(32, 24%, 59%)
Fatback	rgb(255, 247, 239)	hsl(30, 100%, 97%)

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.63:1 Super#1A2629 on #FFF7EF
Aa14.63:1 Super#FFF7EF on #1A2629
Aa6.04:1 Good#585D7D on #FFF7EF
Aa6.04:1 Good#FFF7EF on #585D7D
Aa5.64:1 Good#1A2629 on #B0987D
Aa5.64:1 Good#B0987D on #1A2629

Color blindness preview

CSS variables

/* Black Pearl to Fatback — https://swatchly.xyz/palette/1a2629-585d7d-b0987d-fff7ef */
:root {
  --black-pearl: #1a2629;
  --admiral-blue: #585d7d;
  --incense: #b0987d;
  --fatback: #fff7ef;
}

Tailwind CSS v4

/* Black Pearl to Fatback — https://swatchly.xyz/palette/1a2629-585d7d-b0987d-fff7ef */
@theme {
  --color-black-pearl: #1a2629;
  --color-black-pearl-50: #eef7f9;
  --color-black-pearl-100: #e4edf0;
  --color-black-pearl-200: #cedadd;
  --color-black-pearl-300: #b7c4c7;
  --color-black-pearl-400: #96a4a8;
  --color-black-pearl-500: #7c8a8e;
  --color-black-pearl-600: #637074;
  --color-black-pearl-700: #4e5a5e;
  --color-black-pearl-800: #3d484b;
  --color-black-pearl-900: #2f393b;
  --color-black-pearl-950: #1a2629;
  --color-admiral-blue: #585d7d;
  --color-admiral-blue-50: #f2f4ff;
  --color-admiral-blue-100: #e6eaff;
  --color-admiral-blue-200: #d3d8f3;
  --color-admiral-blue-300: #bdc3e1;
  --color-admiral-blue-400: #9fa5c6;
  --color-admiral-blue-500: #858bad;
  --color-admiral-blue-600: #6d7293;
  --color-admiral-blue-700: #585d7d;
  --color-admiral-blue-800: #444863;
  --color-admiral-blue-900: #34374e;
  --color-admiral-blue-950: #202233;
  --color-incense: #b0987d;
  --color-incense-50: #fff1e1;
  --color-incense-100: #f6e6d3;
  --color-incense-200: #e4d1bb;
  --color-incense-300: #ceb9a0;
  --color-incense-400: #b0987d;
  --color-incense-500: #957e63;
  --color-incense-600: #7a644b;
  --color-incense-700: #634f38;
  --color-incense-800: #4f3d2a;
  --color-incense-900: #3e2f1e;
  --color-incense-950: #281d11;
  --color-fatback: #fff7ef;
  --color-fatback-50: #fff7ef;
  --color-fatback-100: #f2ede8;
  --color-fatback-200: #ded9d3;
  --color-fatback-300: #c8c1bb;
  --color-fatback-400: #a8a19a;
  --color-fatback-500: #8c857e;
  --color-fatback-600: #716a64;
  --color-fatback-700: #5a544e;
  --color-fatback-800: #47413c;
  --color-fatback-900: #36322d;
  --color-fatback-950: #221f1b;
}