Color Picker & Converter

Pick any color and convert between HEX, RGB, and HSL formats instantly.

Popular Colors

Your Saved Colors

Click "Save to Palette" to add colors here.

What Is a Color Picker?

A color picker is a tool that lets you select a colour visually and get its code in different formats: HEX (used in CSS and HTML), RGB (red-green-blue values used in CSS and design software), and HSL (hue-saturation-lightness, a more intuitive format for adjusting colours). This tool lets you pick a colour, see all three formats simultaneously, and copy any format with one click.

Color Formats Explained

HEX is the most common format in web development. It's a six-character code prefixed with #, where every two characters represent the red, green, and blue channels in hexadecimal (00 to FF). For example, #FF0000 is pure red.

RGB defines colours by mixing red, green, and blue light, each ranging from 0 to 255. rgb(255, 0, 0) is pure red. This format is intuitive for understanding how light mixes — higher values mean more of that colour.

HSL stands for Hue (0-360° on the colour wheel), Saturation (0-100%), and Lightness (0-100%). It's the most human-friendly format — to make a colour lighter, increase lightness; to make it more muted, decrease saturation. Designers often prefer HSL because it maps to how we naturally think about colour adjustments.

How to Convert Between Formats

This tool converts automatically — enter a value in any format and the other two update instantly. You can also use the visual picker or the RGB sliders to find your colour, then copy whichever format you need. All conversions happen in your browser with no data sent anywhere.

Frequently Asked Questions

A HEX code is a 6-digit hexadecimal number prefixed with #. The first two digits are red, the middle two green, and the last two blue. For example, #FF0000 is pure red. HEX is the most common format in CSS and web design.
RGB mixes red, green, and blue light (0-255 each). HSL uses hue (colour wheel position), saturation (intensity), and lightness (brightness). HSL is more intuitive for adjusting colours — change lightness to go lighter/darker, change saturation to go vivid/muted.
Split the 6-digit hex code into three pairs. Convert each from hexadecimal to decimal. Example: #3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246).
Copied!