Display

Color Picker - HEX, RGB & HSL Color Converter

Pick any color and convert between HEX, RGB, HSL, and HSB instantly. Eyedropper supported.

#1Color Picker

#2Color Code Converter

HEX

RGB

HSL

HSB

What Is a Color Code?

A color code expresses a color as text and numbers a computer can work with. The same color can be written several ways depending on where it's used.

Pure red, for instance, is #FF0000 in HEX notation and rgb(255, 0, 0) in RGB. Identical color, different spellings — and since each context demands its own format, conversion becomes a daily task.

Color Formats and When to Use Them

HEX and RGB are the same information in different spellings, freely interconvertible. HSL and HSB shine when you want to keep a hue and vary only its brightness — invaluable when building a palette.

Format	Example	Typical use
HEX	#2F6BFF	The web's most common notation
RGB	rgb(47, 107, 255)	Additive light primaries; supports alpha
HSL	hsl(222, 100%, 59%)	Hue/saturation/lightness; easy to adjust
HSB	hsb(222, 82%, 100%)	The standard in design software

Tips for Choosing Colors

Limit yourself to about three colors — more and the design loses cohesion
Pick one base color, then build shades by varying only its lightness
Keep strong lightness contrast between text and background for readability
Dialing saturation down slightly gives a calmer, more polished impression
Colors render differently across screens — check on more than one device

Frequently Asked Questions

Q. The eyedropper doesn't work

A. The EyeDropper API is only available in Chrome / Edge / Opera; Firefox and Safari do not support it yet. As alternatives, pick colors from an uploaded image or type HEX/RGB values directly.

Q. What is the difference between HEX, RGB, and HSL?

A. HEX (#RRGGBB) is the hexadecimal notation common on the web, RGB uses three 0-255 channels, and HSL describes hue, saturation, and lightness. They are the same color in different notations, and design work switches between them as needed.

Q. Can I check color contrast ratios?

A. This tool focuses on picking colors, but from the RGB values you can compute the W3C contrast ratio ((L1+0.05)/(L2+0.05)) for accessibility. WCAG recommends at least 4.5:1 for body text.

Q. Are picked colors saved?

A. Recently used colors are saved automatically in your browser's localStorage. To keep colors consistent across sites, copying and storing the HEX values is recommended.

#3What Is Color Code Conversion?

Color code conversion means translating between the formats that describe a color — HEX, RGB, HSL, HSB, and others. Web design and app development constantly switch between these formats depending on the context.

About HEX Color Codes

HEX codes express colors as #RRGGBB — the most widely used format in CSS, with red, green, and blue components written in hexadecimal (00–FF). The 3-digit shorthand (e.g. #fff = #ffffff) is also supported.

RGB vs. HSL vs. HSB

RGB is an additive model specifying red, green, and blue light as values from 0 to 255.HSL defines a color by hue, saturation, and lightness, making it intuitive to adjust brightness while keeping the tone.HSB (also called HSV) uses hue, saturation, and brightness/value, and is the model used across design tools like Photoshop and Figma.

About the EyeDropper API

The EyeDropper API is a native browser feature that samples the color of any pixel on screen. Supported in Chrome and Edge, it can pick colors not just from web pages but from anywhere on your desktop. On unsupported browsers (Firefox, Safari) the eyedropper button is hidden.