Start generating

Moor-Monster to Pig Pink color palette

00573AMoor-MonsterAD376FHibiscus0098D7HomeworldFFB498PersicusE27831Spiced up OrangeFFD6E3Pig Pink
Open in generator Export PNG, PDF, ASE…

About this palette

Moor-Monster to Pig Pink is a 6-color warm palette: #00573A (Moor-Monster), #AD376F (Hibiscus), #0098D7 (Homeworld), #FFB498 (Persicus), #E27831 (Spiced up Orange), #FFD6E3 (Pig Pink). It mixes green, red, blue, orange, pink tones and feels warm overall. The strongest text pairing is #00573A on #FFD6E3 with a contrast ratio of 6.59:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Moor-Monsterrgb(0, 87, 58)hsl(160, 100%, 17%)
Hibiscusrgb(173, 55, 111)hsl(332, 52%, 45%)
Homeworldrgb(0, 152, 215)hsl(198, 100%, 42%)
Persicusrgb(255, 180, 152)hsl(16, 100%, 80%)
Spiced up Orangergb(226, 120, 49)hsl(24, 75%, 54%)
Pig Pinkrgb(255, 214, 227)hsl(341, 100%, 92%)

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.59:1 Good#00573A on #FFD6E3
  • Aa6.59:1 Good#FFD6E3 on #00573A
  • Aa5.05:1 Good#00573A on #FFB498
  • Aa5.05:1 Good#FFB498 on #00573A
  • Aa4.50:1 Poor#AD376F on #FFD6E3
  • Aa4.50:1 Poor#FFD6E3 on #AD376F
  • Aa3.44:1 Poor#AD376F on #FFB498
  • Aa3.44:1 Poor#FFB498 on #AD376F

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Moor-Monster to Pig Pink — https://swatchly.xyz/palette/00573a-ad376f-0098d7-ffb498-e27831-ffd6e3 */
:root {
  --moor-monster: #00573a;
  --hibiscus: #ad376f;
  --homeworld: #0098d7;
  --persicus: #ffb498;
  --spiced-up-orange: #e27831;
  --pig-pink: #ffd6e3;
}

Tailwind CSS v4

/* Moor-Monster to Pig Pink — https://swatchly.xyz/palette/00573a-ad376f-0098d7-ffb498-e27831-ffd6e3 */
@theme {
  --color-moor-monster: #00573a;
  --color-moor-monster-50: #dcffec;
  --color-moor-monster-100: #ccf7e0;
  --color-moor-monster-200: #b1e6cb;
  --color-moor-monster-300: #96d2b4;
  --color-moor-monster-400: #71b594;
  --color-moor-monster-500: #549a7a;
  --color-moor-monster-600: #3a8061;
  --color-moor-monster-700: #25694d;
  --color-moor-monster-800: #00573a;
  --color-moor-monster-900: #0a432d;
  --color-moor-monster-950: #022b1b;
  --color-hibiscus: #ad376f;
  --color-hibiscus-50: #fff1f6;
  --color-hibiscus-100: #ffe2ec;
  --color-hibiscus-200: #ffc4d9;
  --color-hibiscus-300: #ff9ec4;
  --color-hibiscus-400: #e973a5;
  --color-hibiscus-500: #cc548a;
  --color-hibiscus-600: #ad376f;
  --color-hibiscus-700: #8e2458;
  --color-hibiscus-800: #731445;
  --color-hibiscus-900: #5c0a35;
  --color-hibiscus-950: #3d0321;
  --color-homeworld: #0098d7;
  --color-homeworld-50: #eef8ff;
  --color-homeworld-100: #ddf1ff;
  --color-homeworld-200: #b6e2ff;
  --color-homeworld-300: #84d0ff;
  --color-homeworld-400: #44b3f0;
  --color-homeworld-500: #0098d7;
  --color-homeworld-600: #007aae;
  --color-homeworld-700: #00618b;
  --color-homeworld-800: #004b6d;
  --color-homeworld-900: #003955;
  --color-homeworld-950: #002336;
  --color-persicus: #ffb498;
  --color-persicus-50: #fff7f4;
  --color-persicus-100: #ffece5;
  --color-persicus-200: #ffd3c3;
  --color-persicus-300: #ffb498;
  --color-persicus-400: #d9957b;
  --color-persicus-500: #bc775d;
  --color-persicus-600: #9d5b42;
  --color-persicus-700: #81452e;
  --color-persicus-800: #67331f;
  --color-persicus-900: #502513;
  --color-persicus-950: #341509;
  --color-spiced-up-orange: #e27831;
  --color-spiced-up-orange-50: #ffeee5;
  --color-spiced-up-orange-100: #ffdfce;
  --color-spiced-up-orange-200: #ffc2a0;
  --color-spiced-up-orange-300: #ff9e64;
  --color-spiced-up-orange-400: #e27831;
  --color-spiced-up-orange-500: #c55d05;
  --color-spiced-up-orange-600: #a04a00;
  --color-spiced-up-orange-700: #813a00;
  --color-spiced-up-orange-800: #672d00;
  --color-spiced-up-orange-900: #512200;
  --color-spiced-up-orange-950: #361400;
  --color-pig-pink: #ffd6e3;
  --color-pig-pink-50: #ffe7ee;
  --color-pig-pink-100: #ffd6e3;
  --color-pig-pink-200: #e6c7d1;
  --color-pig-pink-300: #d3b1bc;
  --color-pig-pink-400: #b7929e;
  --color-pig-pink-500: #9c7884;
  --color-pig-pink-600: #825f6b;
  --color-pig-pink-700: #6a4b55;
  --color-pig-pink-800: #543943;
  --color-pig-pink-900: #422b33;
  --color-pig-pink-950: #2a1a1f;
}

Similar palettes