Niagara Falls to Continental Waters color palette

About this palette

Niagara Falls to Continental Waters is a 5-color muted, vintage palette: #CBE4EC (Niagara Falls), #736177 (Rum), #4B3748 (Shadow Purple), #998563 (Tahini Brown), #9AC9D2 (Continental Waters). It mixes gray, purple, yellow, turquoise tones and feels balanced overall. The strongest text pairing is #CBE4EC on #4B3748 with a contrast ratio of 8.17:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Niagara Fallsrgb(203, 228, 236)hsl(195, 46%, 86%)
Rumrgb(115, 97, 119)hsl(289, 10%, 42%)
Shadow Purplergb(75, 55, 72)hsl(309, 15%, 25%)
Tahini Brownrgb(153, 133, 99)hsl(38, 21%, 49%)
Continental Watersrgb(154, 201, 210)hsl(190, 38%, 71%)

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.

  • Aa8.17:1 Very good#CBE4EC on #4B3748
  • Aa8.17:1 Very good#4B3748 on #CBE4EC
  • Aa6.01:1 Good#4B3748 on #9AC9D2
  • Aa6.01:1 Good#9AC9D2 on #4B3748
  • Aa4.28:1 Poor#CBE4EC on #736177
  • Aa4.28:1 Poor#736177 on #CBE4EC
  • Aa3.15:1 Poor#736177 on #9AC9D2
  • Aa3.15:1 Poor#9AC9D2 on #736177

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Niagara Falls to Continental Waters — https://swatchly.xyz/palette/cbe4ec-736177-4b3748-998563-9ac9d2 */
:root {
  --niagara-falls: #cbe4ec;
  --rum: #736177;
  --shadow-purple: #4b3748;
  --tahini-brown: #998563;
  --continental-waters: #9ac9d2;
}

Tailwind CSS v4

/* Niagara Falls to Continental Waters — https://swatchly.xyz/palette/cbe4ec-736177-4b3748-998563-9ac9d2 */
@theme {
  --color-niagara-falls: #cbe4ec;
  --color-niagara-falls-50: #f3fcff;
  --color-niagara-falls-100: #e6f4f9;
  --color-niagara-falls-200: #cbe4ec;
  --color-niagara-falls-300: #b7cbd2;
  --color-niagara-falls-400: #94abb2;
  --color-niagara-falls-500: #778e95;
  --color-niagara-falls-600: #5c7279;
  --color-niagara-falls-700: #465a60;
  --color-niagara-falls-800: #34464b;
  --color-niagara-falls-900: #27363a;
  --color-niagara-falls-950: #172125;
  --color-rum: #736177;
  --color-rum-50: #fcf1ff;
  --color-rum-100: #f2e5f5;
  --color-rum-200: #dfd0e3;
  --color-rum-300: #c9b8cd;
  --color-rum-400: #aa98ae;
  --color-rum-500: #8e7c92;
  --color-rum-600: #736177;
  --color-rum-700: #5c4c5f;
  --color-rum-800: #483b4b;
  --color-rum-900: #382d3b;
  --color-rum-950: #231b25;
  --color-shadow-purple: #4b3748;
  --color-shadow-purple-50: #fef0fc;
  --color-shadow-purple-100: #f5e6f3;
  --color-shadow-purple-200: #e4d1e0;
  --color-shadow-purple-300: #ceb9ca;
  --color-shadow-purple-400: #af98ab;
  --color-shadow-purple-500: #937c8f;
  --color-shadow-purple-600: #776173;
  --color-shadow-purple-700: #5e4b5b;
  --color-shadow-purple-800: #4b3748;
  --color-shadow-purple-900: #382b36;
  --color-shadow-purple-950: #231922;
  --color-tahini-brown: #998563;
  --color-tahini-brown-50: #fff4e2;
  --color-tahini-brown-100: #f8ead4;
  --color-tahini-brown-200: #e6d6bc;
  --color-tahini-brown-300: #d2c0a2;
  --color-tahini-brown-400: #b4a07f;
  --color-tahini-brown-500: #998563;
  --color-tahini-brown-600: #7d6a4a;
  --color-tahini-brown-700: #655436;
  --color-tahini-brown-800: #504126;
  --color-tahini-brown-900: #3e311b;
  --color-tahini-brown-950: #271e0e;
  --color-continental-waters: #9ac9d2;
  --color-continental-waters-50: #e0faff;
  --color-continental-waters-100: #d3f1f6;
  --color-continental-waters-200: #bbdee4;
  --color-continental-waters-300: #9ac9d2;
  --color-continental-waters-400: #7da9b2;
  --color-continental-waters-500: #618e97;
  --color-continental-waters-600: #48737b;
  --color-continental-waters-700: #345c64;
  --color-continental-waters-800: #25484f;
  --color-continental-waters-900: #19383e;
  --color-continental-waters-950: #0d2327;
}

Similar palettes