Sunken Harbour to Cloudy Valley color palette

283E45Sunken Harbour 455170Intergalactic 7A7BA1Stormy Horizon 78A8AFStormy Waters BACFE8Maritime B5C6D4Cloudy Valley

Open in generator Export PNG, PDF, ASE…

About this palette

Sunken Harbour to Cloudy Valley is a 6-color muted, cool palette: #283E45 (Sunken Harbour), #455170 (Intergalactic), #7A7BA1 (Stormy Horizon), #78A8AF (Stormy Waters), #BACFE8 (Maritime), #B5C6D4 (Cloudy Valley). It mixes gray, blue, purple, turquoise tones and feels cool overall. The strongest text pairing is #283E45 on #BACFE8 with a contrast ratio of 7.07:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sunken Harbour	rgb(40, 62, 69)	hsl(194, 27%, 21%)
Intergalactic	rgb(69, 81, 112)	hsl(223, 24%, 35%)
Stormy Horizon	rgb(122, 123, 161)	hsl(238, 17%, 55%)
Stormy Waters	rgb(120, 168, 175)	hsl(188, 26%, 58%)
Maritime	rgb(186, 207, 232)	hsl(213, 50%, 82%)
Cloudy Valley	rgb(181, 198, 212)	hsl(207, 26%, 77%)

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.

Aa7.07:1 Very good#283E45 on #BACFE8
Aa7.07:1 Very good#BACFE8 on #283E45
Aa6.43:1 Good#283E45 on #B5C6D4
Aa6.43:1 Good#B5C6D4 on #283E45
Aa4.95:1 Good#455170 on #BACFE8
Aa4.95:1 Good#BACFE8 on #455170
Aa4.50:1 Good#455170 on #B5C6D4
Aa4.50:1 Good#B5C6D4 on #455170

Color blindness preview

CSS variables

/* Sunken Harbour to Cloudy Valley — https://swatchly.xyz/palette/283e45-455170-7a7ba1-78a8af-bacfe8-b5c6d4 */
:root {
  --sunken-harbour: #283e45;
  --intergalactic: #455170;
  --stormy-horizon: #7a7ba1;
  --stormy-waters: #78a8af;
  --maritime: #bacfe8;
  --cloudy-valley: #b5c6d4;
}

Tailwind CSS v4

/* Sunken Harbour to Cloudy Valley — https://swatchly.xyz/palette/283e45-455170-7a7ba1-78a8af-bacfe8-b5c6d4 */
@theme {
  --color-sunken-harbour: #283e45;
  --color-sunken-harbour-50: #eaf8fd;
  --color-sunken-harbour-100: #deeef4;
  --color-sunken-harbour-200: #c8dbe2;
  --color-sunken-harbour-300: #b0c5cc;
  --color-sunken-harbour-400: #90a8b0;
  --color-sunken-harbour-500: #758e96;
  --color-sunken-harbour-600: #5d747c;
  --color-sunken-harbour-700: #495f66;
  --color-sunken-harbour-800: #394c53;
  --color-sunken-harbour-900: #283e45;
  --color-sunken-harbour-950: #1b272b;
  --color-intergalactic: #455170;
  --color-intergalactic-50: #f1f5ff;
  --color-intergalactic-100: #e3ebff;
  --color-intergalactic-200: #cbd7f2;
  --color-intergalactic-300: #b3bfde;
  --color-intergalactic-400: #929fc1;
  --color-intergalactic-500: #7683a5;
  --color-intergalactic-600: #5c6888;
  --color-intergalactic-700: #455170;
  --color-intergalactic-800: #353f57;
  --color-intergalactic-900: #283045;
  --color-intergalactic-950: #181d2c;
  --color-stormy-horizon: #7a7ba1;
  --color-stormy-horizon-50: #f2f3ff;
  --color-stormy-horizon-100: #e5e6ff;
  --color-stormy-horizon-200: #cfd1f0;
  --color-stormy-horizon-300: #b7b8dc;
  --color-stormy-horizon-400: #9697be;
  --color-stormy-horizon-500: #7a7ba1;
  --color-stormy-horizon-600: #616286;
  --color-stormy-horizon-700: #4d4d6d;
  --color-stormy-horizon-800: #3c3c58;
  --color-stormy-horizon-900: #2e2e46;
  --color-stormy-horizon-950: #1c1c2d;
  --color-stormy-waters: #78a8af;
  --color-stormy-waters-50: #dffafe;
  --color-stormy-waters-100: #d1f0f5;
  --color-stormy-waters-200: #b8dde3;
  --color-stormy-waters-300: #9dc7cd;
  --color-stormy-waters-400: #78a8af;
  --color-stormy-waters-500: #5e8d94;
  --color-stormy-waters-600: #457279;
  --color-stormy-waters-700: #315c61;
  --color-stormy-waters-800: #23484d;
  --color-stormy-waters-900: #18383c;
  --color-stormy-waters-950: #0c2326;
  --color-maritime: #bacfe8;
  --color-maritime-50: #e2efff;
  --color-maritime-100: #d5e4f5;
  --color-maritime-200: #bacfe8;
  --color-maritime-300: #a8bad0;
  --color-maritime-400: #899db4;
  --color-maritime-500: #70839a;
  --color-maritime-600: #586a80;
  --color-maritime-700: #455569;
  --color-maritime-800: #354455;
  --color-maritime-900: #283442;
  --color-maritime-950: #17202a;
  --color-cloudy-valley: #b5c6d4;
  --color-cloudy-valley-50: #eff8ff;
  --color-cloudy-valley-100: #e4eff7;
  --color-cloudy-valley-200: #cfdce6;
  --color-cloudy-valley-300: #b5c6d4;
  --color-cloudy-valley-400: #96a6b3;
  --color-cloudy-valley-500: #7a8a97;
  --color-cloudy-valley-600: #606f7c;
  --color-cloudy-valley-700: #4a5863;
  --color-cloudy-valley-800: #38444e;
  --color-cloudy-valley-900: #2a343c;
  --color-cloudy-valley-950: #192026;
}