# HEX colorviewer widget

**URL:** <https://community.tulip.co/t/hex-colorviewer-widget/10362>\
**Category:** Show and Tell\
**Tags:** custom-widgets, hex-color\
**Created:** [January 23, 2024, 10:34am UTC](https://community.tulip.co/t/hex-colorviewer-widget/10362 "2024-01-23T10:34:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ChrisF](https://avatars.discourse-cdn.com/v4/letter/c/d6d6ee/32.png) [@ChrisF](https://community.tulip.co/u/ChrisF)\
**Post date:** [January 23, 2024, 10:34am UTC](https://community.tulip.co/t/hex-colorviewer-widget/10362/1 "2024-01-23T10:34:50Z")

</div>

Hi all,

after asking for a function to set a color by HEX values ([here](https://community.tulip.co/t/calculate-hex-values-into-colors/10227)), I created a small custom widget to show any valid HEX color values as a preview. Because the HEX colors can have a opacity/transparency value as postfix, I added this too.  
Setting a background color is just as possible as firing an error event (MissingColor)  
In the javascript section it is also possible to configure whether the color value should be displayed as an overlay or not

Inside the widget

 ![image](https://us1.discourse-cdn.com/flex020/uploads/agilemfg/original/2X/a/a58e22f39aebb20b49785166ff3c9c3da3a608ec.png)

Properties

 ![image](https://us1.discourse-cdn.com/flex020/uploads/agilemfg/original/2X/2/22de2ca2c5ec1d1ba48744001ce0070ea3bc90a7.png)

In use: color without and with opacity  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/agilemfg/original/2X/4/45a5bdc03b0dbc82eb87af194bb1502a38e454bf.png)

[customWidget-HEX-ColorViewer-3 (Opac) (Tulip).json|attachment]

Disclaimer: this widget comes as is. You use this widget at your own risk and without any guarantee or liability.

I hope it is useful 🙂

(upload://9FO4p1XDJ3DWiAaLtPHBCCLJWn3.json) (4.4 KB)

Regards Chris

---

<div class="post-metadata">

**Author:** ![ChrisF](https://avatars.discourse-cdn.com/v4/letter/c/d6d6ee/32.png) [@ChrisF](https://community.tulip.co/u/ChrisF)\
**Post date:** [January 23, 2024, 10:37am UTC](https://community.tulip.co/t/hex-colorviewer-widget/10362/2 "2024-01-23T10:37:40Z")

</div>

[customWidget-HEX-ColorViewer-3 (Opac) (Tulip).json](https://community.tulip.co/uploads/short-url/9FO4p1XDJ3DWiAaLtPHBCCLJWn3.json) (4.4 KB)

---

<div class="post-metadata">

**Author:** ![Beth](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tulip.co/beth/32/5987_2.png) [@Beth](https://community.tulip.co/u/Beth)\
**Post date:** [January 23, 2024, 2:20pm UTC](https://community.tulip.co/t/hex-colorviewer-widget/10362/3 "2024-01-23T14:20:30Z")

</div>

Hi Chris -

Thank you for sharing! This is a great way to preview HEX value colors 🔴 🟦💚 🟡