Splashdown to Eclipse Elixir Color Palette

About this palette

Splashdown to Eclipse Elixir is a 4-color cool palette: #CFEAD5 (Splashdown), #7BA8DF (High Seas), #7E4646 (Sly Fox), #1A2235 (Eclipse Elixir). It mixes green, blue, red tones and feels cool overall. The strongest text pairing is #CFEAD5 on #1A2235 with a contrast ratio of 12.37:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Splashdown	rgb(207, 234, 213)	hsl(133, 39%, 86%)
High Seas	rgb(123, 168, 223)	hsl(213, 61%, 68%)
Sly Fox	rgb(126, 70, 70)	hsl(0, 29%, 38%)
Eclipse Elixir	rgb(26, 34, 53)	hsl(222, 34%, 15%)

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.

Aa12.37:1 Super#CFEAD5 on #1A2235
Aa12.37:1 Super#1A2235 on #CFEAD5
Aa6.43:1 Good#7BA8DF on #1A2235
Aa6.43:1 Good#1A2235 on #7BA8DF
Aa5.75:1 Good#CFEAD5 on #7E4646
Aa5.75:1 Good#7E4646 on #CFEAD5

Color blindness preview

CSS variables

/* Splashdown to Eclipse Elixir — https://swatchly.xyz/palette/cfead5-7ba8df-7e4646-1a2235 */
:root {
  --splashdown: #cfead5;
  --high-seas: #7ba8df;
  --sly-fox: #7e4646;
  --eclipse-elixir: #1a2235;
}

Tailwind CSS v4

/* Splashdown to Eclipse Elixir — https://swatchly.xyz/palette/cfead5-7ba8df-7e4646-1a2235 */
@theme {
  --color-splashdown: #cfead5;
  --color-splashdown-50: #e2f2e5;
  --color-splashdown-100: #cfead5;
  --color-splashdown-200: #c1d6c6;
  --color-splashdown-300: #abc2b0;
  --color-splashdown-400: #8ca491;
  --color-splashdown-500: #728b78;
  --color-splashdown-600: #5a715f;
  --color-splashdown-700: #465b4b;
  --color-splashdown-800: #35483a;
  --color-splashdown-900: #27372b;
  --color-splashdown-950: #17221a;
  --color-high-seas: #7ba8df;
  --color-high-seas-50: #f1f7ff;
  --color-high-seas-100: #e1eeff;
  --color-high-seas-200: #c1ddff;
  --color-high-seas-300: #a0c7f7;
  --color-high-seas-400: #7ba8df;
  --color-high-seas-500: #608cc1;
  --color-high-seas-600: #4670a3;
  --color-high-seas-700: #325886;
  --color-high-seas-800: #22446d;
  --color-high-seas-900: #173456;
  --color-high-seas-950: #0b2038;
  --color-sly-fox: #7e4646;
  --color-sly-fox-50: #fff1f1;
  --color-sly-fox-100: #ffe4e3;
  --color-sly-fox-200: #fccac8;
  --color-sly-fox-300: #eab2b0;
  --color-sly-fox-400: #ce9190;
  --color-sly-fox-500: #b27675;
  --color-sly-fox-600: #965c5c;
  --color-sly-fox-700: #7e4646;
  --color-sly-fox-800: #643636;
  --color-sly-fox-900: #4f2828;
  --color-sly-fox-950: #331717;
  --color-eclipse-elixir: #1a2235;
  --color-eclipse-elixir-50: #f1f5ff;
  --color-eclipse-elixir-100: #e4ebfc;
  --color-eclipse-elixir-200: #cfd8eb;
  --color-eclipse-elixir-300: #b7c1d7;
  --color-eclipse-elixir-400: #97a1b9;
  --color-eclipse-elixir-500: #7c879e;
  --color-eclipse-elixir-600: #636d84;
  --color-eclipse-elixir-700: #4e576b;
  --color-eclipse-elixir-800: #3d4557;
  --color-eclipse-elixir-900: #2f3645;
  --color-eclipse-elixir-950: #1a2235;
}