Poseidon to Ariel Color Palette

About this palette

Poseidon to Ariel is a 5-color cool, monochromatic, gradient palette: #163852 (Poseidon), #355673 (Dark Blue), #4885B6 (Warm Spring), #70ABDB (High Seas), #ABD7F3 (Ariel). It mixes blue tones and feels cool overall. The strongest text pairing is #163852 on #ABD7F3 with a contrast ratio of 7.98:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Poseidon	rgb(22, 56, 82)	hsl(206, 58%, 20%)
Dark Blue	rgb(53, 86, 115)	hsl(208, 37%, 33%)
Warm Spring	rgb(72, 133, 182)	hsl(207, 43%, 50%)
High Seas	rgb(112, 171, 219)	hsl(207, 60%, 65%)
Ariel	rgb(171, 215, 243)	hsl(203, 75%, 81%)

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.98:1 Very good#163852 on #ABD7F3
Aa7.98:1 Very good#ABD7F3 on #163852
Aa5.04:1 Good#355673 on #ABD7F3
Aa5.04:1 Good#ABD7F3 on #355673
Aa4.96:1 Good#163852 on #70ABDB
Aa4.96:1 Good#70ABDB on #163852
Aa3.13:1 Poor#355673 on #70ABDB
Aa3.13:1 Poor#70ABDB on #355673

Color blindness preview

CSS variables

/* Poseidon to Ariel — https://swatchly.xyz/palette/163852-355673-4885b6-70abdb-abd7f3 */
:root {
  --poseidon: #163852;
  --dark-blue: #355673;
  --warm-spring: #4885b6;
  --high-seas: #70abdb;
  --ariel: #abd7f3;
}

Tailwind CSS v4

/* Poseidon to Ariel — https://swatchly.xyz/palette/163852-355673-4885b6-70abdb-abd7f3 */
@theme {
  --color-poseidon: #163852;
  --color-poseidon-50: #edf7ff;
  --color-poseidon-100: #dbeeff;
  --color-poseidon-200: #bfdbf4;
  --color-poseidon-300: #a5c5e1;
  --color-poseidon-400: #83a7c4;
  --color-poseidon-500: #688baa;
  --color-poseidon-600: #4f718e;
  --color-poseidon-700: #3b5a74;
  --color-poseidon-800: #2b475e;
  --color-poseidon-900: #163852;
  --color-poseidon-950: #112331;
  --color-dark-blue: #355673;
  --color-dark-blue-50: #edf6ff;
  --color-dark-blue-100: #dbeeff;
  --color-dark-blue-200: #bfdbf4;
  --color-dark-blue-300: #a5c4e1;
  --color-dark-blue-400: #82a4c4;
  --color-dark-blue-500: #6688a8;
  --color-dark-blue-600: #4c6d8b;
  --color-dark-blue-700: #355673;
  --color-dark-blue-800: #29435a;
  --color-dark-blue-900: #1d3347;
  --color-dark-blue-950: #10202e;
  --color-warm-spring: #4885b6;
  --color-warm-spring-50: #ebf5ff;
  --color-warm-spring-100: #d6ecff;
  --color-warm-spring-200: #aed9ff;
  --color-warm-spring-300: #8dc2f0;
  --color-warm-spring-400: #66a2d3;
  --color-warm-spring-500: #4885b6;
  --color-warm-spring-600: #306b99;
  --color-warm-spring-700: #1d557f;
  --color-warm-spring-800: #104367;
  --color-warm-spring-900: #073452;
  --color-warm-spring-950: #022036;
  --color-high-seas: #70abdb;
  --color-high-seas-50: #eff7ff;
  --color-high-seas-100: #ddefff;
  --color-high-seas-200: #b9dfff;
  --color-high-seas-300: #98caf3;
  --color-high-seas-400: #70abdb;
  --color-high-seas-500: #548fbd;
  --color-high-seas-600: #3a739f;
  --color-high-seas-700: #255b83;
  --color-high-seas-800: #16476a;
  --color-high-seas-900: #0c3654;
  --color-high-seas-950: #042137;
  --color-ariel: #abd7f3;
  --color-ariel-50: #e1f3ff;
  --color-ariel-100: #cdeafc;
  --color-ariel-200: #abd7f3;
  --color-ariel-300: #9bc1d9;
  --color-ariel-400: #7aa3bd;
  --color-ariel-500: #5f89a3;
  --color-ariel-600: #476f87;
  --color-ariel-700: #34596f;
  --color-ariel-800: #26475a;
  --color-ariel-900: #1a3647;
  --color-ariel-950: #0e222d;
}