Clear Sky to Elite Teal Color Palette

About this palette

Clear Sky to Elite Teal is a 4-color cool, gradient palette: #91CCFF (Clear Sky), #00B1B0 (Teal Me No Lies), #006476 (Wakame Green), #003434 (Elite Teal). It mixes blue, turquoise tones and feels cool overall. The strongest text pairing is #91CCFF on #003434 with a contrast ratio of 7.97:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Clear Sky	rgb(145, 204, 255)	hsl(208, 100%, 78%)
Teal Me No Lies	rgb(0, 177, 176)	hsl(180, 100%, 35%)
Wakame Green	rgb(0, 100, 118)	hsl(189, 100%, 23%)
Elite Teal	rgb(0, 52, 52)	hsl(180, 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.

Aa7.97:1 Very good#91CCFF on #003434
Aa7.97:1 Very good#003434 on #91CCFF
Aa5.14:1 Good#00B1B0 on #003434
Aa5.14:1 Good#003434 on #00B1B0
Aa3.98:1 Poor#91CCFF on #006476
Aa3.98:1 Poor#006476 on #91CCFF

Color blindness preview

CSS variables

/* Clear Sky to Elite Teal — https://swatchly.xyz/palette/91ccff-00b1b0-006476-003434 */
:root {
  --clear-sky: #91ccff;
  --teal-me-no-lies: #00b1b0;
  --wakame-green: #006476;
  --elite-teal: #003434;
}

Tailwind CSS v4

/* Clear Sky to Elite Teal — https://swatchly.xyz/palette/91ccff-00b1b0-006476-003434 */
@theme {
  --color-clear-sky: #91ccff;
  --color-clear-sky-50: #f1f8ff;
  --color-clear-sky-100: #e0f0ff;
  --color-clear-sky-200: #bde0ff;
  --color-clear-sky-300: #91ccff;
  --color-clear-sky-400: #74abda;
  --color-clear-sky-500: #568ebe;
  --color-clear-sky-600: #3b73a0;
  --color-clear-sky-700: #265b84;
  --color-clear-sky-800: #17466a;
  --color-clear-sky-900: #0d3654;
  --color-clear-sky-950: #042137;
  --color-teal-me-no-lies: #00b1b0;
  --color-teal-me-no-lies-50: #c9fffd;
  --color-teal-me-no-lies-100: #abf8f6;
  --color-teal-me-no-lies-200: #87e6e4;
  --color-teal-me-no-lies-300: #5ed0ce;
  --color-teal-me-no-lies-400: #00b1b0;
  --color-teal-me-no-lies-500: #009493;
  --color-teal-me-no-lies-600: #007776;
  --color-teal-me-no-lies-700: #005f5e;
  --color-teal-me-no-lies-800: #004b4a;
  --color-teal-me-no-lies-900: #003a3a;
  --color-teal-me-no-lies-950: #002525;
  --color-wakame-green: #006476;
  --color-wakame-green-50: #e5f9ff;
  --color-wakame-green-100: #c9f4ff;
  --color-wakame-green-200: #abe3f2;
  --color-wakame-green-300: #8dcedf;
  --color-wakame-green-400: #66b0c3;
  --color-wakame-green-500: #4695a8;
  --color-wakame-green-600: #297b8d;
  --color-wakame-green-700: #006476;
  --color-wakame-green-800: #004e5d;
  --color-wakame-green-900: #003c48;
  --color-wakame-green-950: #00262e;
  --color-elite-teal: #003434;
  --color-elite-teal-50: #e1fbfb;
  --color-elite-teal-100: #d4f2f1;
  --color-elite-teal-200: #bce0df;
  --color-elite-teal-300: #a2cac9;
  --color-elite-teal-400: #7daaa9;
  --color-elite-teal-500: #5f8d8d;
  --color-elite-teal-600: #457171;
  --color-elite-teal-700: #305958;
  --color-elite-teal-800: #214343;
  --color-elite-teal-900: #003434;
  --color-elite-teal-950: #0a1e1e;
}