Skip to content
WebToolShop WebToolShop

Color Picker — free online tool

Pick a hue on the ring and fine-tune saturation and lightness on the pad—ideal when you have a rough colour in mind but need exact codes for CSS.

When to use Color Picker

Build a small palette of tints and shades from one brand colour for buttons, hovers, and backgrounds.

Saves switching between design apps when you only need a quick colour readout.

What Color Picker does not do

This is not an eyedropper for pixels on another website or a full palette generator with accessibility contrast checks.

How to use Color Picker

  1. Drag the hue ring on the Color Picker to choose a base colour.
  2. Click or drag inside the saturation/lightness square to fine-tune the shade.
  3. Read HEX and RGB values updated beside the preview.
  4. Copy the code into your CSS, Figma notes, or style guide.

Practical tips

  • Lock the hue first, then adjust saturation and lightness for a tidy tint/shade scale.
  • Lower saturation for backgrounds and reserve vivid colours for small accents.
  • Note that on-screen sRGB can look different in print—proof critical brand colours.

Example

Dial a navy hue, lower lightness, copy HEX for a dark-mode sidebar background.

Related tools on Webtoolshop

Limitations

Hue/saturation/lightness pad only. No eyedropper from desktop windows outside the page.

Privacy & data

For this calculator-style page, numbers and dates stay in your browser memory until you leave. They are not saved to our servers.

Frequently asked questions about Color Picker

What does the Color Picker not do?

This is not an eyedropper for pixels on another website or a full palette generator with accessibility contrast checks.

Give me a concrete example for the Color Picker.

Dial a navy hue, lower lightness, copy HEX for a dark-mode sidebar background.

Why did the Color Picker fail or look wrong?

Try a smaller file, fewer pasted characters, or an updated browser. Extensions that block scripts or downloads sometimes interfere—test in a private window if results never appear.

Where does my input go when I use the Color Picker?

For this calculator-style page, numbers and dates stay in your browser memory until you leave. They are not saved to our servers.

Color Picker

Hue ring + saturation/lightness square.

#FF0000
rgb(255, 0, 0)

Click the ring to choose hue, then the rectangle for saturation and lightness.

Copied!