Gazelle to Haiti color palette

977D64Gazelle 485439Broccoli Green 9AADC2Lost in Time F0D2BAApricot Freeze 2F2832Haiti

About this palette

Gazelle to Haiti is a 5-color muted, earthy palette: #977D64 (Gazelle), #485439 (Broccoli Green), #9AADC2 (Lost in Time), #F0D2BA (Apricot Freeze), #2F2832 (Haiti). It mixes orange, green, blue, gray tones and feels balanced overall. The strongest text pairing is #F0D2BA on #2F2832 with a contrast ratio of 9.95:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Gazelle	rgb(151, 125, 100)	hsl(29, 20%, 49%)
Broccoli Green	rgb(72, 84, 57)	hsl(87, 19%, 28%)
Lost in Time	rgb(154, 173, 194)	hsl(211, 25%, 68%)
Apricot Freeze	rgb(240, 210, 186)	hsl(27, 64%, 84%)
Haiti	rgb(47, 40, 50)	hsl(282, 11%, 18%)

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.

Aa9.95:1 Very good#F0D2BA on #2F2832
Aa9.95:1 Very good#2F2832 on #F0D2BA
Aa6.21:1 Good#9AADC2 on #2F2832
Aa6.21:1 Good#2F2832 on #9AADC2
Aa5.62:1 Good#485439 on #F0D2BA
Aa5.62:1 Good#F0D2BA on #485439
Aa3.70:1 Poor#977D64 on #2F2832
Aa3.70:1 Poor#2F2832 on #977D64

Color blindness preview

CSS variables

/* Gazelle to Haiti — https://swatchly.xyz/palette/977d64-485439-9aadc2-f0d2ba-2f2832 */
:root {
  --gazelle: #977d64;
  --broccoli-green: #485439;
  --lost-in-time: #9aadc2;
  --apricot-freeze: #f0d2ba;
  --haiti: #2f2832;
}

Tailwind CSS v4

/* Gazelle to Haiti — https://swatchly.xyz/palette/977d64-485439-9aadc2-f0d2ba-2f2832 */
@theme {
  --color-gazelle: #977d64;
  --color-gazelle-50: #fff2e6;
  --color-gazelle-100: #f9e6d5;
  --color-gazelle-200: #e7d1bd;
  --color-gazelle-300: #d2b9a3;
  --color-gazelle-400: #b39980;
  --color-gazelle-500: #977d64;
  --color-gazelle-600: #7c644c;
  --color-gazelle-700: #644e39;
  --color-gazelle-800: #503c2a;
  --color-gazelle-900: #3e2e1e;
  --color-gazelle-950: #281c11;
  --color-broccoli-green: #485439;
  --color-broccoli-green-50: #f0f9e7;
  --color-broccoli-green-100: #e6efdb;
  --color-broccoli-green-200: #d0dbc3;
  --color-broccoli-green-300: #b7c4a9;
  --color-broccoli-green-400: #96a487;
  --color-broccoli-green-500: #7a876a;
  --color-broccoli-green-600: #5f6c50;
  --color-broccoli-green-700: #485439;
  --color-broccoli-green-800: #38412c;
  --color-broccoli-green-900: #2a3221;
  --color-broccoli-green-950: #191f12;
  --color-lost-in-time: #9aadc2;
  --color-lost-in-time-50: #f4f9ff;
  --color-lost-in-time-100: #e6f2ff;
  --color-lost-in-time-200: #d2e0ef;
  --color-lost-in-time-300: #bbcbdd;
  --color-lost-in-time-400: #9aadc2;
  --color-lost-in-time-500: #7d90a4;
  --color-lost-in-time-600: #627387;
  --color-lost-in-time-700: #4b5b6d;
  --color-lost-in-time-800: #384656;
  --color-lost-in-time-900: #2a3542;
  --color-lost-in-time-950: #182029;
  --color-apricot-freeze: #f0d2ba;
  --color-apricot-freeze-50: #fff3ea;
  --color-apricot-freeze-100: #fbe8d9;
  --color-apricot-freeze-200: #f0d2ba;
  --color-apricot-freeze-300: #d5bca8;
  --color-apricot-freeze-400: #b79c86;
  --color-apricot-freeze-500: #9c816a;
  --color-apricot-freeze-600: #806651;
  --color-apricot-freeze-700: #67503d;
  --color-apricot-freeze-800: #523e2d;
  --color-apricot-freeze-900: #402f21;
  --color-apricot-freeze-950: #291c12;
  --color-haiti: #2f2832;
  --color-haiti-50: #f8f3fa;
  --color-haiti-100: #eee9f1;
  --color-haiti-200: #dbd5de;
  --color-haiti-300: #c5bec9;
  --color-haiti-400: #a59ca8;
  --color-haiti-500: #88808c;
  --color-haiti-600: #6c646f;
  --color-haiti-700: #544d57;
  --color-haiti-800: #3f3941;
  --color-haiti-900: #2f2832;
  --color-haiti-950: #1b181c;
}