Color Picker

With this tool, user's can manipulate controls to attain a specific color. The results are given in HEX, RGB, HSV and HSL. There is even a choice of Tailwind colors and Pantone colors to choose from.

Hex

hsl(0° 100% 50%)

rgb(255,0,0)

hsv(0° 100% 100%)

Red

Green

Blue

Hue

Saturation

Lightness

Pantone

Tailwind

General Help

Click on the button to share this tool with others.

Color Picker Help

Hex Card

The colored button shows the currently selected color as a hex value.

Click the button to show a panel on the right which will give you a larger area in the chosen color.

Click the button to share the current color settings with others.

Click the button to copy the hex code to the clipboard.

You can click coloured button in the card and enter a hex input (either 3 digit or 6 digit is valid). Press ENTER or Click the the button to confirm and the will change the current color value. Press ESC or click the button to cancel.

Gradient box and sliders

Just click (or hold down the mouse) anywhere of the gradient to change the selected color.

Move the sliders in the to change the selected color.

The rainbow colored slider represents just the hue.

There are two triple slider cards, one for the RGB color model and the other for the HSL color model.

Pantone Card

This is the Pantone color based on the selected color (or nearest match to it denoted by ‘exact’, ‘close’ or ‘far off’).

Click the button to display a dialog with all the Pantone colors.

The colored button shows the PMS code, the name, and hex value.

If you click the colored button it will become the selected color.

Tailwind Card

This is the Tailwind color based on the selected color (or nearest match to it denoted by ‘exact’, ‘close’ or ‘far off’).

Click the button to display a dialog with all the Tailwind colors.

The colored button shows the name and hex value.

If you click the colored button it will become the selected color.