Aegean Blue to Fatback color palette

23396DAegean Blue 855740Annatto 708DDFOlympic Blue 00B2C7Aquarius 54D7F2Splashing Wave FFF7F0Fatback

Open in generator Export PNG, PDF, ASE…

About this palette

Aegean Blue to Fatback is a 6-color cool palette: #23396D (Aegean Blue), #855740 (Annatto), #708DDF (Olympic Blue), #00B2C7 (Aquarius), #54D7F2 (Splashing Wave), #FFF7F0 (Fatback). It mixes blue, brown, turquoise, white tones and feels cool overall. The strongest text pairing is #23396D on #FFF7F0 with a contrast ratio of 10.55:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Aegean Blue	rgb(35, 57, 109)	hsl(222, 51%, 28%)
Annatto	rgb(133, 87, 64)	hsl(20, 35%, 39%)
Olympic Blue	rgb(112, 141, 223)	hsl(224, 63%, 66%)
Aquarius	rgb(0, 178, 199)	hsl(186, 100%, 39%)
Splashing Wave	rgb(84, 215, 242)	hsl(190, 86%, 64%)
Fatback	rgb(255, 247, 240)	hsl(28, 100%, 97%)

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.

Aa10.55:1 Very good#23396D on #FFF7F0
Aa10.55:1 Very good#FFF7F0 on #23396D
Aa6.59:1 Good#23396D on #54D7F2
Aa6.59:1 Good#54D7F2 on #23396D
Aa5.77:1 Good#855740 on #FFF7F0
Aa5.77:1 Good#FFF7F0 on #855740
Aa4.36:1 Poor#23396D on #00B2C7
Aa4.36:1 Poor#00B2C7 on #23396D

Color blindness preview

CSS variables

/* Aegean Blue to Fatback — https://swatchly.xyz/palette/23396d-855740-708ddf-00b2c7-54d7f2-fff7f0 */
:root {
  --aegean-blue: #23396d;
  --annatto: #855740;
  --olympic-blue: #708ddf;
  --aquarius: #00b2c7;
  --splashing-wave: #54d7f2;
  --fatback: #fff7f0;
}

Tailwind CSS v4

/* Aegean Blue to Fatback — https://swatchly.xyz/palette/23396d-855740-708ddf-00b2c7-54d7f2-fff7f0 */
@theme {
  --color-aegean-blue: #23396d;
  --color-aegean-blue-50: #f0f5ff;
  --color-aegean-blue-100: #e2ebff;
  --color-aegean-blue-200: #c5d8ff;
  --color-aegean-blue-300: #a6bff5;
  --color-aegean-blue-400: #839ed8;
  --color-aegean-blue-500: #6781bc;
  --color-aegean-blue-600: #4d669c;
  --color-aegean-blue-700: #384e7f;
  --color-aegean-blue-800: #23396d;
  --color-aegean-blue-900: #1d2c4f;
  --color-aegean-blue-950: #101a33;
  --color-annatto: #855740;
  --color-annatto-50: #fff2ec;
  --color-annatto-100: #ffe3d6;
  --color-annatto-200: #f3cbb7;
  --color-annatto-300: #dfb19b;
  --color-annatto-400: #c08f77;
  --color-annatto-500: #a2725b;
  --color-annatto-600: #855740;
  --color-annatto-700: #6b4430;
  --color-annatto-800: #563422;
  --color-annatto-900: #442718;
  --color-annatto-950: #2c170c;
  --color-olympic-blue: #708ddf;
  --color-olympic-blue-50: #f4f7ff;
  --color-olympic-blue-100: #e9efff;
  --color-olympic-blue-200: #d0ddff;
  --color-olympic-blue-300: #b2c8ff;
  --color-olympic-blue-400: #8ba8f6;
  --color-olympic-blue-500: #708ddf;
  --color-olympic-blue-600: #5570bf;
  --color-olympic-blue-700: #3f579f;
  --color-olympic-blue-800: #2e4282;
  --color-olympic-blue-900: #213167;
  --color-olympic-blue-950: #121d44;
  --color-aquarius: #00b2c7;
  --color-aquarius-50: #defaff;
  --color-aquarius-100: #bcf5ff;
  --color-aquarius-200: #89e6f6;
  --color-aquarius-300: #60d1e3;
  --color-aquarius-400: #00b2c7;
  --color-aquarius-500: #0094a6;
  --color-aquarius-600: #007786;
  --color-aquarius-700: #005f6b;
  --color-aquarius-800: #004b54;
  --color-aquarius-900: #003a42;
  --color-aquarius-950: #00242a;
  --color-splashing-wave: #54d7f2;
  --color-splashing-wave-50: #e8faff;
  --color-splashing-wave-100: #cdf5ff;
  --color-splashing-wave-200: #94e9fc;
  --color-splashing-wave-300: #54d7f2;
  --color-splashing-wave-400: #34b5ce;
  --color-splashing-wave-500: #0098b0;
  --color-splashing-wave-600: #007a8e;
  --color-splashing-wave-700: #006171;
  --color-splashing-wave-800: #004c58;
  --color-splashing-wave-900: #003a44;
  --color-splashing-wave-950: #00242b;
  --color-fatback: #fff7f0;
  --color-fatback-50: #fff7f0;
  --color-fatback-100: #f2ede9;
  --color-fatback-200: #ded9d4;
  --color-fatback-300: #c8c1bc;
  --color-fatback-400: #a8a19b;
  --color-fatback-500: #8c857f;
  --color-fatback-600: #716a64;
  --color-fatback-700: #5a544f;
  --color-fatback-800: #47413d;
  --color-fatback-900: #36322e;
  --color-fatback-950: #221f1c;
}