Color Picker & Converter guide

How to Pick Colors and Convert HEX, RGB and HSL

Choose a color, convert HEX, RGB and HSL values, adjust transparency and copy CSS colors. Learn rounding limits and optional screen eyedropper support.

Open Color Picker & Converter →

Before you start

Use a current browser with JavaScript enabled. Read the limits below before using private or large inputs.

Step-by-step instructions

Enter a HEX color such as #336699 or rgb(51, 102, 153).
Use the native color picker to change the opaque color.
Adjust Alpha for transparency; compare the preview and updated values.
Copy HEX, RGB or HSL using the button beside that value.
If Screen eyedropper is available, click it and select a screen color; cancel to keep your value.

Interpret results and limitations

Three/four-digit and six/eight-digit HEX, RGB/RGBA and HSL/HSLA are supported. Saturation and lightness need percent signs. Values outside the supported range produce an error.

HEX alpha rounds to eight bits; RGB/HSL display alpha to three decimals. Transparent colors look different on different backgrounds. Screen eyedropper support varies; the native picker always remains available.

Example

Use this example to understand the expected behavior before working with your own input.

#336699
rgb(51, 102, 153)
hsl(210, 50%, 40%)

Troubleshooting

The eyedropper button is missing

Your browser does not expose the EyeDropper API. Use the native picker or enter a color value.

The interface does not respond

Enable JavaScript, use a supported browser and check the input limits. Reloading clears temporary input and results.

Privacy and cleanup

Inputs and results stay in the current tab. Nothing is uploaded or stored in input history. Optional analytics receives fixed tool identifiers only; entered data, file names and generated values are excluded.

Read the Privacy Policy for site preferences, optional analytics and hosting information.

Related tools and guides

Use Color Picker & Converter with the steps above, or continue with a related task.

Technical references

These references explain the underlying formats or browser behavior. The steps above describe the current AnyUtils tool.

Technical reference