Color Picker & Converter

All the fields on this page describe one colour, and changing any of them updates the rest:

• The picker. Click the colour bar to open your browser's colour dialog and choose by eye.
• The HEX box. Type or paste a code, with or without the #, in 3-digit or 6-digit form.
• The R, G and B boxes. Enter each channel from 0 to 255 to nudge one channel at a time.

The page starts on #4f46e5, an indigo that reads as rgb(79, 70, 229) and hsl(243, 75%, 59%). Each format has its own copy button.

A few reference colours as the page shows them:

Which one to copy depends on where it's going. HEX is the compact form for stylesheets, design handoffs and brand guides. RGB suits code that works with separate channels, such as drawing on a canvas or tinting an image. HSL is the easiest to adjust: keep the hue and saturation and change the lightness to get a darker or lighter shade of the same colour.

The HSL values are rounded to whole numbers, so nearby colours can share the same HSL text. #808080 and #7f7f7f are different greys, but both show as hsl(0, 0%, 50%). If you copy the HSL and convert it back, you may land one step away from where you started.

When the exact colour matters, such as matching a logo or a brand palette, copy the HEX or RGB value. Use HSL when you plan to adjust the colour anyway.

• Transparency. There is no alpha channel. 8-digit codes like #4f46e580 and 4-digit codes are rejected.
• Colour names. Typing red or teal doesn't work. Enter the hex code.
• Invalid codes. While the HEX box holds something it can't read, the swatch turns grey, a hint appears below the boxes, and the RGB and HSL fields switch to the default indigo's values rather than your colour. Fix the code before copying anything.
• Copying what you typed. The HEX copy button copies the box exactly as it stands. If you typed f80, that's what you get, without the #. Move the picker or change an RGB box and the code is rewritten in full, as #ff8800.