What is the difference between HEX, RGB and HSL?

They are three ways of describing the same color. HEX is a compact six-character code, RGB lists the red, green and blue channels, and HSL describes hue, saturation and lightness.

Can I paste a hex code to jump to a specific color?

Yes. Type or paste any 3- or 6-digit hex code, with or without the # symbol, and the picker jumps straight to that color.

Color Picker

Drag inside the field to set saturation and lightness, then slide the hue rail to choose the color family. The HEX, RGB and HSL readouts, the H / S / L numbers and the swatch all update as you move, and every value copies with one click. Type or paste a hex code to jump straight to a color, use your screen's own chooser, or open the swatch full screen to preview and download it.

Hex

#7c3bed

HEX

#7c3bed

RGB

rgb(124, 59, 237)

HSL

hsl(262, 83%, 58%)

262°

83%

58%

A color picker lets you choose any color by adjusting hue, saturation and lightness — and see its HEX, RGB and HSL values update live. It is the fastest way to find an exact shade for a design.

Frequently asked questions

Drag inside the saturation and lightness field to set those values, move the hue slider to change the base color, or type a hex code into the Hex input. Every value updates live and copies with one click.

Good to know

HEX codes use base-16, so each color pair runs from 00 to FF (0 to 255 in decimal).
Hue is measured in degrees around a 0–360 circle, with red at 0°.
Both #RGB shorthand and full #RRGGBB codes are supported.

Tools that pair with Color Picker

Color Picker is one of 33 single-page tools in this workspace. These are the ones that carry the job on — the color value moves between them, so nothing gets retyped or re-uploaded.

RGB to HexTurn red, green and blue channels into a hex code.Hex to RGBBreak any hex code into its RGB and HSL values.Color WheelFind complementary and harmonious colors in one click.