Changing the product status colors
Personalize the product status colors using CSS.

These are the steps to add personalized CSS code to the design:

1. Navigate to Settings > Layout > Designer and launch the designer
2. Click Preferences (last icon) and enable Advanced
3. Click Customize CSS (penultimate icon)
4. Add the piece of CSS code at the bottom (copy and paste)

Publish the design (first icon in the designer window) to make sure the result is live.

This is the CSS code to adjust the color of (personalized) product statuses:

.webshop_status_ok { color: #090; }
.webshop_status_warning { color: #f30; }
.webshop_status_error { color: #c00; }

These are the default values. The color codes (such as #090 for green) can be customized.

Some more explanation:

"webshop_status_ok": Green color at all product statuses (except those below) and personalized product statuses.
"webshop_status_warning": Orange color at product status "Price available for logged in customers" when a customer is not logged in.
"webshop_status_error": Red color at product status "Sold out".

No product status is displayed for the product statuses "Invisible", "Do not display product status" and "Customer must choose a variation first".

The W3Schools website has a "color picker" for easy color selection:
https://www.w3schools.com/colors/colors_picker.asp

Learn more about HTML/CSS color coding:
https://www.w3schools.com/colors

Color Designer - easily generate color palettes
https://colordesigner.io

Color Combos - create color combinations
https://www.colorcombos.com

Optionally, "Do not display product status" status can also be set and the product status displayed in the product description.