Lizard to Back in Black Color Palette

About this palette

Lizard to Back in Black is a 5-color cool palette: #7F6630 (Lizard), #25530F (Jungle Jam), #6891E6 (Olympic Blue), #EBB1F1 (Candy Dreams), #0F1520 (Back in Black). It mixes brown, green, blue, pink, black tones and feels cool overall. The strongest text pairing is #EBB1F1 on #0F1520 with a contrast ratio of 10.53:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lizard	rgb(127, 102, 48)	hsl(41, 45%, 34%)
Jungle Jam	rgb(37, 83, 15)	hsl(101, 69%, 19%)
Olympic Blue	rgb(104, 145, 230)	hsl(220, 72%, 65%)
Candy Dreams	rgb(235, 177, 241)	hsl(294, 70%, 82%)
Back in Black	rgb(15, 21, 32)	hsl(219, 36%, 9%)

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.

Aa10.53:1 Very good#EBB1F1 on #0F1520
Aa10.53:1 Very good#0F1520 on #EBB1F1
Aa5.90:1 Good#6891E6 on #0F1520
Aa5.90:1 Good#0F1520 on #6891E6
Aa5.21:1 Good#25530F on #EBB1F1
Aa5.21:1 Good#EBB1F1 on #25530F
Aa3.35:1 Poor#7F6630 on #0F1520
Aa3.35:1 Poor#0F1520 on #7F6630

Color blindness preview

CSS variables

/* Lizard to Back in Black — https://swatchly.xyz/palette/7f6630-25530f-6891e6-ebb1f1-0f1520 */
:root {
  --lizard: #7f6630;
  --jungle-jam: #25530f;
  --olympic-blue: #6891e6;
  --candy-dreams: #ebb1f1;
  --back-in-black: #0f1520;
}

Tailwind CSS v4

/* Lizard to Back in Black — https://swatchly.xyz/palette/7f6630-25530f-6891e6-ebb1f1-0f1520 */
@theme {
  --color-lizard: #7f6630;
  --color-lizard-50: #fff4de;
  --color-lizard-100: #fae9c6;
  --color-lizard-200: #e9d4ab;
  --color-lizard-300: #d4bd8e;
  --color-lizard-400: #b69d68;
  --color-lizard-500: #9b814b;
  --color-lizard-600: #7f6630;
  --color-lizard-700: #66501f;
  --color-lizard-800: #513e11;
  --color-lizard-900: #402f08;
  --color-lizard-950: #281d03;
  --color-jungle-jam: #25530f;
  --color-jungle-jam-50: #e3ffd9;
  --color-jungle-jam-100: #d6f7cb;
  --color-jungle-jam-200: #bee5b1;
  --color-jungle-jam-300: #a5d095;
  --color-jungle-jam-400: #83b372;
  --color-jungle-jam-500: #679855;
  --color-jungle-jam-600: #4e7d3c;
  --color-jungle-jam-700: #3a6629;
  --color-jungle-jam-800: #25530f;
  --color-jungle-jam-900: #1e3f10;
  --color-jungle-jam-950: #102806;
  --color-olympic-blue: #6891e6;
  --color-olympic-blue-50: #f4f8ff;
  --color-olympic-blue-100: #e9f0ff;
  --color-olympic-blue-200: #cfdfff;
  --color-olympic-blue-300: #b0cbff;
  --color-olympic-blue-400: #84acfc;
  --color-olympic-blue-500: #6891e6;
  --color-olympic-blue-600: #4c73c5;
  --color-olympic-blue-700: #3659a5;
  --color-olympic-blue-800: #264487;
  --color-olympic-blue-900: #19336b;
  --color-olympic-blue-950: #0c1e46;
  --color-candy-dreams: #ebb1f1;
  --color-candy-dreams-50: #fef6ff;
  --color-candy-dreams-100: #fde9ff;
  --color-candy-dreams-200: #f7cefb;
  --color-candy-dreams-300: #ebb1f1;
  --color-candy-dreams-400: #c792cc;
  --color-candy-dreams-500: #aa74b0;
  --color-candy-dreams-600: #8d5993;
  --color-candy-dreams-700: #724277;
  --color-candy-dreams-800: #5a315f;
  --color-candy-dreams-900: #46234a;
  --color-candy-dreams-950: #2d1430;
  --color-back-in-black: #0f1520;
  --color-back-in-black-50: #f0f5fe;
  --color-back-in-black-100: #e6ebf6;
  --color-back-in-black-200: #d1d8e4;
  --color-back-in-black-300: #bac1cf;
  --color-back-in-black-400: #9aa2b0;
  --color-back-in-black-500: #7c8493;
  --color-back-in-black-600: #606876;
  --color-back-in-black-700: #494f5b;
  --color-back-in-black-800: #353b45;
  --color-back-in-black-900: #252a32;
  --color-back-in-black-950: #0f1520;
}