Aquarius to Elite Teal Color Palette

About this palette

Aquarius to Elite Teal is a 4-color vintage palette: #00AFC6 (Aquarius), #FFCFC8 (Cloud Number Nine), #A82E20 (Sugo Della Nonna), #002F31 (Elite Teal). It mixes turquoise, pink, red tones and feels balanced overall. The strongest text pairing is #FFCFC8 on #002F31 with a contrast ratio of 10.35:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Aquarius	rgb(0, 175, 198)	hsl(187, 100%, 39%)
Cloud Number Nine	rgb(255, 207, 200)	hsl(8, 100%, 89%)
Sugo Della Nonna	rgb(168, 46, 32)	hsl(6, 68%, 39%)
Elite Teal	rgb(0, 47, 49)	hsl(182, 100%, 10%)

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.35:1 Very good#FFCFC8 on #002F31
Aa10.35:1 Very good#002F31 on #FFCFC8
Aa5.48:1 Good#00AFC6 on #002F31
Aa5.48:1 Good#002F31 on #00AFC6
Aa4.88:1 Good#FFCFC8 on #A82E20
Aa4.88:1 Good#A82E20 on #FFCFC8

Color blindness preview

CSS variables

/* Aquarius to Elite Teal — https://swatchly.xyz/palette/00afc6-ffcfc8-a82e20-002f31 */
:root {
  --aquarius: #00afc6;
  --cloud-number-nine: #ffcfc8;
  --sugo-della-nonna: #a82e20;
  --elite-teal: #002f31;
}

Tailwind CSS v4

/* Aquarius to Elite Teal — https://swatchly.xyz/palette/00afc6-ffcfc8-a82e20-002f31 */
@theme {
  --color-aquarius: #00afc6;
  --color-aquarius-50: #ddf9ff;
  --color-aquarius-100: #baf4ff;
  --color-aquarius-200: #87e4f6;
  --color-aquarius-300: #5ecee2;
  --color-aquarius-400: #00afc6;
  --color-aquarius-500: #0092a5;
  --color-aquarius-600: #007686;
  --color-aquarius-700: #005e6b;
  --color-aquarius-800: #004a54;
  --color-aquarius-900: #003942;
  --color-aquarius-950: #00242b;
  --color-cloud-number-nine: #ffcfc8;
  --color-cloud-number-nine-50: #fff6f4;
  --color-cloud-number-nine-100: #ffe9e6;
  --color-cloud-number-nine-200: #ffcfc8;
  --color-cloud-number-nine-300: #e1bab4;
  --color-cloud-number-nine-400: #c49892;
  --color-cloud-number-nine-500: #a77c76;
  --color-cloud-number-nine-600: #8a615c;
  --color-cloud-number-nine-700: #704b46;
  --color-cloud-number-nine-800: #593934;
  --color-cloud-number-nine-900: #462b27;
  --color-cloud-number-nine-950: #2d1917;
  --color-sugo-della-nonna: #a82e20;
  --color-sugo-della-nonna-50: #fff2ef;
  --color-sugo-della-nonna-100: #ffe4df;
  --color-sugo-della-nonna-200: #ffccc2;
  --color-sugo-della-nonna-300: #ffad9e;
  --color-sugo-della-nonna-400: #f87f6c;
  --color-sugo-della-nonna-500: #de6150;
  --color-sugo-della-nonna-600: #c14737;
  --color-sugo-della-nonna-700: #a82e20;
  --color-sugo-della-nonna-800: #871f13;
  --color-sugo-della-nonna-900: #6c1108;
  --color-sugo-della-nonna-950: #490502;
  --color-elite-teal: #002f31;
  --color-elite-teal-50: #e2fbfc;
  --color-elite-teal-100: #d6f2f3;
  --color-elite-teal-200: #bedfe0;
  --color-elite-teal-300: #a3c9cb;
  --color-elite-teal-400: #81abac;
  --color-elite-teal-500: #669193;
  --color-elite-teal-600: #4e787a;
  --color-elite-teal-700: #3b6264;
  --color-elite-teal-800: #2c5051;
  --color-elite-teal-900: #214142;
  --color-elite-teal-950: #002f31;
}