Jewel Weed to Near Moon Color Palette

About this palette

Jewel Weed to Near Moon is a 5-color cool palette: #39A69C (Jewel Weed), #133326 (Pitch-Black Forests), #005F7B (Blue-Collar), #179469 (Viridian), #75E8E1 (Near Moon). It mixes turquoise, green, blue tones and feels cool overall. The strongest text pairing is #133326 on #75E8E1 with a contrast ratio of 9.41:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jewel Weed	rgb(57, 166, 156)	hsl(174, 49%, 44%)
Pitch-Black Forests	rgb(19, 51, 38)	hsl(156, 46%, 14%)
Blue-Collar	rgb(0, 95, 123)	hsl(194, 100%, 24%)
Viridian	rgb(23, 148, 105)	hsl(159, 73%, 34%)
Near Moon	rgb(117, 232, 225)	hsl(176, 71%, 68%)

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.

Aa9.41:1 Very good#133326 on #75E8E1
Aa9.41:1 Very good#75E8E1 on #133326
Aa4.92:1 Good#005F7B on #75E8E1
Aa4.92:1 Good#75E8E1 on #005F7B
Aa4.65:1 Good#39A69C on #133326
Aa4.65:1 Good#133326 on #39A69C
Aa3.58:1 Poor#133326 on #179469
Aa3.58:1 Poor#179469 on #133326

Color blindness preview

CSS variables

/* Jewel Weed to Near Moon — https://swatchly.xyz/palette/39a69c-133326-005f7b-179469-75e8e1 */
:root {
  --jewel-weed: #39a69c;
  --pitch-black-forests: #133326;
  --blue-collar: #005f7b;
  --viridian: #179469;
  --near-moon: #75e8e1;
}

Tailwind CSS v4

/* Jewel Weed to Near Moon — https://swatchly.xyz/palette/39a69c-133326-005f7b-179469-75e8e1 */
@theme {
  --color-jewel-weed: #39a69c;
  --color-jewel-weed-50: #e0fffb;
  --color-jewel-weed-100: #c5fdf6;
  --color-jewel-weed-200: #aaeee5;
  --color-jewel-weed-300: #8bdbd2;
  --color-jewel-weed-400: #60bfb5;
  --color-jewel-weed-500: #39a69c;
  --color-jewel-weed-600: #04887f;
  --color-jewel-weed-700: #006c64;
  --color-jewel-weed-800: #00544e;
  --color-jewel-weed-900: #00403b;
  --color-jewel-weed-950: #002724;
  --color-pitch-black-forests: #133326;
  --color-pitch-black-forests-50: #e7fbf1;
  --color-pitch-black-forests-100: #dbf1e6;
  --color-pitch-black-forests-200: #c4dfd2;
  --color-pitch-black-forests-300: #abc9ba;
  --color-pitch-black-forests-400: #88a999;
  --color-pitch-black-forests-500: #6a8c7c;
  --color-pitch-black-forests-600: #507061;
  --color-pitch-black-forests-700: #3b584a;
  --color-pitch-black-forests-800: #2a4337;
  --color-pitch-black-forests-900: #133326;
  --color-pitch-black-forests-950: #0f1d17;
  --color-blue-collar: #005f7b;
  --color-blue-collar-50: #e9f8ff;
  --color-blue-collar-100: #d2f1ff;
  --color-blue-collar-200: #abe1f9;
  --color-blue-collar-300: #8dcce6;
  --color-blue-collar-400: #65adca;
  --color-blue-collar-500: #4691af;
  --color-blue-collar-600: #297693;
  --color-blue-collar-700: #005f7b;
  --color-blue-collar-800: #004a61;
  --color-blue-collar-900: #00394b;
  --color-blue-collar-950: #002431;
  --color-viridian: #179469;
  --color-viridian-50: #d6ffea;
  --color-viridian-100: #b9f9da;
  --color-viridian-200: #98e7c2;
  --color-viridian-300: #75d1a8;
  --color-viridian-400: #46b185;
  --color-viridian-500: #179469;
  --color-viridian-600: #007853;
  --color-viridian-700: #006041;
  --color-viridian-800: #004b33;
  --color-viridian-900: #003b27;
  --color-viridian-950: #002517;
  --color-near-moon: #75e8e1;
  --color-near-moon-50: #c3fffa;
  --color-near-moon-100: #b1f6f0;
  --color-near-moon-200: #75e8e1;
  --color-near-moon-300: #6fcfc9;
  --color-near-moon-400: #3eb2ac;
  --color-near-moon-500: #009792;
  --color-near-moon-600: #007a76;
  --color-near-moon-700: #00625e;
  --color-near-moon-800: #004d4a;
  --color-near-moon-900: #003c39;
  --color-near-moon-950: #002524;
}