Juicy Lime to Blasphemous Blue Color Palette

About this palette

Juicy Lime to Blasphemous Blue is a 5-color cool, earthy palette: #BACC6C (Juicy Lime), #482A13 (Couch), #E18D43 (Touch of Glamour), #5E7AC3 (Flood), #4953BC (Blasphemous Blue). It mixes green, brown, orange, blue tones and feels cool overall. The strongest text pairing is #BACC6C on #482A13 with a contrast ratio of 7.39:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Juicy Lime	rgb(186, 204, 108)	hsl(71, 48%, 61%)
Couch	rgb(72, 42, 19)	hsl(26, 58%, 18%)
Touch of Glamour	rgb(225, 141, 67)	hsl(28, 72%, 57%)
Flood	rgb(94, 122, 195)	hsl(223, 46%, 57%)
Blasphemous Blue	rgb(73, 83, 188)	hsl(235, 46%, 51%)

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.39:1 Very good#BACC6C on #482A13
Aa7.39:1 Very good#482A13 on #BACC6C
Aa5.01:1 Good#482A13 on #E18D43
Aa5.01:1 Good#E18D43 on #482A13
Aa3.68:1 Poor#BACC6C on #4953BC
Aa3.68:1 Poor#4953BC on #BACC6C
Aa3.12:1 Poor#482A13 on #5E7AC3
Aa3.12:1 Poor#5E7AC3 on #482A13

Color blindness preview

CSS variables

/* Juicy Lime to Blasphemous Blue — https://swatchly.xyz/palette/bacc6c-482a13-e18d43-5e7ac3-4953bc */
:root {
  --juicy-lime: #bacc6c;
  --couch: #482a13;
  --touch-of-glamour: #e18d43;
  --flood: #5e7ac3;
  --blasphemous-blue: #4953bc;
}

Tailwind CSS v4

/* Juicy Lime to Blasphemous Blue — https://swatchly.xyz/palette/bacc6c-482a13-e18d43-5e7ac3-4953bc */
@theme {
  --color-juicy-lime: #bacc6c;
  --color-juicy-lime-50: #f1fcc9;
  --color-juicy-lime-100: #e6f3b9;
  --color-juicy-lime-200: #d2e09b;
  --color-juicy-lime-300: #bacc6c;
  --color-juicy-lime-400: #9bac51;
  --color-juicy-lime-500: #80902d;
  --color-juicy-lime-600: #667506;
  --color-juicy-lime-700: #515c00;
  --color-juicy-lime-800: #3f4800;
  --color-juicy-lime-900: #303700;
  --color-juicy-lime-950: #1d2200;
  --color-couch: #482a13;
  --color-couch-50: #fff2ea;
  --color-couch-100: #ffe6d5;
  --color-couch-200: #eed1bd;
  --color-couch-300: #dabaa3;
  --color-couch-400: #bd9981;
  --color-couch-500: #a17d65;
  --color-couch-600: #85634c;
  --color-couch-700: #6c4d38;
  --color-couch-800: #553b28;
  --color-couch-900: #482a13;
  --color-couch-950: #2b1b0f;
  --color-touch-of-glamour: #e18d43;
  --color-touch-of-glamour-50: #fff4eb;
  --color-touch-of-glamour-100: #ffe7d6;
  --color-touch-of-glamour-200: #ffcea8;
  --color-touch-of-glamour-300: #fab175;
  --color-touch-of-glamour-400: #e18d43;
  --color-touch-of-glamour-500: #c27122;
  --color-touch-of-glamour-600: #a15800;
  --color-touch-of-glamour-700: #814500;
  --color-touch-of-glamour-800: #653500;
  --color-touch-of-glamour-900: #4f2800;
  --color-touch-of-glamour-950: #331700;
  --color-flood: #5e7ac3;
  --color-flood-50: #eef3ff;
  --color-flood-100: #dee8ff;
  --color-flood-200: #bfd2ff;
  --color-flood-300: #9db9fd;
  --color-flood-400: #7a97e1;
  --color-flood-500: #5e7ac3;
  --color-flood-600: #4761a5;
  --color-flood-700: #364c8a;
  --color-flood-800: #283b70;
  --color-flood-900: #1d2d5b;
  --color-flood-950: #101c3d;
  --color-blasphemous-blue: #4953bc;
  --color-blasphemous-blue-50: #f2f5ff;
  --color-blasphemous-blue-100: #e2e8ff;
  --color-blasphemous-blue-200: #c6d1ff;
  --color-blasphemous-blue-300: #a7b6ff;
  --color-blasphemous-blue-400: #7e8ffb;
  --color-blasphemous-blue-500: #6271dc;
  --color-blasphemous-blue-600: #4953bc;
  --color-blasphemous-blue-700: #38409a;
  --color-blasphemous-blue-800: #2b307f;
  --color-blasphemous-blue-900: #202467;
  --color-blasphemous-blue-950: #121545;
}