Color Picker

Color Picker lets you choose a color visually and instantly read it as HEX, RGB and HSL. Use the picker, type a HEX value, or click a preset swatch to get started.

Everything updates live and runs in your browser, so it is a quick way to grab a color in whichever format your project needs.

HEX#7c3aed
RGBrgb(124, 58, 237)
HSLhsl(262, 83%, 58%)

How to use Color Picker

  1. 1

    Choose a color

    Use the picker, enter a HEX value, or click a preset swatch.

  2. 2

    Read every format

    HEX, RGB and HSL are shown together for the selected color.

  3. 3

    Copy what you need

    Copy the format your stylesheet or design tool expects.

One color, three formats

Designers and developers move colors between HEX, RGB and HSL constantly. This picker shows all three at once so you never have to guess or run a separate conversion.

HEX is compact and common in CSS, RGB pairs with alpha for transparency, and HSL is the easiest format for adjusting brightness and saturation.

Works entirely in your browser

The picker uses your browser's native color input, so it feels familiar and works offline. No color you choose is ever uploaded anywhere.

Preset swatches give you a fast starting point, and the live preview confirms exactly what you have selected before you copy it.

Frequently asked questions

Which formats can I copy?
HEX, RGB and HSL — each with its own copy button.
Can I type a specific HEX value?
Yes. Enter a 3- or 6-digit HEX code and the picker and all formats update to match.

Last updated: