Depths of the Nile to Cotton Boll color palette

About this palette

Depths of the Nile to Cotton Boll is a 6-color muted, vintage palette: #28424E (Depths of the Nile), #705F4D (Kabul), #956E58 (Chocolate Temptation), #BA9379 (Cookie Crumb), #A3CFE9 (Andromeda Blue), #DFEFFF (Cotton Boll). It mixes blue, brown, orange, white tones and feels warm overall. The strongest text pairing is #28424E on #DFEFFF with a contrast ratio of 9.06:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Depths of the Nilergb(40, 66, 78)hsl(199, 32%, 23%)
Kabulrgb(112, 95, 77)hsl(31, 19%, 37%)
Chocolate Temptationrgb(149, 110, 88)hsl(22, 26%, 46%)
Cookie Crumbrgb(186, 147, 121)hsl(24, 32%, 60%)
Andromeda Bluergb(163, 207, 233)hsl(202, 61%, 78%)
Cotton Bollrgb(223, 239, 255)hsl(210, 100%, 94%)

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.06:1 Very good#28424E on #DFEFFF
  • Aa9.06:1 Very good#DFEFFF on #28424E
  • Aa6.40:1 Good#28424E on #A3CFE9
  • Aa6.40:1 Good#A3CFE9 on #28424E
  • Aa5.22:1 Good#705F4D on #DFEFFF
  • Aa5.22:1 Good#DFEFFF on #705F4D
  • Aa3.86:1 Poor#956E58 on #DFEFFF
  • Aa3.86:1 Poor#DFEFFF on #956E58

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Depths of the Nile to Cotton Boll — https://swatchly.xyz/palette/28424e-705f4d-956e58-ba9379-a3cfe9-dfefff */
:root {
  --depths-of-the-nile: #28424e;
  --kabul: #705f4d;
  --chocolate-temptation: #956e58;
  --cookie-crumb: #ba9379;
  --andromeda-blue: #a3cfe9;
  --cotton-boll: #dfefff;
}

Tailwind CSS v4

/* Depths of the Nile to Cotton Boll — https://swatchly.xyz/palette/28424e-705f4d-956e58-ba9379-a3cfe9-dfefff */
@theme {
  --color-depths-of-the-nile: #28424e;
  --color-depths-of-the-nile-50: #e9f8ff;
  --color-depths-of-the-nile-100: #dceff8;
  --color-depths-of-the-nile-200: #c5dce6;
  --color-depths-of-the-nile-300: #abc5d1;
  --color-depths-of-the-nile-400: #89a5b2;
  --color-depths-of-the-nile-500: #6c8996;
  --color-depths-of-the-nile-600: #526d7a;
  --color-depths-of-the-nile-700: #3d5561;
  --color-depths-of-the-nile-800: #28424e;
  --color-depths-of-the-nile-900: #21323a;
  --color-depths-of-the-nile-950: #121f24;
  --color-kabul: #705f4d;
  --color-kabul-50: #fef3e8;
  --color-kabul-100: #f4e7da;
  --color-kabul-200: #e0d1c2;
  --color-kabul-300: #c9b8a7;
  --color-kabul-400: #a99784;
  --color-kabul-500: #8c7b68;
  --color-kabul-600: #705f4d;
  --color-kabul-700: #594b3b;
  --color-kabul-800: #473a2d;
  --color-kabul-900: #372c21;
  --color-kabul-950: #231b13;
  --color-chocolate-temptation: #956e58;
  --color-chocolate-temptation-50: #fff2eb;
  --color-chocolate-temptation-100: #ffe8dc;
  --color-chocolate-temptation-200: #f4d5c3;
  --color-chocolate-temptation-300: #e3bfac;
  --color-chocolate-temptation-400: #c8a18b;
  --color-chocolate-temptation-500: #af8770;
  --color-chocolate-temptation-600: #956e58;
  --color-chocolate-temptation-700: #795641;
  --color-chocolate-temptation-800: #614130;
  --color-chocolate-temptation-900: #4c3122;
  --color-chocolate-temptation-950: #311d12;
  --color-cookie-crumb: #ba9379;
  --color-cookie-crumb-50: #fff0e6;
  --color-cookie-crumb-100: #fde2d1;
  --color-cookie-crumb-200: #eccdb8;
  --color-cookie-crumb-300: #d8b49d;
  --color-cookie-crumb-400: #ba9379;
  --color-cookie-crumb-500: #9e7960;
  --color-cookie-crumb-600: #836048;
  --color-cookie-crumb-700: #6b4b35;
  --color-cookie-crumb-800: #553a27;
  --color-cookie-crumb-900: #432c1c;
  --color-cookie-crumb-950: #2c1b0f;
  --color-andromeda-blue: #a3cfe9;
  --color-andromeda-blue-50: #f2faff;
  --color-andromeda-blue-100: #e0f3ff;
  --color-andromeda-blue-200: #c4e3f5;
  --color-andromeda-blue-300: #a3cfe9;
  --color-andromeda-blue-400: #85aec5;
  --color-andromeda-blue-500: #6791a9;
  --color-andromeda-blue-600: #4c758c;
  --color-andromeda-blue-700: #375c72;
  --color-andromeda-blue-800: #27485a;
  --color-andromeda-blue-900: #1a3646;
  --color-andromeda-blue-950: #0e222d;
  --color-cotton-boll: #dfefff;
  --color-cotton-boll-50: #f0f8ff;
  --color-cotton-boll-100: #dfefff;
  --color-cotton-boll-200: #cfdae6;
  --color-cotton-boll-300: #b7c4d1;
  --color-cotton-boll-400: #96a4b2;
  --color-cotton-boll-500: #7a8997;
  --color-cotton-boll-600: #606e7b;
  --color-cotton-boll-700: #4a5763;
  --color-cotton-boll-800: #39444e;
  --color-cotton-boll-900: #2b343d;
  --color-cotton-boll-950: #192027;
}

Similar palettes