Evening Magic to Calm Waters color palette

3C4379Evening Magic 74BAE3Malibu 688BACTreasure Map Waters 072528Sunken Ship E2FCFFCalm Waters

About this palette

Evening Magic to Calm Waters is a 5-color cool palette: #3C4379 (Evening Magic), #74BAE3 (Malibu), #688BAC (Treasure Map Waters), #072528 (Sunken Ship), #E2FCFF (Calm Waters). It mixes purple, blue, turquoise, white tones and feels cool overall. The strongest text pairing is #072528 on #E2FCFF with a contrast ratio of 15.03:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Evening Magic	rgb(60, 67, 121)	hsl(233, 34%, 35%)
Malibu	rgb(116, 186, 227)	hsl(202, 66%, 67%)
Treasure Map Waters	rgb(104, 139, 172)	hsl(209, 29%, 54%)
Sunken Ship	rgb(7, 37, 40)	hsl(185, 70%, 9%)
Calm Waters	rgb(226, 252, 255)	hsl(186, 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.

Aa15.03:1 Super#072528 on #E2FCFF
Aa15.03:1 Super#E2FCFF on #072528
Aa8.63:1 Very good#3C4379 on #E2FCFF
Aa8.63:1 Very good#E2FCFF on #3C4379
Aa7.57:1 Very good#74BAE3 on #072528
Aa7.57:1 Very good#072528 on #74BAE3
Aa4.51:1 Good#688BAC on #072528
Aa4.51:1 Good#072528 on #688BAC

Color blindness preview

CSS variables

/* Evening Magic to Calm Waters — https://swatchly.xyz/palette/3c4379-74bae3-688bac-072528-e2fcff */
:root {
  --evening-magic: #3c4379;
  --malibu: #74bae3;
  --treasure-map-waters: #688bac;
  --sunken-ship: #072528;
  --calm-waters: #e2fcff;
}

Tailwind CSS v4

/* Evening Magic to Calm Waters — https://swatchly.xyz/palette/3c4379-74bae3-688bac-072528-e2fcff */
@theme {
  --color-evening-magic: #3c4379;
  --color-evening-magic-50: #f2f5ff;
  --color-evening-magic-100: #e5eaff;
  --color-evening-magic-200: #ccd5ff;
  --color-evening-magic-300: #b4bff4;
  --color-evening-magic-400: #95a0da;
  --color-evening-magic-500: #7b85c0;
  --color-evening-magic-600: #626ba5;
  --color-evening-magic-700: #4e568a;
  --color-evening-magic-800: #3c4379;
  --color-evening-magic-900: #2e345c;
  --color-evening-magic-950: #1c203d;
  --color-malibu: #74bae3;
  --color-malibu-50: #f6fbff;
  --color-malibu-100: #e7f6ff;
  --color-malibu-200: #c3e8ff;
  --color-malibu-300: #9fd6f7;
  --color-malibu-400: #74bae3;
  --color-malibu-500: #569bc2;
  --color-malibu-600: #377da3;
  --color-malibu-700: #1e6386;
  --color-malibu-800: #0b4d6b;
  --color-malibu-900: #013a53;
  --color-malibu-950: #002334;
  --color-treasure-map-waters: #688bac;
  --color-treasure-map-waters-50: #eef6ff;
  --color-treasure-map-waters-100: #dceeff;
  --color-treasure-map-waters-200: #c0dcf6;
  --color-treasure-map-waters-300: #a6c6e3;
  --color-treasure-map-waters-400: #84a6c7;
  --color-treasure-map-waters-500: #688bac;
  --color-treasure-map-waters-600: #4f708f;
  --color-treasure-map-waters-700: #3a5975;
  --color-treasure-map-waters-800: #2a455e;
  --color-treasure-map-waters-900: #1e354a;
  --color-treasure-map-waters-950: #102130;
  --color-sunken-ship: #072528;
  --color-sunken-ship-50: #e7f9fb;
  --color-sunken-ship-100: #dbf0f2;
  --color-sunken-ship-200: #c5dddf;
  --color-sunken-ship-300: #abc7ca;
  --color-sunken-ship-400: #8aa8ab;
  --color-sunken-ship-500: #6e8d90;
  --color-sunken-ship-600: #557276;
  --color-sunken-ship-700: #405b5e;
  --color-sunken-ship-800: #30484a;
  --color-sunken-ship-900: #23383a;
  --color-sunken-ship-950: #072528;
  --color-calm-waters: #e2fcff;
  --color-calm-waters-50: #e2fcff;
  --color-calm-waters-100: #e0f0f1;
  --color-calm-waters-200: #cadcde;
  --color-calm-waters-300: #b1c6c9;
  --color-calm-waters-400: #90a7aa;
  --color-calm-waters-500: #748b8e;
  --color-calm-waters-600: #5a7173;
  --color-calm-waters-700: #455a5c;
  --color-calm-waters-800: #344648;
  --color-calm-waters-900: #273638;
  --color-calm-waters-950: #172123;
}