ToolFeather

Color Converter & Picker

Convert any color between HEX, RGB, HSL and HSV, sample colors from your screen, and match common CSS color names.

Color Converter & Picker

Palette suggestions

🔒 Nothing you enter is sent anywhere or stored. All processing happens in your browser.

How it works

Colors on the web can be written several ways, and this tool converts between the four most common while keeping every field in sync. Edit any format and the others update instantly, along with a live preview swatch.

HEX is the six-digit hexadecimal form (#4F46E5) used most in CSS. RGB lists red, green, and blue from 0–255, matching how screens mix light. HSL (hue, saturation, lightness) and HSV (hue, saturation, value) describe color the way people think about it — pick a hue on the color wheel, then adjust how vivid and how light it is. HSL and HSV are especially handy for generating tints and shades programmatically.

Pick a color visually with the swatch input, or use the browser's eyedropper (where supported) to sample any pixel on your screen. The palette suggestions rotate the hue around the color wheel to offer harmonious neighbors you can click to adopt. All conversion math runs locally in your browser.

Examples

#4F46E5 → RGB rgb(79, 70, 229) → HSL hsl(245, 79%, 59%)
Type an RGB value → HEX, HSL, and HSV update to match.
Click a palette swatch → it becomes the new active color.

Popular color conversions

HEX → RGBRGB → HEXHEX → HSLHSL → HEXRGB → HSLHSL → RGB

See all converters →

Common CSS color names

NameHEXRGB
White#FFFFFFrgb(255, 255, 255)
Black#000000rgb(0, 0, 0)
Red#FF0000rgb(255, 0, 0)
Green#008000rgb(0, 128, 0)
Blue#0000FFrgb(0, 0, 255)
Orange#FFA500rgb(255, 165, 0)
Gray#808080rgb(128, 128, 128)
Gold#FFD700rgb(255, 215, 0)
Teal#008080rgb(0, 128, 128)
Navy#000080rgb(0, 0, 128)
Emerald#059669rgb(5, 150, 105)

HEX is compact and standard in CSS; RGB mirrors how screens mix red, green and blue light; HSL/HSV describe colour the way people think — pick a hue, then adjust how vivid and how light it is. All four describe the same colours, so pick whichever suits the task.

Frequently asked questions

What's the difference between HSL and HSV?
Both start from a hue and saturation, but HSL's third value is lightness (0 = black, 100 = white, 50 = pure color) while HSV's is value/brightness (0 = black, 100 = brightest). They suit different tint/shade workflows.
Why doesn't the eyedropper work?
The EyeDropper API is only available in some browsers (recent Chromium-based ones). Where it's unsupported, the button is disabled and you can still pick with the color swatch.
Can I enter shorthand HEX like #fff?
Yes. Three-digit HEX values are expanded automatically, so #fff is read as #ffffff.
Is my color data stored?
No. All conversions run in your browser and nothing is saved or transmitted.
How do I convert HEX to RGB?
Split the six-digit hex code into three pairs and read each as a base-16 number 0–255. #4F46E5 → 4F=79, 46=70, E5=229 → rgb(79, 70, 229). This tool does it instantly and also converts RGB back to HEX.
What's the difference between HSL and HSV?
Both describe colour by hue (position on the colour wheel), but HSL uses Saturation and Lightness while HSV uses Saturation and Value (brightness). HSL is intuitive for tints and shades; HSV maps well to colour pickers. This tool shows both.
What is the hex code for common colors?
White is #FFFFFF, black #000000, red #FF0000, green #008000, blue #0000FF. The named-colour table below lists more of the standard CSS colours with their hex and RGB values.
Can I pick a color from anywhere on my screen?
On supported browsers, the eyedropper lets you sample any pixel on screen and instantly get its HEX/RGB value — handy for matching a colour from an image or another app.
Is my color data uploaded?
No — all conversion happens locally in your browser.