Color Picker Widget

Create Your Own Color Picker Widget in Seconds for Your Website

Customize how visitors select, preview, and copy colors with flexible picker settings, display modes, palette options, color formats, and no-code styling controls.

Create Your Color Picker Widget - It's Free!

Create Your Own Color Picker Widget in Seconds for Your Website

How to embed Color Picker Widget to WordPress

1Get your embed code

After customizing your Jotform website widget, click Try it on your website for free, and copy the generated embed code.

2Open the page editor

Go to the WordPress post or page where you want to display the widget, then add a new block.

3Add a Custom HTML block

Select Custom HTML and paste your Jotform Website widget embed code into the HTML field.

4Update and view

Click Update or Publish, then open the page to check your embedded widget.

Learn more

Start With a Clear Default Color

Choose the initial color visitors see, then let them adjust the shade directly from the picker.

Picker controls include:

Default colorLive previewNative picker

Create Your Widget

Display HEX, RGB, HSL, HSV, and CMYK Values

Show the formats your visitors need, add optional WCAG contrast results, and let visitors copy the selected value with one click.

Value options include:

HEXRGBHSLHSVCMYKCopy action

Set Value Formats

Display HEX, RGB, HSL, HSV, and CMYK Values

Add Named Presets and Temporary Saved Colors

Add or remove labeled swatches and let visitors keep, remove, clear, or copy selections in a temporary palette row.

Palette controls include:

Preset swatchesSwatch labelsSaved colorsPalette copySwatch shape

Customize Swatches

Add Named Presets and Temporary Saved Colors

Style the Picker for Any Page

Use light or dark themes, custom surface colors, embedded alignment, floating placement, device visibility, branding, and scoped custom CSS.

Style controls include:

Light/dark themeAccent colorFloating placementCustom CSS

Style Your Picker