Seafoam Splashes to Bruise Color Palette

About this palette

Seafoam Splashes to Bruise is a 4-color palette: #A5EECC (Seafoam Splashes), #4C1638 (Blackberry), #3FB06C (Green Mana), #834074 (Bruise). It mixes green, red, pink tones and feels balanced overall. The strongest text pairing is #A5EECC on #4C1638 with a contrast ratio of 10.62:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Seafoam Splashes	rgb(165, 238, 204)	hsl(152, 68%, 79%)
Blackberry	rgb(76, 22, 56)	hsl(322, 55%, 19%)
Green Mana	rgb(63, 176, 108)	hsl(144, 47%, 47%)
Bruise	rgb(131, 64, 116)	hsl(313, 34%, 38%)

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.

Aa10.62:1 Very good#A5EECC on #4C1638
Aa10.62:1 Very good#4C1638 on #A5EECC
Aa5.32:1 Good#A5EECC on #834074
Aa5.32:1 Good#834074 on #A5EECC
Aa5.16:1 Good#4C1638 on #3FB06C
Aa5.16:1 Good#3FB06C on #4C1638

Color blindness preview

CSS variables

/* Seafoam Splashes to Bruise — https://swatchly.xyz/palette/a5eecc-4c1638-3fb06c-834074 */
:root {
  --seafoam-splashes: #a5eecc;
  --blackberry: #4c1638;
  --green-mana: #3fb06c;
  --bruise: #834074;
}

Tailwind CSS v4

/* Seafoam Splashes to Bruise — https://swatchly.xyz/palette/a5eecc-4c1638-3fb06c-834074 */
@theme {
  --color-seafoam-splashes: #a5eecc;
  --color-seafoam-splashes-50: #e5fff2;
  --color-seafoam-splashes-100: #d0fae5;
  --color-seafoam-splashes-200: #a5eecc;
  --color-seafoam-splashes-300: #98d3b7;
  --color-seafoam-splashes-400: #71b596;
  --color-seafoam-splashes-500: #51997a;
  --color-seafoam-splashes-600: #367c5f;
  --color-seafoam-splashes-700: #20644a;
  --color-seafoam-splashes-800: #104e38;
  --color-seafoam-splashes-900: #063d2a;
  --color-seafoam-splashes-950: #012619;
  --color-blackberry: #4c1638;
  --color-blackberry-50: #fff0f8;
  --color-blackberry-100: #ffe2f1;
  --color-blackberry-200: #fac6e2;
  --color-blackberry-300: #e7adcc;
  --color-blackberry-400: #c98aad;
  --color-blackberry-500: #ac6d91;
  --color-blackberry-600: #8e5375;
  --color-blackberry-700: #723d5c;
  --color-blackberry-800: #592d47;
  --color-blackberry-900: #4c1638;
  --color-blackberry-950: #2b1120;
  --color-green-mana: #3fb06c;
  --color-green-mana-50: #d1ffdd;
  --color-green-mana-100: #b5f9c9;
  --color-green-mana-200: #95e6ae;
  --color-green-mana-300: #71d091;
  --color-green-mana-400: #3fb06c;
  --color-green-mana-500: #199553;
  --color-green-mana-600: #007a40;
  --color-green-mana-700: #006132;
  --color-green-mana-800: #004d26;
  --color-green-mana-900: #003d1d;
  --color-green-mana-950: #002710;
  --color-bruise: #834074;
  --color-bruise-50: #fff0fa;
  --color-bruise-100: #ffe1f6;
  --color-bruise-200: #fdc4ee;
  --color-bruise-300: #ecacdb;
  --color-bruise-400: #d18bbf;
  --color-bruise-500: #b66fa5;
  --color-bruise-600: #9b568a;
  --color-bruise-700: #834074;
  --color-bruise-800: #68305c;
  --color-bruise-900: #522348;
  --color-bruise-950: #36132e;
}