Haiti to Royal Fig Color Palette

About this palette

Haiti to Royal Fig is a 4-color dark palette: #312539 (Haiti), #7D1C47 (Beet Red), #0F0034 (Quiet Abyss), #7E5666 (Royal Fig). It mixes purple, red tones and feels balanced overall. The strongest text pairing is #0F0034 on #7E5666 with a contrast ratio of 3.19:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Haiti	rgb(49, 37, 57)	hsl(276, 21%, 18%)
Beet Red	rgb(125, 28, 71)	hsl(333, 63%, 30%)
Quiet Abyss	rgb(15, 0, 52)	hsl(257, 100%, 10%)
Royal Fig	rgb(126, 86, 102)	hsl(336, 19%, 42%)

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.

Aa3.19:1 Poor#0F0034 on #7E5666
Aa3.19:1 Poor#7E5666 on #0F0034

Color blindness preview

CSS variables

/* Haiti to Royal Fig — https://swatchly.xyz/palette/312539-7d1c47-0f0034-7e5666 */
:root {
  --haiti: #312539;
  --beet-red: #7d1c47;
  --quiet-abyss: #0f0034;
  --royal-fig: #7e5666;
}

Tailwind CSS v4

/* Haiti to Royal Fig — https://swatchly.xyz/palette/312539-7d1c47-0f0034-7e5666 */
@theme {
  --color-haiti: #312539;
  --color-haiti-50: #f9f2ff;
  --color-haiti-100: #f0e7f7;
  --color-haiti-200: #ded2e6;
  --color-haiti-300: #c8bbd1;
  --color-haiti-400: #a89ab2;
  --color-haiti-500: #8b7d95;
  --color-haiti-600: #6e6178;
  --color-haiti-700: #564a5e;
  --color-haiti-800: #413747;
  --color-haiti-900: #312539;
  --color-haiti-950: #1c1620;
  --color-beet-red: #7d1c47;
  --color-beet-red-50: #fff1f5;
  --color-beet-red-100: #ffe3eb;
  --color-beet-red-200: #ffc5d7;
  --color-beet-red-300: #ffa2c1;
  --color-beet-red-400: #e47fa2;
  --color-beet-red-500: #c96388;
  --color-beet-red-600: #ab496f;
  --color-beet-red-700: #903559;
  --color-beet-red-800: #7d1c47;
  --color-beet-red-900: #5f1937;
  --color-beet-red-950: #3f0c22;
  --color-quiet-abyss: #0f0034;
  --color-quiet-abyss-50: #f4f4ff;
  --color-quiet-abyss-100: #e9e9ff;
  --color-quiet-abyss-200: #d3d2ff;
  --color-quiet-abyss-300: #bcbaf4;
  --color-quiet-abyss-400: #9c99d8;
  --color-quiet-abyss-500: #7e7ab9;
  --color-quiet-abyss-600: #605c97;
  --color-quiet-abyss-700: #484376;
  --color-quiet-abyss-800: #332f58;
  --color-quiet-abyss-900: #211e3e;
  --color-quiet-abyss-950: #0f0034;
  --color-royal-fig: #7e5666;
  --color-royal-fig-50: #fff1f6;
  --color-royal-fig-100: #fee0eb;
  --color-royal-fig-200: #edc9d6;
  --color-royal-fig-300: #d7b0bf;
  --color-royal-fig-400: #b88e9e;
  --color-royal-fig-500: #9b7182;
  --color-royal-fig-600: #7e5666;
  --color-royal-fig-700: #654351;
  --color-royal-fig-800: #51333f;
  --color-royal-fig-900: #402631;
  --color-royal-fig-950: #29171e;
}