Chroma Panel

Search documentation

Find a page or section

Common mistakes

The handful of things that most often go wrong.

Putting onChange into global state

It fires about 60 times a second while you drag. Keep that state local, or save from onChangeComplete instead — see onChange vs onChangeComplete.

Expecting injectStyles= to shrink your bundle

It only stops the panel writing a <style> tag. The CSS is imported by the module either way, so your build is the same size. Use it for CSP or critical CSS.

An unlayered button rule in your own CSS

It will restyle the panel's swatches and tabs. This is the most common cause of a panel that looks almost right — see if the panel looks wrong.

Expecting the eyedropper everywhere

It renders only where the browser has the EyeDropper API. If you need one in every browser, build your own UI and check useEyedropper().supported first.

Reading hex when you need precision

hex is rounded to 8 bits per channel. Store hsva and pass it back to value if a color has to survive a round trip unchanged.