Which color formats does this color picker support?

This color picker provides HEX, RGB, and HSL values for the selected color.

Can I pick colors from the screen?

Yes. In supported browsers, the tool can use the EyeDropper API to pick a color directly from the screen.

Color Picker

Pick colors from a native browser picker or screen eyedropper and copy HEX, RGB, or HSL values for design and code.

This free color picker helps frontend developers and designers grab colors quickly and convert them into practical code-friendly formats.

Use it to pick shades from the browser picker or screen eyedropper, then copy HEX, RGB, or HSL values for CSS, design systems, and UI work.

Color Picker

Pick a shade visually with a richer saturation field and hue slider, then copy code-ready values instantly.

HEX

RGB

42, 119, 235

CMYK

82%, 49%, 0%, 8%

HSV

216°, 82%, 92%

HSL

216°, 83%, 54%

Quick Swatches

Current Selection

HEX: #2A77EB

RGB: rgb(42, 119, 235)

Hue: 216°

Screen picking uses the EyeDropper API and only works in supported browsers.

Color Format Tips

Short comparisons and tips to help you choose the right option faster.

HEX vs RGB vs HSL

HEX is compact and common in CSS. RGB is useful when you need explicit red, green, and blue channel values. HSL is useful when adjusting hue, saturation, and lightness more intuitively.

When an eyedropper helps most

An eyedropper is especially useful when matching colors from screenshots, brand assets, live pages, mockups, or existing interfaces.

How to Use

Follow these quick steps to get the result you need.

Use the screen picker or color field to choose the shade you want.

Check the generated HEX, RGB, and HSL values in the output cards.

Copy the format you need or tap a swatch to reuse common colors quickly.