# How do I change the colour of the Barcode component code?

**URL:** <https://forum.inductiveautomation.com/t/how-do-i-change-the-colour-of-the-barcode-component-code/53916>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [December 9, 2021, 12:03am UTC](https://forum.inductiveautomation.com/t/how-do-i-change-the-colour-of-the-barcode-component-code/53916 "2021-12-09T00:03:02Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [December 9, 2021, 12:03am UTC](https://forum.inductiveautomation.com/t/how-do-i-change-the-colour-of-the-barcode-component-code/53916/1 "2021-12-09T00:03:02Z")

</div>

I have a QR code in Perspective but I can’t figure out how to change the colour of the code itself from the default black. I’ve tried all of the different colour styles in each of the 3 style props (`valueStyle`, `errorStyle`, and plain old `style`). I’ve looked at the component in the dev tools and I can’t see in there where the black colour is being applied either 😕

The only thing i’ve found to work is using a CSS invert filter

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [December 9, 2021, 12:09am UTC](https://forum.inductiveautomation.com/t/how-do-i-change-the-colour-of-the-barcode-component-code/53916/2 "2021-12-09T00:09:40Z")

</div>

The barcodes are drawn directly to an HTML `<canvas>` element via [bwip-js - npm](https://www.npmjs.com/package/bwip-js#react-usage) ; it looks like there are styling properties, but we’re not exposing them. You wouldn’t be able to style it via CSS since it’s in a canvas, either.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [December 9, 2021, 8:51am UTC](https://forum.inductiveautomation.com/t/how-do-i-change-the-colour-of-the-barcode-component-code/53916/3 "2021-12-09T08:51:13Z")

</div>

you can use invert + sepia + hue-rotate to change it to any color tho its quite hard to find the correct values to get a nice color xd

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/5/e53bf4a441ec4805cd3557d4afc1cddc1a6dae68.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/b/6b44ab64ed2a7087cdf4d3988280d02447b29477.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/8/f8180e7dcdb097c83e8d83764393604c6e967926.png)

might want to check out this codepen with sliders on all the filter props just upload a black image and fiddle around  
https://codepen.io/stoumann/embed/preview/MWeNmyb?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=MWeNmyb