Noxious to Pine Scented Lagoon Color Palette

About this palette

Noxious to Pine Scented Lagoon is a 4-color cool palette: #7CA200 (Noxious), #241037 (Midnight Monarch), #FFBECE (Pink), #006F63 (Pine Scented Lagoon). It mixes green, purple, pink, turquoise tones and feels cool overall. The strongest text pairing is #241037 on #FFBECE with a contrast ratio of 11.22:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Noxious	rgb(124, 162, 0)	hsl(74, 100%, 32%)
Midnight Monarch	rgb(36, 16, 55)	hsl(271, 55%, 14%)
Pink	rgb(255, 190, 206)	hsl(345, 100%, 87%)
Pine Scented Lagoon	rgb(0, 111, 99)	hsl(174, 100%, 22%)

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.

Aa11.22:1 Very good#241037 on #FFBECE
Aa11.22:1 Very good#FFBECE on #241037
Aa5.83:1 Good#7CA200 on #241037
Aa5.83:1 Good#241037 on #7CA200
Aa3.91:1 Poor#FFBECE on #006F63
Aa3.91:1 Poor#006F63 on #FFBECE

Color blindness preview

CSS variables

/* Noxious to Pine Scented Lagoon — https://swatchly.xyz/palette/7ca200-241037-ffbece-006f63 */
:root {
  --noxious: #7ca200;
  --midnight-monarch: #241037;
  --pink: #ffbece;
  --pine-scented-lagoon: #006f63;
}

Tailwind CSS v4

/* Noxious to Pine Scented Lagoon — https://swatchly.xyz/palette/7ca200-241037-ffbece-006f63 */
@theme {
  --color-noxious: #7ca200;
  --color-noxious-50: #eeffd4;
  --color-noxious-100: #e1fcb3;
  --color-noxious-200: #cdec95;
  --color-noxious-300: #b6d873;
  --color-noxious-400: #96bc42;
  --color-noxious-500: #7ca200;
  --color-noxious-600: #638200;
  --color-noxious-700: #4e6700;
  --color-noxious-800: #3c5000;
  --color-noxious-900: #2d3d00;
  --color-noxious-950: #1a2500;
  --color-midnight-monarch: #241037;
  --color-midnight-monarch-50: #f8f2ff;
  --color-midnight-monarch-100: #f0e6ff;
  --color-midnight-monarch-200: #e0cff5;
  --color-midnight-monarch-300: #cab7e3;
  --color-midnight-monarch-400: #ac97c6;
  --color-midnight-monarch-500: #907aaa;
  --color-midnight-monarch-600: #74608c;
  --color-midnight-monarch-700: #5c4972;
  --color-midnight-monarch-800: #47375a;
  --color-midnight-monarch-900: #362945;
  --color-midnight-monarch-950: #241037;
  --color-pink: #ffbece;
  --color-pink-50: #ffecf0;
  --color-pink-100: #ffdde5;
  --color-pink-200: #ffbece;
  --color-pink-300: #e3abb9;
  --color-pink-400: #c68b9a;
  --color-pink-500: #ab7080;
  --color-pink-600: #8f5766;
  --color-pink-700: #754351;
  --color-pink-800: #5f333f;
  --color-pink-900: #4b2630;
  --color-pink-950: #30161d;
  --color-pine-scented-lagoon: #006f63;
  --color-pine-scented-lagoon-50: #d7fff7;
  --color-pine-scented-lagoon-100: #c4f8ee;
  --color-pine-scented-lagoon-200: #abe8dc;
  --color-pine-scented-lagoon-300: #8ed5c8;
  --color-pine-scented-lagoon-400: #67b8ab;
  --color-pine-scented-lagoon-500: #489f91;
  --color-pine-scented-lagoon-600: #2a8578;
  --color-pine-scented-lagoon-700: #006f63;
  --color-pine-scented-lagoon-800: #00574d;
  --color-pine-scented-lagoon-900: #00433b;
  --color-pine-scented-lagoon-950: #002b25;
}