Moor-Monster to Black-Hearted Color Palette

About this palette

Moor-Monster to Black-Hearted is a 5-color cool, earthy, vintage palette: #125734 (Moor-Monster), #A6DDA2 (Fizz), #BD8DA0 (Pinch Me), #0A768D (Celestial), #451A21 (Black-Hearted). It mixes green, pink, blue, brown tones and feels cool overall. The strongest text pairing is #A6DDA2 on #451A21 with a contrast ratio of 9.48:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Moor-Monster	rgb(18, 87, 52)	hsl(150, 66%, 21%)
Fizz	rgb(166, 221, 162)	hsl(116, 46%, 75%)
Pinch Me	rgb(189, 141, 160)	hsl(336, 27%, 65%)
Celestial	rgb(10, 118, 141)	hsl(191, 87%, 30%)
Black-Hearted	rgb(69, 26, 33)	hsl(350, 45%, 19%)

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.48:1 Very good#A6DDA2 on #451A21
Aa9.48:1 Very good#451A21 on #A6DDA2
Aa5.53:1 Good#125734 on #A6DDA2
Aa5.53:1 Good#A6DDA2 on #125734
Aa5.26:1 Good#BD8DA0 on #451A21
Aa5.26:1 Good#451A21 on #BD8DA0
Aa3.38:1 Poor#A6DDA2 on #0A768D
Aa3.38:1 Poor#0A768D on #A6DDA2

Color blindness preview

CSS variables

/* Moor-Monster to Black-Hearted — https://swatchly.xyz/palette/125734-a6dda2-bd8da0-0a768d-451a21 */
:root {
  --moor-monster: #125734;
  --fizz: #a6dda2;
  --pinch-me: #bd8da0;
  --celestial: #0a768d;
  --black-hearted: #451a21;
}

Tailwind CSS v4

/* Moor-Monster to Black-Hearted — https://swatchly.xyz/palette/125734-a6dda2-bd8da0-0a768d-451a21 */
@theme {
  --color-moor-monster: #125734;
  --color-moor-monster-50: #deffe8;
  --color-moor-monster-100: #cff7dc;
  --color-moor-monster-200: #b5e5c5;
  --color-moor-monster-300: #9bd1ae;
  --color-moor-monster-400: #77b48e;
  --color-moor-monster-500: #5b9a73;
  --color-moor-monster-600: #41805b;
  --color-moor-monster-700: #2d6947;
  --color-moor-monster-800: #125734;
  --color-moor-monster-900: #124329;
  --color-moor-monster-950: #072b18;
  --color-fizz: #a6dda2;
  --color-fizz-50: #f3fff2;
  --color-fizz-100: #defddb;
  --color-fizz-200: #c7edc4;
  --color-fizz-300: #a6dda2;
  --color-fizz-400: #88ba84;
  --color-fizz-500: #689c65;
  --color-fizz-600: #4d7f4a;
  --color-fizz-700: #376534;
  --color-fizz-800: #264f24;
  --color-fizz-900: #193c18;
  --color-fizz-950: #0d260c;
  --color-pinch-me: #bd8da0;
  --color-pinch-me-50: #ffeef4;
  --color-pinch-me-100: #ffdfeb;
  --color-pinch-me-200: #efc8d7;
  --color-pinch-me-300: #daafc0;
  --color-pinch-me-400: #bd8da0;
  --color-pinch-me-500: #a17385;
  --color-pinch-me-600: #855a6c;
  --color-pinch-me-700: #6d4656;
  --color-pinch-me-800: #573543;
  --color-pinch-me-900: #452834;
  --color-pinch-me-950: #2d1821;
  --color-celestial: #0a768d;
  --color-celestial-50: #e6f9ff;
  --color-celestial-100: #cbf3ff;
  --color-celestial-200: #a3e2f5;
  --color-celestial-300: #83cde2;
  --color-celestial-400: #59aec5;
  --color-celestial-500: #3592a9;
  --color-celestial-600: #0a768d;
  --color-celestial-700: #005e71;
  --color-celestial-800: #004959;
  --color-celestial-900: #003945;
  --color-celestial-950: #00232c;
  --color-black-hearted: #451a21;
  --color-black-hearted-50: #fff1f2;
  --color-black-hearted-100: #ffe3e6;
  --color-black-hearted-200: #f6cbcf;
  --color-black-hearted-300: #e3b2b7;
  --color-black-hearted-400: #c49095;
  --color-black-hearted-500: #a67278;
  --color-black-hearted-600: #88575d;
  --color-black-hearted-700: #6c4146;
  --color-black-hearted-800: #532f33;
  --color-black-hearted-900: #451a21;
  --color-black-hearted-950: #261214;
}