Start generating

Cascade Twilight to Seashell color palette

134997Cascade TwilightAD7900Bronze7EC0FFCooler Than Ever122C3FOceanic NoirFFF6EESeashell
Open in generator Export PNG, PDF, ASE…

About this palette

Cascade Twilight to Seashell is a 5-color cool palette: #134997 (Cascade Twilight), #AD7900 (Bronze), #7EC0FF (Cooler Than Ever), #122C3F (Oceanic Noir), #FFF6EE (Seashell). It mixes blue, yellow, white tones and feels cool overall. The strongest text pairing is #122C3F on #FFF6EE with a contrast ratio of 13.49:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Cascade Twilightrgb(19, 73, 151)hsl(215, 78%, 33%)
Bronzergb(173, 121, 0)hsl(42, 100%, 34%)
Cooler Than Everrgb(126, 192, 255)hsl(209, 100%, 75%)
Oceanic Noirrgb(18, 44, 63)hsl(205, 56%, 16%)
Seashellrgb(255, 246, 238)hsl(28, 100%, 97%)

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.

  • Aa13.49:1 Super#122C3F on #FFF6EE
  • Aa13.49:1 Super#FFF6EE on #122C3F
  • Aa8.10:1 Very good#134997 on #FFF6EE
  • Aa8.10:1 Very good#FFF6EE on #134997
  • Aa7.46:1 Very good#7EC0FF on #122C3F
  • Aa7.46:1 Very good#122C3F on #7EC0FF
  • Aa4.48:1 Poor#134997 on #7EC0FF
  • Aa4.48:1 Poor#7EC0FF on #134997

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Cascade Twilight to Seashell — https://swatchly.xyz/palette/134997-ad7900-7ec0ff-122c3f-fff6ee */
:root {
  --cascade-twilight: #134997;
  --bronze: #ad7900;
  --cooler-than-ever: #7ec0ff;
  --oceanic-noir: #122c3f;
  --seashell: #fff6ee;
}

Tailwind CSS v4

/* Cascade Twilight to Seashell — https://swatchly.xyz/palette/134997-ad7900-7ec0ff-122c3f-fff6ee */
@theme {
  --color-cascade-twilight: #134997;
  --color-cascade-twilight-50: #eff6ff;
  --color-cascade-twilight-100: #e0ecff;
  --color-cascade-twilight-200: #bed8ff;
  --color-cascade-twilight-300: #96bfff;
  --color-cascade-twilight-400: #679df0;
  --color-cascade-twilight-500: #497fd2;
  --color-cascade-twilight-600: #2f63b0;
  --color-cascade-twilight-700: #134997;
  --color-cascade-twilight-800: #113975;
  --color-cascade-twilight-900: #092b5d;
  --color-cascade-twilight-950: #031a3e;
  --color-bronze: #ad7900;
  --color-bronze-50: #fff3e1;
  --color-bronze-100: #ffe7c2;
  --color-bronze-200: #f9cf8e;
  --color-bronze-300: #e6b76a;
  --color-bronze-400: #c9963a;
  --color-bronze-500: #ad7900;
  --color-bronze-600: #8c6100;
  --color-bronze-700: #6f4d00;
  --color-bronze-800: #583b00;
  --color-bronze-900: #442d00;
  --color-bronze-950: #2c1b00;
  --color-cooler-than-ever: #7ec0ff;
  --color-cooler-than-ever-50: #e7f3ff;
  --color-cooler-than-ever-100: #d4e9ff;
  --color-cooler-than-ever-200: #add6ff;
  --color-cooler-than-ever-300: #7ec0ff;
  --color-cooler-than-ever-400: #62a1dd;
  --color-cooler-than-ever-500: #4686c2;
  --color-cooler-than-ever-600: #2d6ca5;
  --color-cooler-than-ever-700: #1a5689;
  --color-cooler-than-ever-800: #0b4470;
  --color-cooler-than-ever-900: #03355b;
  --color-cooler-than-ever-950: #00203c;
  --color-oceanic-noir: #122c3f;
  --color-oceanic-noir-50: #edf7ff;
  --color-oceanic-noir-100: #dbeefe;
  --color-oceanic-noir-200: #c4dbed;
  --color-oceanic-noir-300: #abc5da;
  --color-oceanic-noir-400: #87a4ba;
  --color-oceanic-noir-500: #6a869d;
  --color-oceanic-noir-600: #4f6a7f;
  --color-oceanic-noir-700: #3a5164;
  --color-oceanic-noir-800: #293d4c;
  --color-oceanic-noir-900: #122c3f;
  --color-oceanic-noir-950: #0e1922;
  --color-seashell: #fff6ee;
  --color-seashell-50: #fff6ee;
  --color-seashell-100: #f2ece7;
  --color-seashell-200: #ded8d2;
  --color-seashell-300: #c8c1ba;
  --color-seashell-400: #a9a19a;
  --color-seashell-500: #8d857e;
  --color-seashell-600: #726a63;
  --color-seashell-700: #5b544e;
  --color-seashell-800: #47413c;
  --color-seashell-900: #37322d;
  --color-seashell-950: #221e1b;
}

Similar palettes