Capital Blue to Ariel color palette

14455CCapital Blue 396788Mississippi River 577F9AWhale Shark 61A2CASub-Zero 98BDDABlues White Shoes B4D7EFAriel

Open in generator Export PNG, PDF, ASE…

About this palette

Capital Blue to Ariel is a 6-color cool, monochromatic, gradient palette: #14455C (Capital Blue), #396788 (Mississippi River), #577F9A (Whale Shark), #61A2CA (Sub-Zero), #98BDDA (Blues White Shoes), #B4D7EF (Ariel). It mixes blue tones and feels cool overall. The strongest text pairing is #14455C on #B4D7EF with a contrast ratio of 6.83:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Capital Blue	rgb(20, 69, 92)	hsl(199, 64%, 22%)
Mississippi River	rgb(57, 103, 136)	hsl(205, 41%, 38%)
Whale Shark	rgb(87, 127, 154)	hsl(204, 28%, 47%)
Sub-Zero	rgb(97, 162, 202)	hsl(203, 50%, 59%)
Blues White Shoes	rgb(152, 189, 218)	hsl(206, 47%, 73%)
Ariel	rgb(180, 215, 239)	hsl(204, 65%, 82%)

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.

Aa6.83:1 Good#14455C on #B4D7EF
Aa6.83:1 Good#B4D7EF on #14455C
Aa5.22:1 Good#14455C on #98BDDA
Aa5.22:1 Good#98BDDA on #14455C
Aa4.01:1 Poor#396788 on #B4D7EF
Aa4.01:1 Poor#B4D7EF on #396788
Aa3.70:1 Poor#14455C on #61A2CA
Aa3.70:1 Poor#61A2CA on #14455C

Color blindness preview

CSS variables

/* Capital Blue to Ariel — https://swatchly.xyz/palette/14455c-396788-577f9a-61a2ca-98bdda-b4d7ef */
:root {
  --capital-blue: #14455c;
  --mississippi-river: #396788;
  --whale-shark: #577f9a;
  --sub-zero: #61a2ca;
  --blues-white-shoes: #98bdda;
  --ariel: #b4d7ef;
}

Tailwind CSS v4

/* Capital Blue to Ariel — https://swatchly.xyz/palette/14455c-396788-577f9a-61a2ca-98bdda-b4d7ef */
@theme {
  --color-capital-blue: #14455c;
  --color-capital-blue-50: #eaf7ff;
  --color-capital-blue-100: #d5f0ff;
  --color-capital-blue-200: #b9def2;
  --color-capital-blue-300: #9dc7df;
  --color-capital-blue-400: #79a8c1;
  --color-capital-blue-500: #5c8ca5;
  --color-capital-blue-600: #427088;
  --color-capital-blue-700: #2e586e;
  --color-capital-blue-800: #14455c;
  --color-capital-blue-900: #153544;
  --color-capital-blue-950: #0a202c;
  --color-mississippi-river: #396788;
  --color-mississippi-river-50: #ecf7ff;
  --color-mississippi-river-100: #d6edff;
  --color-mississippi-river-200: #b4d9f6;
  --color-mississippi-river-300: #97c1e2;
  --color-mississippi-river-400: #72a0c3;
  --color-mississippi-river-500: #5583a6;
  --color-mississippi-river-600: #396788;
  --color-mississippi-river-700: #2a526e;
  --color-mississippi-river-800: #1d4058;
  --color-mississippi-river-900: #133146;
  --color-mississippi-river-950: #091f2d;
  --color-whale-shark: #577f9a;
  --color-whale-shark-50: #e7f5ff;
  --color-whale-shark-100: #cfebff;
  --color-whale-shark-200: #b5d6ed;
  --color-whale-shark-300: #98bed7;
  --color-whale-shark-400: #749cb8;
  --color-whale-shark-500: #577f9a;
  --color-whale-shark-600: #416780;
  --color-whale-shark-700: #305268;
  --color-whale-shark-800: #224054;
  --color-whale-shark-900: #193243;
  --color-whale-shark-950: #0d202c;
  --color-sub-zero: #61a2ca;
  --color-sub-zero-50: #e6f5ff;
  --color-sub-zero-100: #cfecff;
  --color-sub-zero-200: #a8d9fa;
  --color-sub-zero-300: #89c2e7;
  --color-sub-zero-400: #61a2ca;
  --color-sub-zero-500: #4788ae;
  --color-sub-zero-600: #2e6e92;
  --color-sub-zero-700: #1b5879;
  --color-sub-zero-800: #0d4562;
  --color-sub-zero-900: #05364f;
  --color-sub-zero-950: #012234;
  --color-blues-white-shoes: #98bdda;
  --color-blues-white-shoes-50: #e3f3ff;
  --color-blues-white-shoes-100: #d0e9fd;
  --color-blues-white-shoes-200: #b7d4eb;
  --color-blues-white-shoes-300: #98bdda;
  --color-blues-white-shoes-400: #7c9fba;
  --color-blues-white-shoes-500: #6285a0;
  --color-blues-white-shoes-600: #4a6c86;
  --color-blues-white-shoes-700: #38566d;
  --color-blues-white-shoes-800: #294458;
  --color-blues-white-shoes-900: #1e3547;
  --color-blues-white-shoes-950: #10212e;
  --color-ariel: #b4d7ef;
  --color-ariel-50: #e4f4ff;
  --color-ariel-100: #d3eafa;
  --color-ariel-200: #b4d7ef;
  --color-ariel-300: #a3c1d5;
  --color-ariel-400: #82a3b9;
  --color-ariel-500: #67889e;
  --color-ariel-600: #4f6e83;
  --color-ariel-700: #3c586b;
  --color-ariel-800: #2d4656;
  --color-ariel-900: #203644;
  --color-ariel-950: #12212b;
}