Pea to Dark Serpent color palette

9BBD00Pea 415300Deep Forestial Escapade 557C00Avocado BFE275Cool as a Cucumber 1F2F00Dark Serpent

About this palette

Pea to Dark Serpent is a 5-color cool, monochromatic palette: #9BBD00 (Pea), #415300 (Deep Forestial Escapade), #557C00 (Avocado), #BFE275 (Cool as a Cucumber), #1F2F00 (Dark Serpent). It mixes green tones and feels cool overall. The strongest text pairing is #BFE275 on #1F2F00 with a contrast ratio of 9.80:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pea	rgb(155, 189, 0)	hsl(71, 100%, 37%)
Deep Forestial Escapade	rgb(65, 83, 0)	hsl(73, 100%, 16%)
Avocado	rgb(85, 124, 0)	hsl(79, 100%, 24%)
Cool as a Cucumber	rgb(191, 226, 117)	hsl(79, 65%, 67%)
Dark Serpent	rgb(31, 47, 0)	hsl(80, 100%, 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.

Aa9.80:1 Very good#BFE275 on #1F2F00
Aa9.80:1 Very good#1F2F00 on #BFE275
Aa6.60:1 Good#9BBD00 on #1F2F00
Aa6.60:1 Good#1F2F00 on #9BBD00
Aa5.83:1 Good#415300 on #BFE275
Aa5.83:1 Good#BFE275 on #415300
Aa3.93:1 Poor#9BBD00 on #415300
Aa3.93:1 Poor#415300 on #9BBD00

Color blindness preview

CSS variables

/* Pea to Dark Serpent — https://swatchly.xyz/palette/9bbd00-415300-557c00-bfe275-1f2f00 */
:root {
  --pea: #9bbd00;
  --deep-forestial-escapade: #415300;
  --avocado: #557c00;
  --cool-as-a-cucumber: #bfe275;
  --dark-serpent: #1f2f00;
}

Tailwind CSS v4

/* Pea to Dark Serpent — https://swatchly.xyz/palette/9bbd00-415300-557c00-bfe275-1f2f00 */
@theme {
  --color-pea: #9bbd00;
  --color-pea-50: #f3ffdb;
  --color-pea-100: #e6fdae;
  --color-pea-200: #d2ed8c;
  --color-pea-300: #bbd966;
  --color-pea-400: #9bbd00;
  --color-pea-500: #809d00;
  --color-pea-600: #667e00;
  --color-pea-700: #506300;
  --color-pea-800: #3e4d00;
  --color-pea-900: #2e3a00;
  --color-pea-950: #1b2300;
  --color-deep-forestial-escapade: #415300;
  --color-deep-forestial-escapade-50: #eefcd3;
  --color-deep-forestial-escapade-100: #e3f3c5;
  --color-deep-forestial-escapade-200: #cee0aa;
  --color-deep-forestial-escapade-300: #b8cc8e;
  --color-deep-forestial-escapade-400: #9aaf6a;
  --color-deep-forestial-escapade-500: #80954d;
  --color-deep-forestial-escapade-600: #677b34;
  --color-deep-forestial-escapade-700: #536521;
  --color-deep-forestial-escapade-800: #415300;
  --color-deep-forestial-escapade-900: #324006;
  --color-deep-forestial-escapade-950: #1f2901;
  --color-avocado: #557c00;
  --color-avocado-50: #e7ffcd;
  --color-avocado-100: #daf7b9;
  --color-avocado-200: #c4e69c;
  --color-avocado-300: #abd17b;
  --color-avocado-400: #8ab351;
  --color-avocado-500: #6e972e;
  --color-avocado-600: #557c00;
  --color-avocado-700: #436200;
  --color-avocado-800: #334d00;
  --color-avocado-900: #263b00;
  --color-avocado-950: #172500;
  --color-cool-as-a-cucumber: #bfe275;
  --color-cool-as-a-cucumber-50: #e6fcbf;
  --color-cool-as-a-cucumber-100: #daf2ae;
  --color-cool-as-a-cucumber-200: #bfe275;
  --color-cool-as-a-cucumber-300: #acca6e;
  --color-cool-as-a-cucumber-400: #8dac43;
  --color-cool-as-a-cucumber-500: #72911c;
  --color-cool-as-a-cucumber-600: #5b7600;
  --color-cool-as-a-cucumber-700: #485e00;
  --color-cool-as-a-cucumber-800: #384a00;
  --color-cool-as-a-cucumber-900: #2a3900;
  --color-cool-as-a-cucumber-950: #192400;
  --color-dark-serpent: #1f2f00;
  --color-dark-serpent-50: #eefbde;
  --color-dark-serpent-100: #e3f1d1;
  --color-dark-serpent-200: #cedfb9;
  --color-dark-serpent-300: #b6c99e;
  --color-dark-serpent-400: #93a879;
  --color-dark-serpent-500: #768b5b;
  --color-dark-serpent-600: #5b6e41;
  --color-dark-serpent-700: #44552c;
  --color-dark-serpent-800: #323f1d;
  --color-dark-serpent-900: #1f2f00;
  --color-dark-serpent-950: #131b08;
}