Start generating

Teal Me No Lies to Elite Teal color palette

00B1B7Teal Me No Lies5ADBDEHammam Blue008186Teal006569Wakame Green318384Turkish Jade003031Elite Teal
Open in generator Export PNG, PDF, ASE…

About this palette

Teal Me No Lies to Elite Teal is a 6-color cool, monochromatic palette: #00B1B7 (Teal Me No Lies), #5ADBDE (Hammam Blue), #008186 (Teal), #006569 (Wakame Green), #318384 (Turkish Jade), #003031 (Elite Teal). It mixes turquoise tones and feels cool overall. The strongest text pairing is #5ADBDE on #003031 with a contrast ratio of 8.60:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Teal Me No Liesrgb(0, 177, 183)hsl(182, 100%, 36%)
Hammam Bluergb(90, 219, 222)hsl(181, 67%, 61%)
Tealrgb(0, 129, 134)hsl(182, 100%, 26%)
Wakame Greenrgb(0, 101, 105)hsl(182, 100%, 21%)
Turkish Jadergb(49, 131, 132)hsl(181, 46%, 35%)
Elite Tealrgb(0, 48, 49)hsl(181, 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.

  • Aa8.60:1 Very good#5ADBDE on #003031
  • Aa8.60:1 Very good#003031 on #5ADBDE
  • Aa5.43:1 Good#00B1B7 on #003031
  • Aa5.43:1 Good#003031 on #00B1B7
  • Aa4.12:1 Poor#5ADBDE on #006569
  • Aa4.12:1 Poor#006569 on #5ADBDE
  • Aa3.21:1 Poor#318384 on #003031
  • Aa3.21:1 Poor#003031 on #318384

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Teal Me No Lies to Elite Teal — https://swatchly.xyz/palette/00b1b7-5adbde-008186-006569-318384-003031 */
:root {
  --teal-me-no-lies: #00b1b7;
  --hammam-blue: #5adbde;
  --teal: #008186;
  --wakame-green: #006569;
  --turkish-jade: #318384;
  --elite-teal: #003031;
}

Tailwind CSS v4

/* Teal Me No Lies to Elite Teal — https://swatchly.xyz/palette/00b1b7-5adbde-008186-006569-318384-003031 */
@theme {
  --color-teal-me-no-lies: #00b1b7;
  --color-teal-me-no-lies-50: #cffdff;
  --color-teal-me-no-lies-100: #abf8fb;
  --color-teal-me-no-lies-200: #88e6ea;
  --color-teal-me-no-lies-300: #5ed0d5;
  --color-teal-me-no-lies-400: #00b1b7;
  --color-teal-me-no-lies-500: #009399;
  --color-teal-me-no-lies-600: #00777b;
  --color-teal-me-no-lies-700: #005f62;
  --color-teal-me-no-lies-800: #004b4d;
  --color-teal-me-no-lies-900: #003a3c;
  --color-teal-me-no-lies-950: #002527;
  --color-hammam-blue: #5adbde;
  --color-hammam-blue-50: #deffff;
  --color-hammam-blue-100: #b8fcfe;
  --color-hammam-blue-200: #98eced;
  --color-hammam-blue-300: #5adbde;
  --color-hammam-blue-400: #3bb9bc;
  --color-hammam-blue-500: #009c9f;
  --color-hammam-blue-600: #007d80;
  --color-hammam-blue-700: #006365;
  --color-hammam-blue-800: #004d4f;
  --color-hammam-blue-900: #003b3d;
  --color-hammam-blue-950: #002526;
  --color-teal: #008186;
  --color-teal-50: #d9feff;
  --color-teal-100: #c0f8fb;
  --color-teal-200: #a4e8eb;
  --color-teal-300: #84d4d7;
  --color-teal-400: #59b6bb;
  --color-teal-500: #349ca0;
  --color-teal-600: #008186;
  --color-teal-700: #00666b;
  --color-teal-800: #005053;
  --color-teal-900: #003e40;
  --color-teal-950: #002728;
  --color-wakame-green: #006569;
  --color-wakame-green-50: #d9feff;
  --color-wakame-green-100: #c6f6f8;
  --color-wakame-green-200: #ace4e7;
  --color-wakame-green-300: #8ed0d3;
  --color-wakame-green-400: #67b2b5;
  --color-wakame-green-500: #47979a;
  --color-wakame-green-600: #2a7c80;
  --color-wakame-green-700: #006569;
  --color-wakame-green-800: #004f52;
  --color-wakame-green-900: #003d40;
  --color-wakame-green-950: #002628;
  --color-turkish-jade: #318384;
  --color-turkish-jade-50: #d5ffff;
  --color-turkish-jade-100: #c9f7f7;
  --color-turkish-jade-200: #b0e7e7;
  --color-turkish-jade-300: #93d4d4;
  --color-turkish-jade-400: #6db7b7;
  --color-turkish-jade-500: #4e9d9e;
  --color-turkish-jade-600: #318384;
  --color-turkish-jade-700: #17696a;
  --color-turkish-jade-800: #015354;
  --color-turkish-jade-900: #004041;
  --color-turkish-jade-950: #002829;
  --color-elite-teal: #003031;
  --color-elite-teal-50: #e2fbfb;
  --color-elite-teal-100: #d6f2f2;
  --color-elite-teal-200: #bedfdf;
  --color-elite-teal-300: #a3caca;
  --color-elite-teal-400: #7ea9a9;
  --color-elite-teal-500: #608b8c;
  --color-elite-teal-600: #456f6f;
  --color-elite-teal-700: #305556;
  --color-elite-teal-800: #204040;
  --color-elite-teal-900: #003031;
  --color-elite-teal-950: #091b1b;
}

Similar palettes