Rampant Rhubarb to Velvet Horizon Color Palette

About this palette

Rampant Rhubarb to Velvet Horizon is a 5-color cool palette: #5C3534 (Rampant Rhubarb), #70517B (Dr Who), #2D8C73 (Elf), #98F0CA (Ultra Mint), #D29CD4 (Velvet Horizon). It mixes brown, purple, turquoise, pink tones and feels cool overall. The strongest text pairing is #5C3534 on #98F0CA with a contrast ratio of 7.77:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Rampant Rhubarb	rgb(92, 53, 52)	hsl(2, 28%, 28%)
Dr Who	rgb(112, 81, 123)	hsl(284, 21%, 40%)
Elf	rgb(45, 140, 115)	hsl(164, 51%, 36%)
Ultra Mint	rgb(152, 240, 202)	hsl(154, 75%, 77%)
Velvet Horizon	rgb(210, 156, 212)	hsl(298, 39%, 72%)

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.

Aa7.77:1 Very good#5C3534 on #98F0CA
Aa7.77:1 Very good#98F0CA on #5C3534
Aa4.97:1 Good#70517B on #98F0CA
Aa4.97:1 Good#98F0CA on #70517B
Aa4.69:1 Good#5C3534 on #D29CD4
Aa4.69:1 Good#D29CD4 on #5C3534
Aa3.06:1 Poor#2D8C73 on #98F0CA
Aa3.06:1 Poor#98F0CA on #2D8C73

Color blindness preview

CSS variables

/* Rampant Rhubarb to Velvet Horizon — https://swatchly.xyz/palette/5c3534-70517b-2d8c73-98f0ca-d29cd4 */
:root {
  --rampant-rhubarb: #5c3534;
  --dr-who: #70517b;
  --elf: #2d8c73;
  --ultra-mint: #98f0ca;
  --velvet-horizon: #d29cd4;
}

Tailwind CSS v4

/* Rampant Rhubarb to Velvet Horizon — https://swatchly.xyz/palette/5c3534-70517b-2d8c73-98f0ca-d29cd4 */
@theme {
  --color-rampant-rhubarb: #5c3534;
  --color-rampant-rhubarb-50: #fff1f1;
  --color-rampant-rhubarb-100: #ffe4e2;
  --color-rampant-rhubarb-200: #f2cdcb;
  --color-rampant-rhubarb-300: #dfb5b3;
  --color-rampant-rhubarb-400: #c19492;
  --color-rampant-rhubarb-500: #a57977;
  --color-rampant-rhubarb-600: #895f5d;
  --color-rampant-rhubarb-700: #6f4948;
  --color-rampant-rhubarb-800: #5c3534;
  --color-rampant-rhubarb-900: #452a29;
  --color-rampant-rhubarb-950: #2c1918;
  --color-dr-who: #70517b;
  --color-dr-who-50: #fbf1ff;
  --color-dr-who-100: #f7e3ff;
  --color-dr-who-200: #e8cff2;
  --color-dr-who-300: #d6b8e0;
  --color-dr-who-400: #b999c5;
  --color-dr-who-500: #a07fab;
  --color-dr-who-600: #866691;
  --color-dr-who-700: #70517b;
  --color-dr-who-800: #583e62;
  --color-dr-who-900: #452f4d;
  --color-dr-who-950: #2c1c32;
  --color-elf: #2d8c73;
  --color-elf-50: #d0ffef;
  --color-elf-100: #bdf5e2;
  --color-elf-200: #9ee1cb;
  --color-elf-300: #7ccab2;
  --color-elf-400: #51aa90;
  --color-elf-500: #2d8c73;
  --color-elf-600: #0d735c;
  --color-elf-700: #005c48;
  --color-elf-800: #004838;
  --color-elf-900: #00392c;
  --color-elf-950: #00241b;
  --color-ultra-mint: #98f0ca;
  --color-ultra-mint-50: #e3fff1;
  --color-ultra-mint-100: #c9fbe4;
  --color-ultra-mint-200: #98f0ca;
  --color-ultra-mint-300: #8ed5b6;
  --color-ultra-mint-400: #64b794;
  --color-ultra-mint-500: #429b78;
  --color-ultra-mint-600: #227e5e;
  --color-ultra-mint-700: #046649;
  --color-ultra-mint-800: #004f38;
  --color-ultra-mint-900: #003d2a;
  --color-ultra-mint-950: #002719;
  --color-velvet-horizon: #d29cd4;
  --color-velvet-horizon-50: #fee3ff;
  --color-velvet-horizon-100: #f9d2fa;
  --color-velvet-horizon-200: #e6b9e7;
  --color-velvet-horizon-300: #d29cd4;
  --color-velvet-horizon-400: #b480b6;
  --color-velvet-horizon-500: #9a689d;
  --color-velvet-horizon-600: #805183;
  --color-velvet-horizon-700: #693e6c;
  --color-velvet-horizon-800: #563058;
  --color-velvet-horizon-900: #452447;
  --color-velvet-horizon-950: #2c152e;
}