Nautical Creatures to Horizon color palette

355970Nautical Creatures A8A8D1Imperial Lilac 1C222FDark E3EDFFCotton Boll 678794Horizon

About this palette

Nautical Creatures to Horizon is a 5-color muted, cool palette: #355970 (Nautical Creatures), #A8A8D1 (Imperial Lilac), #1C222F (Dark), #E3EDFF (Cotton Boll), #678794 (Horizon). It mixes blue, purple, gray, white tones and feels cool overall. The strongest text pairing is #1C222F on #E3EDFF with a contrast ratio of 13.51:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nautical Creatures	rgb(53, 89, 112)	hsl(203, 36%, 32%)
Imperial Lilac	rgb(168, 168, 209)	hsl(240, 31%, 74%)
Dark	rgb(28, 34, 47)	hsl(221, 25%, 15%)
Cotton Boll	rgb(227, 237, 255)	hsl(219, 100%, 95%)
Horizon	rgb(103, 135, 148)	hsl(197, 18%, 49%)

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.51:1 Super#1C222F on #E3EDFF
Aa13.51:1 Super#E3EDFF on #1C222F
Aa6.96:1 Good#A8A8D1 on #1C222F
Aa6.96:1 Good#1C222F on #A8A8D1
Aa6.33:1 Good#355970 on #E3EDFF
Aa6.33:1 Good#E3EDFF on #355970
Aa4.15:1 Poor#1C222F on #678794
Aa4.15:1 Poor#678794 on #1C222F

Color blindness preview

CSS variables

/* Nautical Creatures to Horizon — https://swatchly.xyz/palette/355970-a8a8d1-1c222f-e3edff-678794 */
:root {
  --nautical-creatures: #355970;
  --imperial-lilac: #a8a8d1;
  --dark: #1c222f;
  --cotton-boll: #e3edff;
  --horizon: #678794;
}

Tailwind CSS v4

/* Nautical Creatures to Horizon — https://swatchly.xyz/palette/355970-a8a8d1-1c222f-e3edff-678794 */
@theme {
  --color-nautical-creatures: #355970;
  --color-nautical-creatures-50: #ecf7ff;
  --color-nautical-creatures-100: #d8efff;
  --color-nautical-creatures-200: #bfdcf0;
  --color-nautical-creatures-300: #a4c6dc;
  --color-nautical-creatures-400: #82a7bf;
  --color-nautical-creatures-500: #658ba4;
  --color-nautical-creatures-600: #4c7087;
  --color-nautical-creatures-700: #355970;
  --color-nautical-creatures-800: #294558;
  --color-nautical-creatures-900: #1d3545;
  --color-nautical-creatures-950: #0f212c;
  --color-imperial-lilac: #a8a8d1;
  --color-imperial-lilac-50: #f8f8ff;
  --color-imperial-lilac-100: #efefff;
  --color-imperial-lilac-200: #dcdcfa;
  --color-imperial-lilac-300: #c6c7e9;
  --color-imperial-lilac-400: #a8a8d1;
  --color-imperial-lilac-500: #8b8bb2;
  --color-imperial-lilac-600: #6f6e94;
  --color-imperial-lilac-700: #575678;
  --color-imperial-lilac-800: #424260;
  --color-imperial-lilac-900: #32314a;
  --color-imperial-lilac-950: #1d1d2f;
  --color-dark: #1c222f;
  --color-dark-50: #f0f5ff;
  --color-dark-100: #e6ebf6;
  --color-dark-200: #d1d8e5;
  --color-dark-300: #bac1d0;
  --color-dark-400: #9aa2b2;
  --color-dark-500: #7f8797;
  --color-dark-600: #666d7d;
  --color-dark-700: #505765;
  --color-dark-800: #3f4551;
  --color-dark-900: #303540;
  --color-dark-950: #1c222f;
  --color-cotton-boll: #e3edff;
  --color-cotton-boll-50: #f2f6ff;
  --color-cotton-boll-100: #e3edff;
  --color-cotton-boll-200: #d2d9e6;
  --color-cotton-boll-300: #bac2d1;
  --color-cotton-boll-400: #9aa3b3;
  --color-cotton-boll-500: #7e8797;
  --color-cotton-boll-600: #646c7c;
  --color-cotton-boll-700: #4e5663;
  --color-cotton-boll-800: #3c434f;
  --color-cotton-boll-900: #2d333d;
  --color-cotton-boll-950: #1b1f27;
  --color-horizon: #678794;
  --color-horizon-50: #e6f8ff;
  --color-horizon-100: #d8eef7;
  --color-horizon-200: #c0dae4;
  --color-horizon-300: #a6c3cf;
  --color-horizon-400: #83a3b0;
  --color-horizon-500: #678794;
  --color-horizon-600: #4f6d79;
  --color-horizon-700: #3b5762;
  --color-horizon-800: #2c444e;
  --color-horizon-900: #20353d;
  --color-horizon-950: #122127;
}