Reptile Revenge to Violet Heaven Color Palette

About this palette

Reptile Revenge to Violet Heaven is a 5-color muted palette: #595C2C (Reptile Revenge), #767361 (Mangrove), #948A94 (Gull), #B4A1C9 (Lucius Lilac), #D6B7FF (Violet Heaven). It mixes brown, gray, purple tones and feels cool overall. The strongest text pairing is #595C2C on #D6B7FF with a contrast ratio of 4.04:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Reptile Revenge	rgb(89, 92, 44)	hsl(64, 35%, 27%)
Mangrove	rgb(118, 115, 97)	hsl(51, 10%, 42%)
Gull	rgb(148, 138, 148)	hsl(300, 4%, 56%)
Lucius Lilac	rgb(180, 161, 201)	hsl(269, 27%, 71%)
Violet Heaven	rgb(214, 183, 255)	hsl(266, 100%, 86%)

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.

Aa4.04:1 Poor#595C2C on #D6B7FF
Aa4.04:1 Poor#D6B7FF on #595C2C

Color blindness preview

CSS variables

/* Reptile Revenge to Violet Heaven — https://swatchly.xyz/palette/595c2c-767361-948a94-b4a1c9-d6b7ff */
:root {
  --reptile-revenge: #595c2c;
  --mangrove: #767361;
  --gull: #948a94;
  --lucius-lilac: #b4a1c9;
  --violet-heaven: #d6b7ff;
}

Tailwind CSS v4

/* Reptile Revenge to Violet Heaven — https://swatchly.xyz/palette/595c2c-767361-948a94-b4a1c9-d6b7ff */
@theme {
  --color-reptile-revenge: #595c2c;
  --color-reptile-revenge-50: #f5f8db;
  --color-reptile-revenge-100: #ebefce;
  --color-reptile-revenge-200: #d8dcb6;
  --color-reptile-revenge-300: #c2c69b;
  --color-reptile-revenge-400: #a4a878;
  --color-reptile-revenge-500: #898d5b;
  --color-reptile-revenge-600: #6f7243;
  --color-reptile-revenge-700: #595c2c;
  --color-reptile-revenge-800: #454820;
  --color-reptile-revenge-900: #353715;
  --color-reptile-revenge-950: #21220a;
  --color-mangrove: #767361;
  --color-mangrove-50: #f7f6ea;
  --color-mangrove-100: #efede1;
  --color-mangrove-200: #dddacc;
  --color-mangrove-300: #c8c5b5;
  --color-mangrove-400: #aaa795;
  --color-mangrove-500: #908d7a;
  --color-mangrove-600: #767361;
  --color-mangrove-700: #5e5b4b;
  --color-mangrove-800: #494739;
  --color-mangrove-900: #38362a;
  --color-mangrove-950: #232119;
  --color-gull: #948a94;
  --color-gull-50: #faf4fa;
  --color-gull-100: #f2ebf2;
  --color-gull-200: #e0d9e0;
  --color-gull-300: #ccc3cc;
  --color-gull-400: #aea4ae;
  --color-gull-500: #948a94;
  --color-gull-600: #786e78;
  --color-gull-700: #5f575f;
  --color-gull-800: #4a434a;
  --color-gull-900: #393339;
  --color-gull-950: #231f23;
  --color-lucius-lilac: #b4a1c9;
  --color-lucius-lilac-50: #faf6ff;
  --color-lucius-lilac-100: #f4ecff;
  --color-lucius-lilac-200: #e5d7f5;
  --color-lucius-lilac-300: #d1c1e3;
  --color-lucius-lilac-400: #b4a1c9;
  --color-lucius-lilac-500: #9784ab;
  --color-lucius-lilac-600: #7a688d;
  --color-lucius-lilac-700: #615173;
  --color-lucius-lilac-800: #4c3e5b;
  --color-lucius-lilac-900: #3a2e46;
  --color-lucius-lilac-950: #231b2c;
  --color-violet-heaven: #d6b7ff;
  --color-violet-heaven-50: #faf7ff;
  --color-violet-heaven-100: #f3ecff;
  --color-violet-heaven-200: #e6d4ff;
  --color-violet-heaven-300: #d6b7ff;
  --color-violet-heaven-400: #b497d9;
  --color-violet-heaven-500: #987abd;
  --color-violet-heaven-600: #7c5f9f;
  --color-violet-heaven-700: #634883;
  --color-violet-heaven-800: #4e3669;
  --color-violet-heaven-900: #3b2752;
  --color-violet-heaven-950: #251736;
}