Moor-Monster to Ultra Mint Color Palette

About this palette

Moor-Monster to Ultra Mint is a 5-color cool, earthy, monochromatic, gradient palette: #005336 (Moor-Monster), #007C60 (Opal Green), #10A574 (Bejewelled), #4DD6A8 (Vegetation), #95ECC1 (Ultra Mint). It mixes green, turquoise tones and feels cool overall. The strongest text pairing is #005336 on #95ECC1 with a contrast ratio of 6.57:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Moor-Monster	rgb(0, 83, 54)	hsl(159, 100%, 16%)
Opal Green	rgb(0, 124, 96)	hsl(166, 100%, 24%)
Bejewelled	rgb(16, 165, 116)	hsl(160, 82%, 35%)
Vegetation	rgb(77, 214, 168)	hsl(160, 63%, 57%)
Ultra Mint	rgb(149, 236, 193)	hsl(150, 70%, 75%)

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.57:1 Good#005336 on #95ECC1
Aa6.57:1 Good#95ECC1 on #005336
Aa5.02:1 Good#005336 on #4DD6A8
Aa5.02:1 Good#4DD6A8 on #005336
Aa3.71:1 Poor#007C60 on #95ECC1
Aa3.71:1 Poor#95ECC1 on #007C60

Color blindness preview

CSS variables

/* Moor-Monster to Ultra Mint — https://swatchly.xyz/palette/005336-007c60-10a574-4dd6a8-95ecc1 */
:root {
  --moor-monster: #005336;
  --opal-green: #007c60;
  --bejewelled: #10a574;
  --vegetation: #4dd6a8;
  --ultra-mint: #95ecc1;
}

Tailwind CSS v4

/* Moor-Monster to Ultra Mint — https://swatchly.xyz/palette/005336-007c60-10a574-4dd6a8-95ecc1 */
@theme {
  --color-moor-monster: #005336;
  --color-moor-monster-50: #dcffec;
  --color-moor-monster-100: #cdf7e0;
  --color-moor-monster-200: #b3e5ca;
  --color-moor-monster-300: #97d1b3;
  --color-moor-monster-400: #72b392;
  --color-moor-monster-500: #549877;
  --color-moor-monster-600: #3a7d5e;
  --color-moor-monster-700: #256649;
  --color-moor-monster-800: #005336;
  --color-moor-monster-900: #0b3f2a;
  --color-moor-monster-950: #032819;
  --color-opal-green: #007c60;
  --color-opal-green-50: #dafff1;
  --color-opal-green-100: #c1f9e4;
  --color-opal-green-200: #a3e8cf;
  --color-opal-green-300: #82d2b7;
  --color-opal-green-400: #57b496;
  --color-opal-green-500: #33987a;
  --color-opal-green-600: #007c60;
  --color-opal-green-700: #00634c;
  --color-opal-green-800: #004d3b;
  --color-opal-green-900: #003c2d;
  --color-opal-green-950: #00261b;
  --color-bejewelled: #10a574;
  --color-bejewelled-50: #e0ffef;
  --color-bejewelled-100: #bcffde;
  --color-bejewelled-200: #9df0c8;
  --color-bejewelled-300: #7adcb0;
  --color-bejewelled-400: #49bf8f;
  --color-bejewelled-500: #10a574;
  --color-bejewelled-600: #00855c;
  --color-bejewelled-700: #006a48;
  --color-bejewelled-800: #005338;
  --color-bejewelled-900: #003f2a;
  --color-bejewelled-950: #002819;
  --color-vegetation: #4dd6a8;
  --color-vegetation-50: #cdffea;
  --color-vegetation-100: #acfada;
  --color-vegetation-200: #8ae8c4;
  --color-vegetation-300: #4dd6a8;
  --color-vegetation-400: #28b68b;
  --color-vegetation-500: #009972;
  --color-vegetation-600: #007c5c;
  --color-vegetation-700: #006349;
  --color-vegetation-800: #004e39;
  --color-vegetation-900: #003d2c;
  --color-vegetation-950: #00261a;
  --color-ultra-mint: #95ecc1;
  --color-ultra-mint-50: #d9ffea;
  --color-ultra-mint-100: #c4f8dd;
  --color-ultra-mint-200: #95ecc1;
  --color-ultra-mint-300: #8ad2ae;
  --color-ultra-mint-400: #62b48d;
  --color-ultra-mint-500: #419972;
  --color-ultra-mint-600: #237d59;
  --color-ultra-mint-700: #086544;
  --color-ultra-mint-800: #005034;
  --color-ultra-mint-900: #003e27;
  --color-ultra-mint-950: #002717;
}