Kabul to Sand Dune Color Palette

About this palette

Kabul to Sand Dune is a 5-color muted palette: #695C4B (Kabul), #93806D (Gazelle), #C6AA8C (Semolina), #524637 (Olive Leaf), #DFD1C2 (Sand Dune). It mixes gray, orange tones and feels warm overall. The strongest text pairing is #524637 on #DFD1C2 with a contrast ratio of 6.13:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Kabul	rgb(105, 92, 75)	hsl(34, 17%, 35%)
Gazelle	rgb(147, 128, 109)	hsl(30, 15%, 50%)
Semolina	rgb(198, 170, 140)	hsl(31, 34%, 66%)
Olive Leaf	rgb(82, 70, 55)	hsl(33, 20%, 27%)
Sand Dune	rgb(223, 209, 194)	hsl(31, 31%, 82%)

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.

Aa6.13:1 Good#524637 on #DFD1C2
Aa6.13:1 Good#DFD1C2 on #524637
Aa4.34:1 Poor#695C4B on #DFD1C2
Aa4.34:1 Poor#DFD1C2 on #695C4B
Aa4.16:1 Poor#C6AA8C on #524637
Aa4.16:1 Poor#524637 on #C6AA8C

Color blindness preview

CSS variables

/* Kabul to Sand Dune — https://swatchly.xyz/palette/695c4b-93806d-c6aa8c-524637-dfd1c2 */
:root {
  --kabul: #695c4b;
  --gazelle: #93806d;
  --semolina: #c6aa8c;
  --olive-leaf: #524637;
  --sand-dune: #dfd1c2;
}

Tailwind CSS v4

/* Kabul to Sand Dune — https://swatchly.xyz/palette/695c4b-93806d-c6aa8c-524637-dfd1c2 */
@theme {
  --color-kabul: #695c4b;
  --color-kabul-50: #fcf4e9;
  --color-kabul-100: #f3eadd;
  --color-kabul-200: #e2d7c9;
  --color-kabul-300: #cfc2b2;
  --color-kabul-400: #b2a493;
  --color-kabul-500: #988a78;
  --color-kabul-600: #7f7160;
  --color-kabul-700: #695c4b;
  --color-kabul-800: #534839;
  --color-kabul-900: #40372a;
  --color-kabul-950: #292219;
  --color-gazelle: #93806d;
  --color-gazelle-50: #fef2e7;
  --color-gazelle-100: #f5e8db;
  --color-gazelle-200: #e3d3c4;
  --color-gazelle-300: #cdbcaa;
  --color-gazelle-400: #af9c89;
  --color-gazelle-500: #93806d;
  --color-gazelle-600: #786654;
  --color-gazelle-700: #615040;
  --color-gazelle-800: #4c3e30;
  --color-gazelle-900: #3c3024;
  --color-gazelle-950: #261d14;
  --color-semolina: #c6aa8c;
  --color-semolina-50: #fff9f3;
  --color-semolina-100: #fff0e0;
  --color-semolina-200: #f2dec8;
  --color-semolina-300: #e0c9b0;
  --color-semolina-400: #c6aa8c;
  --color-semolina-500: #a78c6f;
  --color-semolina-600: #896f53;
  --color-semolina-700: #6e573d;
  --color-semolina-800: #56422b;
  --color-semolina-900: #42311e;
  --color-semolina-950: #291d0f;
  --color-olive-leaf: #524637;
  --color-olive-leaf-50: #fcf4ea;
  --color-olive-leaf-100: #f3eade;
  --color-olive-leaf-200: #e0d6c8;
  --color-olive-leaf-300: #ccc0b1;
  --color-olive-leaf-400: #afa191;
  --color-olive-leaf-500: #948777;
  --color-olive-leaf-600: #7b6e5e;
  --color-olive-leaf-700: #64584a;
  --color-olive-leaf-800: #524637;
  --color-olive-leaf-900: #3f362b;
  --color-olive-leaf-950: #282219;
  --color-sand-dune: #dfd1c2;
  --color-sand-dune-50: #f9f1e8;
  --color-sand-dune-100: #efe6dc;
  --color-sand-dune-200: #dfd1c2;
  --color-sand-dune-300: #c7bcaf;
  --color-sand-dune-400: #a99d8f;
  --color-sand-dune-500: #8f8274;
  --color-sand-dune-600: #74685b;
  --color-sand-dune-700: #5e5347;
  --color-sand-dune-800: #4a4136;
  --color-sand-dune-900: #393128;
  --color-sand-dune-950: #241e18;
}