Seafoam Splashes to Rich Black color palette

AFEED0Seafoam Splashes 61CDC6Petrichor 00A2A0Silken Jade 1B7C54Opal Green 003D45Rich Black

About this palette

Seafoam Splashes to Rich Black is a 5-color cool, gradient palette: #AFEED0 (Seafoam Splashes), #61CDC6 (Petrichor), #00A2A0 (Silken Jade), #1B7C54 (Opal Green), #003D45 (Rich Black). It mixes green, turquoise tones and feels cool overall. The strongest text pairing is #AFEED0 on #003D45 with a contrast ratio of 9.10:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Seafoam Splashes	rgb(175, 238, 208)	hsl(151, 65%, 81%)
Petrichor	rgb(97, 205, 198)	hsl(176, 52%, 59%)
Silken Jade	rgb(0, 162, 160)	hsl(179, 100%, 32%)
Opal Green	rgb(27, 124, 84)	hsl(155, 64%, 30%)
Rich Black	rgb(0, 61, 69)	hsl(187, 100%, 14%)

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.10:1 Very good#AFEED0 on #003D45
Aa9.10:1 Very good#003D45 on #AFEED0
Aa6.31:1 Good#61CDC6 on #003D45
Aa6.31:1 Good#003D45 on #61CDC6
Aa3.93:1 Poor#AFEED0 on #1B7C54
Aa3.93:1 Poor#1B7C54 on #AFEED0
Aa3.81:1 Poor#00A2A0 on #003D45
Aa3.81:1 Poor#003D45 on #00A2A0

Color blindness preview

CSS variables

/* Seafoam Splashes to Rich Black — https://swatchly.xyz/palette/afeed0-61cdc6-00a2a0-1b7c54-003d45 */
:root {
  --seafoam-splashes: #afeed0;
  --petrichor: #61cdc6;
  --silken-jade: #00a2a0;
  --opal-green: #1b7c54;
  --rich-black: #003d45;
}

Tailwind CSS v4

/* Seafoam Splashes to Rich Black — https://swatchly.xyz/palette/afeed0-61cdc6-00a2a0-1b7c54-003d45 */
@theme {
  --color-seafoam-splashes: #afeed0;
  --color-seafoam-splashes-50: #ebfff5;
  --color-seafoam-splashes-100: #d6fae8;
  --color-seafoam-splashes-200: #afeed0;
  --color-seafoam-splashes-300: #a0d3bb;
  --color-seafoam-splashes-400: #7ab499;
  --color-seafoam-splashes-500: #5b987d;
  --color-seafoam-splashes-600: #407b62;
  --color-seafoam-splashes-700: #2b624b;
  --color-seafoam-splashes-800: #1b4d39;
  --color-seafoam-splashes-900: #113c2b;
  --color-seafoam-splashes-950: #07261a;
  --color-petrichor: #61cdc6;
  --color-petrichor-50: #c5fef9;
  --color-petrichor-100: #b3f4ef;
  --color-petrichor-200: #92e1db;
  --color-petrichor-300: #61cdc6;
  --color-petrichor-400: #43aea7;
  --color-petrichor-500: #16948e;
  --color-petrichor-600: #007873;
  --color-petrichor-700: #00605c;
  --color-petrichor-800: #004c49;
  --color-petrichor-900: #003c39;
  --color-petrichor-950: #002523;
  --color-silken-jade: #00a2a0;
  --color-silken-jade-50: #dbfffd;
  --color-silken-jade-100: #bafdfa;
  --color-silken-jade-200: #9cedea;
  --color-silken-jade-300: #79d9d7;
  --color-silken-jade-400: #46bcba;
  --color-silken-jade-500: #00a2a0;
  --color-silken-jade-600: #008381;
  --color-silken-jade-700: #006766;
  --color-silken-jade-800: #005150;
  --color-silken-jade-900: #003e3d;
  --color-silken-jade-950: #002626;
  --color-opal-green: #1b7c54;
  --color-opal-green-50: #dcffeb;
  --color-opal-green-100: #c4f9dc;
  --color-opal-green-200: #a8e8c5;
  --color-opal-green-300: #89d2ac;
  --color-opal-green-400: #60b48a;
  --color-opal-green-500: #3e986e;
  --color-opal-green-600: #1b7c54;
  --color-opal-green-700: #026440;
  --color-opal-green-800: #004e31;
  --color-opal-green-900: #003c25;
  --color-opal-green-950: #002616;
  --color-rich-black: #003d45;
  --color-rich-black-50: #e1fbff;
  --color-rich-black-100: #d1f2f8;
  --color-rich-black-200: #b8e0e7;
  --color-rich-black-300: #9dcad2;
  --color-rich-black-400: #7aacb4;
  --color-rich-black-500: #5d919a;
  --color-rich-black-600: #44767f;
  --color-rich-black-700: #305f67;
  --color-rich-black-800: #214c52;
  --color-rich-black-900: #003d45;
  --color-rich-black-950: #0a262a;
}