Depths of the Nile to Foggy Love Color Palette

About this palette

Depths of the Nile to Foggy Love is a 4-color muted, gradient palette: #264053 (Depths of the Nile), #6F7A65 (Mangrove), #B49E8C (Sombrero), #DAC4E8 (Foggy Love). It mixes blue, gray, orange, purple tones and feels cool overall. The strongest text pairing is #264053 on #DAC4E8 with a contrast ratio of 6.72:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Depths of the Nile	rgb(38, 64, 83)	hsl(205, 37%, 24%)
Mangrove	rgb(111, 122, 101)	hsl(91, 9%, 44%)
Sombrero	rgb(180, 158, 140)	hsl(27, 21%, 63%)
Foggy Love	rgb(218, 196, 232)	hsl(277, 44%, 84%)

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.72:1 Good#264053 on #DAC4E8
Aa6.72:1 Good#DAC4E8 on #264053
Aa4.23:1 Poor#264053 on #B49E8C
Aa4.23:1 Poor#B49E8C on #264053

Color blindness preview

CSS variables

/* Depths of the Nile to Foggy Love — https://swatchly.xyz/palette/264053-6f7a65-b49e8c-dac4e8 */
:root {
  --depths-of-the-nile: #264053;
  --mangrove: #6f7a65;
  --sombrero: #b49e8c;
  --foggy-love: #dac4e8;
}

Tailwind CSS v4

/* Depths of the Nile to Foggy Love — https://swatchly.xyz/palette/264053-6f7a65-b49e8c-dac4e8 */
@theme {
  --color-depths-of-the-nile: #264053;
  --color-depths-of-the-nile-50: #ecf7ff;
  --color-depths-of-the-nile-100: #dbeefd;
  --color-depths-of-the-nile-200: #c5dbec;
  --color-depths-of-the-nile-300: #aac4d7;
  --color-depths-of-the-nile-400: #87a3b9;
  --color-depths-of-the-nile-500: #6b879d;
  --color-depths-of-the-nile-600: #516b80;
  --color-depths-of-the-nile-700: #3c5466;
  --color-depths-of-the-nile-800: #264053;
  --color-depths-of-the-nile-900: #1f313e;
  --color-depths-of-the-nile-950: #111e27;
  --color-mangrove: #6f7a65;
  --color-mangrove-50: #f1f8eb;
  --color-mangrove-100: #e8f0e2;
  --color-mangrove-200: #d6dfce;
  --color-mangrove-300: #c0cab7;
  --color-mangrove-400: #a2ad98;
  --color-mangrove-500: #88937e;
  --color-mangrove-600: #6f7a65;
  --color-mangrove-700: #57614e;
  --color-mangrove-800: #434c3b;
  --color-mangrove-900: #333a2c;
  --color-mangrove-950: #1f241a;
  --color-sombrero: #b49e8c;
  --color-sombrero-50: #fff3ea;
  --color-sombrero-100: #f7e9dd;
  --color-sombrero-200: #e6d5c7;
  --color-sombrero-300: #d1beae;
  --color-sombrero-400: #b49e8c;
  --color-sombrero-500: #988371;
  --color-sombrero-600: #7c6858;
  --color-sombrero-700: #645243;
  --color-sombrero-800: #4f3f32;
  --color-sombrero-900: #3d3025;
  --color-sombrero-950: #271d15;
  --color-foggy-love: #dac4e8;
  --color-foggy-love-50: #f6e9ff;
  --color-foggy-love-100: #ebdcf5;
  --color-foggy-love-200: #dac4e8;
  --color-foggy-love-300: #c4b0d0;
  --color-foggy-love-400: #a792b4;
  --color-foggy-love-500: #8d799a;
  --color-foggy-love-600: #73607f;
  --color-foggy-love-700: #5d4c68;
  --color-foggy-love-800: #4b3b54;
  --color-foggy-love-900: #3a2d42;
  --color-foggy-love-950: #241b2a;
}