What is a HEX color code?

A HEX color code is a six-character representation of a color using hexadecimal digits, prefixed with #. It encodes the red, green, and blue channels as pairs of hex digits, for example #4f46e5.

What is the difference between RGB and HSL?

RGB defines a color by its red, green, and blue channel intensities (0–255). HSL defines a color by hue (0–360°), saturation (0–100%), and lightness (0–100%), which is often more intuitive for adjusting brightness or vividness.

Can I type a HEX code directly?

Yes. Type any valid 6-character HEX code into the input field and the color preview and all other formats will update instantly.

How do I convert an RGB colour to HEX?

Enter the RGB values (0–255 for each channel) into the colour picker by selecting a colour close to yours and fine-tuning it, or type the HEX equivalent directly. The tool shows all three formats simultaneously so you can copy the one you need.

What is a HSL colour value and when should I use it?

HSL stands for Hue, Saturation, and Lightness. It is more intuitive than RGB for making a colour lighter, darker, or more vivid because you adjust a single channel rather than three. It is commonly used in CSS and design systems where colour variations are generated programmatically.

Private by defaultRuns in your browser

Color picker & hex generator

Pick a color or enter a HEX code to instantly get the equivalent HEX, RGB, and HSL values.

HEX

RGBrgb(5, 150, 105)

HSLhsl(161, 94%, 30%)

R5G150B105

Quick samplesCommon colors

Color Picker

About this tool

Pick any color and instantly get HEX, RGB, and HSL values with one-click copy. Preview contrast and brightness — runs in your browser.

Pick a color or enter a HEX code to instantly get the equivalent HEX, RGB, and HSL values.

No signup requiredRuns in your browserInstant results

How to use

1
Use the color picker canvas to visually select a color, or type directly into any of the input fields.
2
Enter a HEX code, RGB values, or HSL values — all formats update simultaneously.
3
Copy the value in whichever format your project needs.

Why use this tool?

→
Pick a color from a palette and copy its HEX code for use in CSS or design tools.
→
Convert an RGB value from a design handoff into HEX or HSL for your stylesheet.
→
Explore color shades and get the exact format your codebase requires.

ExamplesInput → output

HEX to RGB

Input#FF5733

OutputRGB(255, 87, 51)

HEX to HSL

Input#FF5733

OutputHSL(11°, 100%, 60%)

RGB to HEX

InputRGB(0, 128, 255)

Output#0080FF

Frequently asked questionsCommon questions answered

These answers explain common color picker tasks, expected input formats, and edge cases so both visitors and search engines can understand what this tool does.

What is a HEX color code?: A HEX color code is a six-character representation of a color using hexadecimal digits, prefixed with #. It encodes the red, green, and blue channels as pairs of hex digits, for example #4f46e5.
What is the difference between RGB and HSL?: RGB defines a color by its red, green, and blue channel intensities (0–255). HSL defines a color by hue (0–360°), saturation (0–100%), and lightness (0–100%), which is often more intuitive for adjusting brightness or vividness.
Can I type a HEX code directly?: Yes. Type any valid 6-character HEX code into the input field and the color preview and all other formats will update instantly.
How do I convert an RGB colour to HEX?: Enter the RGB values (0–255 for each channel) into the colour picker by selecting a colour close to yours and fine-tuning it, or type the HEX equivalent directly. The tool shows all three formats simultaneously so you can copy the one you need.
What is a HSL colour value and when should I use it?: HSL stands for Hue, Saturation, and Lightness. It is more intuitive than RGB for making a colour lighter, darker, or more vivid because you adjust a single channel rather than three. It is commonly used in CSS and design systems where colour variations are generated programmatically.