Romanov Mauve to Swamp Thing Color Palette

About this palette

Romanov Mauve to Swamp Thing is a 4-color vintage palette: #B27B9F (Romanov Mauve), #1B6161 (Beau Vert), #FFBFB0 (Peach Fuzz), #002B28 (Swamp Thing). It mixes pink, turquoise tones and feels balanced overall. The strongest text pairing is #FFBFB0 on #002B28 with a contrast ratio of 9.69:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Romanov Mauve	rgb(178, 123, 159)	hsl(321, 26%, 59%)
Beau Vert	rgb(27, 97, 97)	hsl(180, 56%, 24%)
Peach Fuzz	rgb(255, 191, 176)	hsl(11, 100%, 85%)
Swamp Thing	rgb(0, 43, 40)	hsl(176, 100%, 8%)

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.69:1 Very good#FFBFB0 on #002B28
Aa9.69:1 Very good#002B28 on #FFBFB0
Aa4.55:1 Good#1B6161 on #FFBFB0
Aa4.55:1 Good#FFBFB0 on #1B6161
Aa4.52:1 Good#B27B9F on #002B28
Aa4.52:1 Good#002B28 on #B27B9F

Color blindness preview

CSS variables

/* Romanov Mauve to Swamp Thing — https://swatchly.xyz/palette/b27b9f-1b6161-ffbfb0-002b28 */
:root {
  --romanov-mauve: #b27b9f;
  --beau-vert: #1b6161;
  --peach-fuzz: #ffbfb0;
  --swamp-thing: #002b28;
}

Tailwind CSS v4

/* Romanov Mauve to Swamp Thing — https://swatchly.xyz/palette/b27b9f-1b6161-ffbfb0-002b28 */
@theme {
  --color-romanov-mauve: #b27b9f;
  --color-romanov-mauve-50: #fff3fa;
  --color-romanov-mauve-100: #ffe6f5;
  --color-romanov-mauve-200: #f9cee9;
  --color-romanov-mauve-300: #e7b6d5;
  --color-romanov-mauve-400: #cc96b9;
  --color-romanov-mauve-500: #b27b9f;
  --color-romanov-mauve-600: #945f82;
  --color-romanov-mauve-700: #784969;
  --color-romanov-mauve-800: #603652;
  --color-romanov-mauve-900: #4b283f;
  --color-romanov-mauve-950: #301628;
  --color-beau-vert: #1b6161;
  --color-beau-vert-50: #dafdfd;
  --color-beau-vert-100: #ccf4f4;
  --color-beau-vert-200: #b2e2e2;
  --color-beau-vert-300: #96cdcc;
  --color-beau-vert-400: #70afae;
  --color-beau-vert-500: #529393;
  --color-beau-vert-600: #377878;
  --color-beau-vert-700: #1b6161;
  --color-beau-vert-800: #144c4c;
  --color-beau-vert-900: #093b3b;
  --color-beau-vert-950: #032525;
  --color-peach-fuzz: #ffbfb0;
  --color-peach-fuzz-50: #ffece7;
  --color-peach-fuzz-100: #ffddd4;
  --color-peach-fuzz-200: #ffbfb0;
  --color-peach-fuzz-300: #e3ac9f;
  --color-peach-fuzz-400: #c78d7f;
  --color-peach-fuzz-500: #ac7265;
  --color-peach-fuzz-600: #90594d;
  --color-peach-fuzz-700: #77453a;
  --color-peach-fuzz-800: #60352b;
  --color-peach-fuzz-900: #4c271f;
  --color-peach-fuzz-950: #311711;
  --color-swamp-thing: #002b28;
  --color-swamp-thing-50: #e3fbf8;
  --color-swamp-thing-100: #d7f2ee;
  --color-swamp-thing-200: #c0dfdb;
  --color-swamp-thing-300: #a6c9c5;
  --color-swamp-thing-400: #83aba6;
  --color-swamp-thing-500: #68908c;
  --color-swamp-thing-600: #4f7672;
  --color-swamp-thing-700: #3b605c;
  --color-swamp-thing-800: #2c4d4a;
  --color-swamp-thing-900: #213d3a;
  --color-swamp-thing-950: #002b28;
}