Green Thumb to Fading Night color palette

789B00Green Thumb EFF9FFCotton Ball 9DC475Pistachio 871848Inescapable Lover 0074D2Fading Night

About this palette

Green Thumb to Fading Night is a 5-color cool palette: #789B00 (Green Thumb), #EFF9FF (Cotton Ball), #9DC475 (Pistachio), #871848 (Inescapable Lover), #0074D2 (Fading Night). It mixes green, white, red, blue tones and feels cool overall. The strongest text pairing is #EFF9FF on #871848 with a contrast ratio of 8.72:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Green Thumb	rgb(120, 155, 0)	hsl(74, 100%, 30%)
Cotton Ball	rgb(239, 249, 255)	hsl(203, 100%, 97%)
Pistachio	rgb(157, 196, 117)	hsl(90, 40%, 61%)
Inescapable Lover	rgb(135, 24, 72)	hsl(334, 70%, 31%)
Fading Night	rgb(0, 116, 210)	hsl(207, 100%, 41%)

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.

Aa8.72:1 Very good#EFF9FF on #871848
Aa8.72:1 Very good#871848 on #EFF9FF
Aa4.70:1 Good#9DC475 on #871848
Aa4.70:1 Good#871848 on #9DC475
Aa4.44:1 Poor#EFF9FF on #0074D2
Aa4.44:1 Poor#0074D2 on #EFF9FF
Aa3.03:1 Poor#789B00 on #EFF9FF
Aa3.03:1 Poor#EFF9FF on #789B00

Color blindness preview

CSS variables

/* Green Thumb to Fading Night — https://swatchly.xyz/palette/789b00-eff9ff-9dc475-871848-0074d2 */
:root {
  --green-thumb: #789b00;
  --cotton-ball: #eff9ff;
  --pistachio: #9dc475;
  --inescapable-lover: #871848;
  --fading-night: #0074d2;
}

Tailwind CSS v4

/* Green Thumb to Fading Night — https://swatchly.xyz/palette/789b00-eff9ff-9dc475-871848-0074d2 */
@theme {
  --color-green-thumb: #789b00;
  --color-green-thumb-50: #ecffcc;
  --color-green-thumb-100: #e0f9b2;
  --color-green-thumb-200: #cbe892;
  --color-green-thumb-300: #b3d46f;
  --color-green-thumb-400: #93b63e;
  --color-green-thumb-500: #789b00;
  --color-green-thumb-600: #607d00;
  --color-green-thumb-700: #4b6300;
  --color-green-thumb-800: #3a4d00;
  --color-green-thumb-900: #2c3b00;
  --color-green-thumb-950: #1a2400;
  --color-cotton-ball: #eff9ff;
  --color-cotton-ball-50: #eff9ff;
  --color-cotton-ball-100: #e8eef2;
  --color-cotton-ball-200: #d3dade;
  --color-cotton-ball-300: #bbc3c8;
  --color-cotton-ball-400: #9ba4a9;
  --color-cotton-ball-500: #7f888d;
  --color-cotton-ball-600: #656d72;
  --color-cotton-ball-700: #4f575b;
  --color-cotton-ball-800: #3d4347;
  --color-cotton-ball-900: #2e3437;
  --color-cotton-ball-950: #1c2022;
  --color-pistachio: #9dc475;
  --color-pistachio-50: #e0f9ca;
  --color-pistachio-100: #d2eeb9;
  --color-pistachio-200: #bada9b;
  --color-pistachio-300: #9dc475;
  --color-pistachio-400: #81a65a;
  --color-pistachio-500: #688c3f;
  --color-pistachio-600: #517327;
  --color-pistachio-700: #3e5d15;
  --color-pistachio-800: #2f4a08;
  --color-pistachio-900: #243b02;
  --color-pistachio-950: #142500;
  --color-inescapable-lover: #871848;
  --color-inescapable-lover-50: #fff1f4;
  --color-inescapable-lover-100: #ffe3ea;
  --color-inescapable-lover-200: #ffc3d3;
  --color-inescapable-lover-300: #ff9ab9;
  --color-inescapable-lover-400: #e37298;
  --color-inescapable-lover-500: #c4537b;
  --color-inescapable-lover-600: #a23860;
  --color-inescapable-lover-700: #871848;
  --color-inescapable-lover-800: #691638;
  --color-inescapable-lover-900: #530d2b;
  --color-inescapable-lover-950: #360519;
  --color-fading-night: #0074d2;
  --color-fading-night-50: #eef6ff;
  --color-fading-night-100: #e0eeff;
  --color-fading-night-200: #c1deff;
  --color-fading-night-300: #9bc9ff;
  --color-fading-night-400: #5eabff;
  --color-fading-night-500: #308fef;
  --color-fading-night-600: #0074d2;
  --color-fading-night-700: #005ca8;
  --color-fading-night-800: #004785;
  --color-fading-night-900: #003668;
  --color-fading-night-950: #002144;
}