Fix invalid hex color error

Why this error appears

When you edit a QR code in QuiQR Codes, the Background color and Foreground color fields only accept hex color values in the correct format.

If you type a value like FFFFFF or 000000 without the leading #, QuiQR Codes shows this error when you try to save:

Background color must be a valid hex color (e.g. #FFFFFF)

or

Foreground color must be a valid hex color (e.g. #000000)

QuiQR Codes Edit QR Code screen showing validation errors for Background color and Foreground color when the # symbol is missing from hex values

Where to fix it

You can update these fields from the Edit QR Code screen in QuiQR Codes.

In Shopify admin, go to Apps and select QuiQR Codes.

In the left navigation under QuiQR Codes, select Manage QR Codes.

Select the QR code you want to update to open Edit QR Code.

Scroll to the design section and look for Background color and Foreground color.

How to fix the value

Add a # at the beginning of the hex code before selecting Save.

  • Use #FFFFFF instead of FFFFFF

  • Use #000000 instead of 000000

  • Use #1BAF31 instead of 1BAF31

If you are copying a color from another tool, check whether it included the #. Some design tools show the value without it.

Save the QR code again

After correcting the value in Background color or Foreground color, select Save in the top bar again.

If the value is valid, the QR code should save normally and the Preview will continue showing your updated design.

Use the color picker instead

If you do not want to type the hex code manually, you can use the built-in color picker beside each field. This helps avoid formatting mistakes.

The color picker fills the field in the correct format automatically, so it is a good option if you keep seeing this validation error.

Quick checklist

  • You are editing the code from Manage QR CodesEdit QR Code

  • The value starts with #

  • The field contains a full hex color such as #FFFFFF or #000000

  • You selected Save after updating the field