I don't see the thumbnail

[irsat000]

neither can I find parameters related to it.

Coloris({
        el: '.coloris',
        input: "#000000",
        wrap: true
});

<label>
    <span>Message BG color:</span>
    <div class="msg_bg_color_container">
        <input type="text" class="msg_bg_color_input coloris" />
    </div>
</label>

[mdbassit]

That's because your input field is defined after the call to Coloris(). You should change your code so Coloris is called after all the DOM is ready. Alternatively, you could initialize the color picker this way:

Coloris.ready(() => {
  Coloris({
    el: '.coloris',
  });
});

By the way, this is no input option.

[irsat000]

Coloris.ready() didn't work because my case was different. It's a content script and I have already set it as run at document end.

I was defining it before Coloris DOM code was imported into the page by my extension. In other words, I had to run it after like you said, just slightly differently.

BODY.appendChild(parseHTML(html_string));
// Coloris settings
Coloris({
     el: '.coloris'
});

Thank you. I really liked this color picker, for the the design and tranparency setting. Native input color doesn't have that transparency.