Mossy Glossy to Neptune Color Palette

About this palette

Mossy Glossy to Neptune is a 5-color cool palette: #819542 (Mossy Glossy), #B2C000 (Sour Lime), #FFE6EA (Porcelain Skin), #005485 (Grand Bleu), #0080B1 (Neptune). It mixes green, white, blue tones and feels cool overall. The strongest text pairing is #FFE6EA on #005485 with a contrast ratio of 6.81:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mossy Glossy	rgb(129, 149, 66)	hsl(74, 39%, 42%)
Sour Lime	rgb(178, 192, 0)	hsl(64, 100%, 38%)
Porcelain Skin	rgb(255, 230, 234)	hsl(350, 100%, 95%)
Grand Bleu	rgb(0, 84, 133)	hsl(202, 100%, 26%)
Neptune	rgb(0, 128, 177)	hsl(197, 100%, 35%)

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.

Aa6.81:1 Good#FFE6EA on #005485
Aa6.81:1 Good#005485 on #FFE6EA
Aa4.00:1 Poor#B2C000 on #005485
Aa4.00:1 Poor#005485 on #B2C000
Aa3.76:1 Poor#FFE6EA on #0080B1
Aa3.76:1 Poor#0080B1 on #FFE6EA

Color blindness preview

CSS variables

/* Mossy Glossy to Neptune — https://swatchly.xyz/palette/819542-b2c000-ffe6ea-005485-0080b1 */
:root {
  --mossy-glossy: #819542;
  --sour-lime: #b2c000;
  --porcelain-skin: #ffe6ea;
  --grand-bleu: #005485;
  --neptune: #0080b1;
}

Tailwind CSS v4

/* Mossy Glossy to Neptune — https://swatchly.xyz/palette/819542-b2c000-ffe6ea-005485-0080b1 */
@theme {
  --color-mossy-glossy: #819542;
  --color-mossy-glossy-50: #f0fdd0;
  --color-mossy-glossy-100: #e6f5c2;
  --color-mossy-glossy-200: #d2e3a7;
  --color-mossy-glossy-300: #bbce89;
  --color-mossy-glossy-400: #9cb062;
  --color-mossy-glossy-500: #819542;
  --color-mossy-glossy-600: #667925;
  --color-mossy-glossy-700: #50600d;
  --color-mossy-glossy-800: #3d4b00;
  --color-mossy-glossy-900: #2f3a00;
  --color-mossy-glossy-950: #1c2400;
  --color-sour-lime: #b2c000;
  --color-sour-lime-50: #ecf7a6;
  --color-sour-lime-100: #e0ec8f;
  --color-sour-lime-200: #cad766;
  --color-sour-lime-300: #b2c000;
  --color-sour-lime-400: #95a100;
  --color-sour-lime-500: #7d8700;
  --color-sour-lime-600: #656d00;
  --color-sour-lime-700: #505700;
  --color-sour-lime-800: #404500;
  --color-sour-lime-900: #323700;
  --color-sour-lime-950: #1f2200;
  --color-porcelain-skin: #ffe6ea;
  --color-porcelain-skin-50: #fff4f5;
  --color-porcelain-skin-100: #ffe6ea;
  --color-porcelain-skin-200: #e6d4d7;
  --color-porcelain-skin-300: #d1bcc0;
  --color-porcelain-skin-400: #b29ca0;
  --color-porcelain-skin-500: #968084;
  --color-porcelain-skin-600: #7b6669;
  --color-porcelain-skin-700: #625053;
  --color-porcelain-skin-800: #4e3d40;
  --color-porcelain-skin-900: #3c2f31;
  --color-porcelain-skin-950: #261c1e;
  --color-grand-bleu: #005485;
  --color-grand-bleu-50: #edf7ff;
  --color-grand-bleu-100: #daeeff;
  --color-grand-bleu-200: #b2dcff;
  --color-grand-bleu-300: #8bc6f6;
  --color-grand-bleu-400: #63a5da;
  --color-grand-bleu-500: #4488bd;
  --color-grand-bleu-600: #286c9e;
  --color-grand-bleu-700: #005485;
  --color-grand-bleu-800: #054168;
  --color-grand-bleu-900: #003252;
  --color-grand-bleu-950: #001f35;
  --color-neptune: #0080b1;
  --color-neptune-50: #ebf7ff;
  --color-neptune-100: #daf1ff;
  --color-neptune-200: #b4e3ff;
  --color-neptune-300: #84d1fd;
  --color-neptune-400: #59b4e5;
  --color-neptune-500: #339acc;
  --color-neptune-600: #0080b1;
  --color-neptune-700: #00668d;
  --color-neptune-800: #004f6f;
  --color-neptune-900: #003d56;
  --color-neptune-950: #002638;
}