Andromeda Blue to Eclipse Elixir color palette

AFCCEAAndromeda Blue 005863Abyssal Waters 567DA5Into the Blue 8BB7C2Crystal Lake 1F2134Eclipse Elixir

Open in generator Export PNG, PDF, ASE…

About this palette

Andromeda Blue to Eclipse Elixir is a 5-color muted, cool palette: #AFCCEA (Andromeda Blue), #005863 (Abyssal Waters), #567DA5 (Into the Blue), #8BB7C2 (Crystal Lake), #1F2134 (Eclipse Elixir). It mixes blue, turquoise, purple tones and feels cool overall. The strongest text pairing is #AFCCEA on #1F2134 with a contrast ratio of 9.54:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Andromeda Blue	rgb(175, 204, 234)	hsl(211, 58%, 80%)
Abyssal Waters	rgb(0, 88, 99)	hsl(187, 100%, 19%)
Into the Blue	rgb(86, 125, 165)	hsl(210, 31%, 49%)
Crystal Lake	rgb(139, 183, 194)	hsl(192, 31%, 65%)
Eclipse Elixir	rgb(31, 33, 52)	hsl(234, 25%, 16%)

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.

Aa9.54:1 Very good#AFCCEA on #1F2134
Aa9.54:1 Very good#1F2134 on #AFCCEA
Aa7.28:1 Very good#8BB7C2 on #1F2134
Aa7.28:1 Very good#1F2134 on #8BB7C2
Aa4.91:1 Good#AFCCEA on #005863
Aa4.91:1 Good#005863 on #AFCCEA
Aa3.75:1 Poor#005863 on #8BB7C2
Aa3.75:1 Poor#8BB7C2 on #005863

Color blindness preview

CSS variables

/* Andromeda Blue to Eclipse Elixir — https://swatchly.xyz/palette/afccea-005863-567da5-8bb7c2-1f2134 */
:root {
  --andromeda-blue: #afccea;
  --abyssal-waters: #005863;
  --into-the-blue: #567da5;
  --crystal-lake: #8bb7c2;
  --eclipse-elixir: #1f2134;
}

Tailwind CSS v4

/* Andromeda Blue to Eclipse Elixir — https://swatchly.xyz/palette/afccea-005863-567da5-8bb7c2-1f2134 */
@theme {
  --color-andromeda-blue: #afccea;
  --color-andromeda-blue-50: #f5faff;
  --color-andromeda-blue-100: #e6f2ff;
  --color-andromeda-blue-200: #cce1f6;
  --color-andromeda-blue-300: #afccea;
  --color-andromeda-blue-400: #90abc6;
  --color-andromeda-blue-500: #738eaa;
  --color-andromeda-blue-600: #58728d;
  --color-andromeda-blue-700: #425a72;
  --color-andromeda-blue-800: #31455a;
  --color-andromeda-blue-900: #233446;
  --color-andromeda-blue-950: #14202d;
  --color-abyssal-waters: #005863;
  --color-abyssal-waters-50: #e2fbff;
  --color-abyssal-waters-100: #caf4fc;
  --color-abyssal-waters-200: #ade0ea;
  --color-abyssal-waters-300: #8ecad4;
  --color-abyssal-waters-400: #66aab5;
  --color-abyssal-waters-500: #468d98;
  --color-abyssal-waters-600: #2a707b;
  --color-abyssal-waters-700: #005863;
  --color-abyssal-waters-800: #07444d;
  --color-abyssal-waters-900: #01353c;
  --color-abyssal-waters-950: #002126;
  --color-into-the-blue: #567da5;
  --color-into-the-blue-50: #eaf4ff;
  --color-into-the-blue-100: #d4e9ff;
  --color-into-the-blue-200: #b4d4f7;
  --color-into-the-blue-300: #97bce2;
  --color-into-the-blue-400: #739ac3;
  --color-into-the-blue-500: #567da5;
  --color-into-the-blue-600: #40658a;
  --color-into-the-blue-700: #2f5071;
  --color-into-the-blue-800: #223f5c;
  --color-into-the-blue-900: #183149;
  --color-into-the-blue-950: #0d1f31;
  --color-crystal-lake: #8bb7c2;
  --color-crystal-lake-50: #f1fcff;
  --color-crystal-lake-100: #def7fe;
  --color-crystal-lake-200: #c8e7ef;
  --color-crystal-lake-300: #b0d3dc;
  --color-crystal-lake-400: #8bb7c2;
  --color-crystal-lake-500: #6e99a3;
  --color-crystal-lake-600: #527c86;
  --color-crystal-lake-700: #3b626b;
  --color-crystal-lake-800: #294c54;
  --color-crystal-lake-900: #1c3a40;
  --color-crystal-lake-950: #0e2328;
  --color-eclipse-elixir: #1f2134;
  --color-eclipse-elixir-50: #f3f4ff;
  --color-eclipse-elixir-100: #e7eafa;
  --color-eclipse-elixir-200: #d3d6e9;
  --color-eclipse-elixir-300: #bcbfd5;
  --color-eclipse-elixir-400: #9ca0b7;
  --color-eclipse-elixir-500: #82859d;
  --color-eclipse-elixir-600: #686b82;
  --color-eclipse-elixir-700: #53566a;
  --color-eclipse-elixir-800: #414456;
  --color-eclipse-elixir-900: #333544;
  --color-eclipse-elixir-950: #1f2134;
}