Denim to Ariel Color Palette

About this palette

Denim to Ariel is a 5-color cool, gradient palette: #2B4AB7 (Denim), #486FC7 (Fading Night), #6992D5 (Blue Bay), #8CB5E3 (Adrift on the Nile), #B1D8EF (Ariel). It mixes blue tones and feels cool overall. The strongest text pairing is #2B4AB7 on #B1D8EF with a contrast ratio of 5.04:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Denim	rgb(43, 74, 183)	hsl(227, 62%, 44%)
Fading Night	rgb(72, 111, 199)	hsl(222, 53%, 53%)
Blue Bay	rgb(105, 146, 213)	hsl(217, 56%, 62%)
Adrift on the Nile	rgb(140, 181, 227)	hsl(212, 61%, 72%)
Ariel	rgb(177, 216, 239)	hsl(202, 66%, 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.

Aa5.04:1 Good#2B4AB7 on #B1D8EF
Aa5.04:1 Good#B1D8EF on #2B4AB7
Aa3.56:1 Poor#2B4AB7 on #8CB5E3
Aa3.56:1 Poor#8CB5E3 on #2B4AB7
Aa3.19:1 Poor#486FC7 on #B1D8EF
Aa3.19:1 Poor#B1D8EF on #486FC7

Color blindness preview

CSS variables

/* Denim to Ariel — https://swatchly.xyz/palette/2b4ab7-486fc7-6992d5-8cb5e3-b1d8ef */
:root {
  --denim: #2b4ab7;
  --fading-night: #486fc7;
  --blue-bay: #6992d5;
  --adrift-on-the-nile: #8cb5e3;
  --ariel: #b1d8ef;
}

Tailwind CSS v4

/* Denim to Ariel — https://swatchly.xyz/palette/2b4ab7-486fc7-6992d5-8cb5e3-b1d8ef */
@theme {
  --color-denim: #2b4ab7;
  --color-denim-50: #f1f5ff;
  --color-denim-100: #e3ebff;
  --color-denim-200: #c7d8ff;
  --color-denim-300: #a6c0ff;
  --color-denim-400: #789dff;
  --color-denim-500: #577ff0;
  --color-denim-600: #4063d0;
  --color-denim-700: #2b4ab7;
  --color-denim-800: #203992;
  --color-denim-900: #162a76;
  --color-denim-950: #0a194f;
  --color-fading-night: #486fc7;
  --color-fading-night-50: #f0f5ff;
  --color-fading-night-100: #e4edff;
  --color-fading-night-200: #c9dbff;
  --color-fading-night-300: #a9c5ff;
  --color-fading-night-400: #7ca5fc;
  --color-fading-night-500: #6089e3;
  --color-fading-night-600: #486fc7;
  --color-fading-night-700: #3456a7;
  --color-fading-night-800: #244289;
  --color-fading-night-900: #18316e;
  --color-fading-night-950: #0c1e49;
  --color-blue-bay: #6992d5;
  --color-blue-bay-50: #f3f8ff;
  --color-blue-bay-100: #e7f0ff;
  --color-blue-bay-200: #cbdfff;
  --color-blue-bay-300: #aacbff;
  --color-blue-bay-400: #85aced;
  --color-blue-bay-500: #6992d5;
  --color-blue-bay-600: #4d75b5;
  --color-blue-bay-700: #385c97;
  --color-blue-bay-800: #27467a;
  --color-blue-bay-900: #1a3561;
  --color-blue-bay-950: #0d203f;
  --color-adrift-on-the-nile: #8cb5e3;
  --color-adrift-on-the-nile-50: #e0efff;
  --color-adrift-on-the-nile-100: #cbe3ff;
  --color-adrift-on-the-nile-200: #accef4;
  --color-adrift-on-the-nile-300: #8cb5e3;
  --color-adrift-on-the-nile-400: #7198c4;
  --color-adrift-on-the-nile-500: #587fab;
  --color-adrift-on-the-nile-600: #426790;
  --color-adrift-on-the-nile-700: #315377;
  --color-adrift-on-the-nile-800: #244262;
  --color-adrift-on-the-nile-900: #1b3450;
  --color-adrift-on-the-nile-950: #0e2034;
  --color-ariel: #b1d8ef;
  --color-ariel-50: #e2f4ff;
  --color-ariel-100: #d1ebfa;
  --color-ariel-200: #b1d8ef;
  --color-ariel-300: #a0c2d5;
  --color-ariel-400: #7fa4b9;
  --color-ariel-500: #64899e;
  --color-ariel-600: #4c6f83;
  --color-ariel-700: #39596b;
  --color-ariel-800: #2a4656;
  --color-ariel-900: #1e3644;
  --color-ariel-950: #10222b;
}