Depths of the Nile to Canadian Tuxedo color palette

203B4CDepths of the Nile DAEFFFWater 2C57733AM in Shibuya 99BCD4Gentle Sky 4D93C3Canadian Tuxedo

About this palette

Depths of the Nile to Canadian Tuxedo is a 5-color muted, cool, monochromatic palette: #203B4C (Depths of the Nile), #DAEFFF (Water), #2C5773 (3AM in Shibuya), #99BCD4 (Gentle Sky), #4D93C3 (Canadian Tuxedo). It mixes blue, white tones and feels cool overall. The strongest text pairing is #203B4C on #DAEFFF with a contrast ratio of 9.92:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Depths of the Nile	rgb(32, 59, 76)	hsl(203, 41%, 21%)
Water	rgb(218, 239, 255)	hsl(206, 100%, 93%)
3AM in Shibuya	rgb(44, 87, 115)	hsl(204, 45%, 31%)
Gentle Sky	rgb(153, 188, 212)	hsl(204, 41%, 72%)
Canadian Tuxedo	rgb(77, 147, 195)	hsl(204, 50%, 53%)

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.92:1 Very good#203B4C on #DAEFFF
Aa9.92:1 Very good#DAEFFF on #203B4C
Aa6.54:1 Good#DAEFFF on #2C5773
Aa6.54:1 Good#2C5773 on #DAEFFF
Aa5.86:1 Good#203B4C on #99BCD4
Aa5.86:1 Good#99BCD4 on #203B4C
Aa3.86:1 Poor#2C5773 on #99BCD4
Aa3.86:1 Poor#99BCD4 on #2C5773

Color blindness preview

CSS variables

/* Depths of the Nile to Canadian Tuxedo — https://swatchly.xyz/palette/203b4c-daefff-2c5773-99bcd4-4d93c3 */
:root {
  --depths-of-the-nile: #203b4c;
  --water: #daefff;
  --c-3am-in-shibuya: #2c5773;
  --gentle-sky: #99bcd4;
  --canadian-tuxedo: #4d93c3;
}

Tailwind CSS v4

/* Depths of the Nile to Canadian Tuxedo — https://swatchly.xyz/palette/203b4c-daefff-2c5773-99bcd4-4d93c3 */
@theme {
  --color-depths-of-the-nile: #203b4c;
  --color-depths-of-the-nile-50: #ecf7ff;
  --color-depths-of-the-nile-100: #dbeefc;
  --color-depths-of-the-nile-200: #c4dbeb;
  --color-depths-of-the-nile-300: #abc5d7;
  --color-depths-of-the-nile-400: #8aa7ba;
  --color-depths-of-the-nile-500: #6f8ca0;
  --color-depths-of-the-nile-600: #567385;
  --color-depths-of-the-nile-700: #425c6e;
  --color-depths-of-the-nile-800: #334a59;
  --color-depths-of-the-nile-900: #203b4c;
  --color-depths-of-the-nile-950: #16252f;
  --color-water: #daefff;
  --color-water-50: #edf7ff;
  --color-water-100: #daefff;
  --color-water-200: #cbdae6;
  --color-water-300: #b3c4d1;
  --color-water-400: #92a5b3;
  --color-water-500: #768998;
  --color-water-600: #5c6f7c;
  --color-water-700: #475864;
  --color-water-800: #36444f;
  --color-water-900: #28353e;
  --color-water-950: #182027;
  --color-c-3am-in-shibuya: #2c5773;
  --color-c-3am-in-shibuya-50: #ecf7ff;
  --color-c-3am-in-shibuya-100: #d8efff;
  --color-c-3am-in-shibuya-200: #badcf5;
  --color-c-3am-in-shibuya-300: #9ec6e1;
  --color-c-3am-in-shibuya-400: #7ba6c4;
  --color-c-3am-in-shibuya-500: #5e8aa8;
  --color-c-3am-in-shibuya-600: #446e8b;
  --color-c-3am-in-shibuya-700: #2c5773;
  --color-c-3am-in-shibuya-800: #22445a;
  --color-c-3am-in-shibuya-900: #173447;
  --color-c-3am-in-shibuya-950: #0b202e;
  --color-gentle-sky: #99bcd4;
  --color-gentle-sky-50: #e1f3ff;
  --color-gentle-sky-100: #d0e8f9;
  --color-gentle-sky-200: #b7d3e7;
  --color-gentle-sky-300: #99bcd4;
  --color-gentle-sky-400: #7d9eb5;
  --color-gentle-sky-500: #63859b;
  --color-gentle-sky-600: #4c6c81;
  --color-gentle-sky-700: #395669;
  --color-gentle-sky-800: #2b4455;
  --color-gentle-sky-900: #203644;
  --color-gentle-sky-950: #11212c;
  --color-canadian-tuxedo: #4d93c3;
  --color-canadian-tuxedo-50: #eef8ff;
  --color-canadian-tuxedo-100: #ddf0ff;
  --color-canadian-tuxedo-200: #b8e0ff;
  --color-canadian-tuxedo-300: #92ccf7;
  --color-canadian-tuxedo-400: #6caedd;
  --color-canadian-tuxedo-500: #4d93c3;
  --color-canadian-tuxedo-600: #3077a5;
  --color-canadian-tuxedo-700: #1a5e88;
  --color-canadian-tuxedo-800: #08496e;
  --color-canadian-tuxedo-900: #003857;
  --color-canadian-tuxedo-950: #002338;
}