Super Pink to Wasabi Color Palette

About this palette

Super Pink to Wasabi is a 5-color cool palette: #D8689F (Super Pink), #49163B (Velvet Cosmos), #5A7C47 (Mana Tree), #056563 (Peacock Pride), #ABD580 (Wasabi). It mixes pink, red, green, turquoise tones and feels cool overall. The strongest text pairing is #49163B on #ABD580 with a contrast ratio of 8.60:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Super Pink	rgb(216, 104, 159)	hsl(331, 59%, 63%)
Velvet Cosmos	rgb(73, 22, 59)	hsl(316, 54%, 19%)
Mana Tree	rgb(90, 124, 71)	hsl(98, 27%, 38%)
Peacock Pride	rgb(5, 101, 99)	hsl(179, 91%, 21%)
Wasabi	rgb(171, 213, 128)	hsl(90, 50%, 67%)

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.

Aa8.60:1 Very good#49163B on #ABD580
Aa8.60:1 Very good#ABD580 on #49163B
Aa4.38:1 Poor#D8689F on #49163B
Aa4.38:1 Poor#49163B on #D8689F
Aa4.12:1 Poor#056563 on #ABD580
Aa4.12:1 Poor#ABD580 on #056563
Aa3.02:1 Poor#49163B on #5A7C47
Aa3.02:1 Poor#5A7C47 on #49163B

Color blindness preview

CSS variables

/* Super Pink to Wasabi — https://swatchly.xyz/palette/d8689f-49163b-5a7c47-056563-abd580 */
:root {
  --super-pink: #d8689f;
  --velvet-cosmos: #49163b;
  --mana-tree: #5a7c47;
  --peacock-pride: #056563;
  --wasabi: #abd580;
}

Tailwind CSS v4

/* Super Pink to Wasabi — https://swatchly.xyz/palette/d8689f-49163b-5a7c47-056563-abd580 */
@theme {
  --color-super-pink: #d8689f;
  --color-super-pink-50: #ffeaf2;
  --color-super-pink-100: #ffd7e8;
  --color-super-pink-200: #ffb5d5;
  --color-super-pink-300: #f78fc0;
  --color-super-pink-400: #d8689f;
  --color-super-pink-500: #bc4f86;
  --color-super-pink-600: #9e376d;
  --color-super-pink-700: #832558;
  --color-super-pink-800: #6b1846;
  --color-super-pink-900: #570f37;
  --color-super-pink-950: #3b0624;
  --color-velvet-cosmos: #49163b;
  --color-velvet-cosmos-50: #fff0f9;
  --color-velvet-cosmos-100: #ffe1f4;
  --color-velvet-cosmos-200: #f7c7e6;
  --color-velvet-cosmos-300: #e4aed1;
  --color-velvet-cosmos-400: #c68bb2;
  --color-velvet-cosmos-500: #a96e95;
  --color-velvet-cosmos-600: #8b5379;
  --color-velvet-cosmos-700: #6f3e5f;
  --color-velvet-cosmos-800: #572c49;
  --color-velvet-cosmos-900: #49163b;
  --color-velvet-cosmos-950: #291122;
  --color-mana-tree: #5a7c47;
  --color-mana-tree-50: #e8fddd;
  --color-mana-tree-100: #ddf5d1;
  --color-mana-tree-200: #c8e3b9;
  --color-mana-tree-300: #afcf9f;
  --color-mana-tree-400: #8eb17c;
  --color-mana-tree-500: #739660;
  --color-mana-tree-600: #5a7c47;
  --color-mana-tree-700: #456333;
  --color-mana-tree-800: #334e23;
  --color-mana-tree-900: #253c18;
  --color-mana-tree-950: #15260b;
  --color-peacock-pride: #056563;
  --color-peacock-pride-50: #d6fffd;
  --color-peacock-pride-100: #c7f6f4;
  --color-peacock-pride-200: #ade5e2;
  --color-peacock-pride-300: #8fd0cd;
  --color-peacock-pride-400: #68b2af;
  --color-peacock-pride-500: #489794;
  --color-peacock-pride-600: #2c7c7a;
  --color-peacock-pride-700: #056563;
  --color-peacock-pride-800: #024f4e;
  --color-peacock-pride-900: #003d3c;
  --color-peacock-pride-950: #002626;
  --color-wasabi: #abd580;
  --color-wasabi-50: #ecffdb;
  --color-wasabi-100: #def9c6;
  --color-wasabi-200: #c8e7ab;
  --color-wasabi-300: #abd580;
  --color-wasabi-400: #8db364;
  --color-wasabi-500: #709744;
  --color-wasabi-600: #567b28;
  --color-wasabi-700: #416212;
  --color-wasabi-800: #304d02;
  --color-wasabi-900: #233b00;
  --color-wasabi-950: #142500;
}