Mosque to Pristine Oceanic color palette

00605AMosque 00AB9EBilliard 88DFD2Sea Foam 008D83Go Go Green 003531Elite Teal 36C7B1Pristine Oceanic

Open in generator Export PNG, PDF, ASE…

About this palette

Mosque to Pristine Oceanic is a 6-color cool, monochromatic palette: #00605A (Mosque), #00AB9E (Billiard), #88DFD2 (Sea Foam), #008D83 (Go Go Green), #003531 (Elite Teal), #36C7B1 (Pristine Oceanic). It mixes turquoise tones and feels cool overall. The strongest text pairing is #88DFD2 on #003531 with a contrast ratio of 8.71:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mosque	rgb(0, 96, 90)	hsl(176, 100%, 19%)
Billiard	rgb(0, 171, 158)	hsl(175, 100%, 34%)
Sea Foam	rgb(136, 223, 210)	hsl(171, 58%, 70%)
Go Go Green	rgb(0, 141, 131)	hsl(176, 100%, 28%)
Elite Teal	rgb(0, 53, 49)	hsl(175, 100%, 10%)
Pristine Oceanic	rgb(54, 199, 177)	hsl(171, 57%, 50%)

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.71:1 Very good#88DFD2 on #003531
Aa8.71:1 Very good#003531 on #88DFD2
Aa6.41:1 Good#003531 on #36C7B1
Aa6.41:1 Good#36C7B1 on #003531
Aa4.80:1 Good#00605A on #88DFD2
Aa4.80:1 Good#88DFD2 on #00605A
Aa4.71:1 Good#00AB9E on #003531
Aa4.71:1 Good#003531 on #00AB9E

Color blindness preview

CSS variables

/* Mosque to Pristine Oceanic — https://swatchly.xyz/palette/00605a-00ab9e-88dfd2-008d83-003531-36c7b1 */
:root {
  --mosque: #00605a;
  --billiard: #00ab9e;
  --sea-foam: #88dfd2;
  --go-go-green: #008d83;
  --elite-teal: #003531;
  --pristine-oceanic: #36c7b1;
}

Tailwind CSS v4

/* Mosque to Pristine Oceanic — https://swatchly.xyz/palette/00605a-00ab9e-88dfd2-008d83-003531-36c7b1 */
@theme {
  --color-mosque: #00605a;
  --color-mosque-50: #d6fffa;
  --color-mosque-100: #c8f6f1;
  --color-mosque-200: #ade4dd;
  --color-mosque-300: #8ecec7;
  --color-mosque-400: #67afa8;
  --color-mosque-500: #47938c;
  --color-mosque-600: #2a7771;
  --color-mosque-700: #00605a;
  --color-mosque-800: #034b46;
  --color-mosque-900: #003a36;
  --color-mosque-950: #002421;
  --color-billiard: #00ab9e;
  --color-billiard-50: #c0fff6;
  --color-billiard-100: #a7f6eb;
  --color-billiard-200: #83e2d6;
  --color-billiard-300: #59cbbf;
  --color-billiard-400: #00ab9e;
  --color-billiard-500: #008f84;
  --color-billiard-600: #00736a;
  --color-billiard-700: #005c55;
  --color-billiard-800: #004943;
  --color-billiard-900: #003a35;
  --color-billiard-950: #002622;
  --color-sea-foam: #88dfd2;
  --color-sea-foam-50: #effffc;
  --color-sea-foam-100: #d0fef6;
  --color-sea-foam-200: #b6efe5;
  --color-sea-foam-300: #88dfd2;
  --color-sea-foam-400: #6cbcb0;
  --color-sea-foam-500: #479e93;
  --color-sea-foam-600: #258176;
  --color-sea-foam-700: #03675d;
  --color-sea-foam-800: #005048;
  --color-sea-foam-900: #003c36;
  --color-sea-foam-950: #002621;
  --color-go-go-green: #008d83;
  --color-go-go-green-50: #ccfff8;
  --color-go-go-green-100: #b5f6ed;
  --color-go-go-green-200: #93e2d8;
  --color-go-go-green-300: #6ecbc1;
  --color-go-go-green-400: #3daba0;
  --color-go-go-green-500: #008d83;
  --color-go-go-green-600: #007269;
  --color-go-go-green-700: #005b54;
  --color-go-go-green-800: #004742;
  --color-go-go-green-900: #003833;
  --color-go-go-green-950: #002421;
  --color-elite-teal: #003531;
  --color-elite-teal-50: #e1fcf8;
  --color-elite-teal-100: #d4f3ee;
  --color-elite-teal-200: #bce0db;
  --color-elite-teal-300: #a1cbc5;
  --color-elite-teal-400: #7daba5;
  --color-elite-teal-500: #5f8e89;
  --color-elite-teal-600: #45726d;
  --color-elite-teal-700: #305955;
  --color-elite-teal-800: #214441;
  --color-elite-teal-900: #003531;
  --color-elite-teal-950: #0a1f1d;
  --color-pristine-oceanic: #36c7b1;
  --color-pristine-oceanic-50: #eafffa;
  --color-pristine-oceanic-100: #c9fff3;
  --color-pristine-oceanic-200: #9ff3e2;
  --color-pristine-oceanic-300: #7ce1ce;
  --color-pristine-oceanic-400: #36c7b1;
  --color-pristine-oceanic-500: #00a793;
  --color-pristine-oceanic-600: #008676;
  --color-pristine-oceanic-700: #006a5d;
  --color-pristine-oceanic-800: #005247;
  --color-pristine-oceanic-900: #003e36;
  --color-pristine-oceanic-950: #002620;
}