Color Converter
Convert colors between HEX, RGB, and HSL formats.
Preview
HEX
RGB
HSL
Design tool
Color Converter
Pick a color and get copy-ready HEX, RGB, and HSL values.
All tools
Related Tools
Continue with useful tools for nearby tasks.
How To Use The Color Converter
Click the color field to open your system color picker, or type a starting value, then drag the picker until the Preview swatch shows the shade you want. As you move, the three readouts update live: the HEX code, the RGB triplet, and the HSL values. Each one describes the same color in a different notation, so you can copy whichever format your stylesheet, design tool, or code expects and paste it straight in.
HEX, RGB, And HSL Explained
A single color can be written three ways. HEX is a six-digit hexadecimal code such as #0f766e, where pairs of digits encode red, green, and blue from 00 to ff. RGB writes those same three channels as decimal numbers from 0 to 255, like rgb(15, 118, 110), which mirrors how screens mix light. HSL describes the color by Hue (an angle on the color wheel), Saturation (how vivid it is), and Lightness (how bright it is) — hsl(174, 78%, 26%) — which is the most human-friendly model for nudging a shade by hand.
Common Colors In Every Format
The same color looks very different depending on the notation. The table below lists a few familiar colors side by side so you can see how HEX, RGB, and HSL line up.
| Color | HEX | RGB | HSL |
|---|---|---|---|
| White | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Red | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Green | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Teal | #0f766e | rgb(15, 118, 110) | hsl(174, 78%, 26%) |
Notice how pure red, green, and blue all share 100% saturation and 50% lightness in HSL, differing only by hue angle.
Worked Example: Lightening A Color With HSL
Suppose your brand teal is #0f766e, which is hsl(174, 78%, 26%). To create a hover state that is the same color but brighter, leave the hue and saturation alone and raise only the lightness — say to 36% — giving hsl(174, 78%, 36%). Doing the same edit in HEX or RGB would mean recalculating all three channels by hand. That predictability is exactly why HSL is the easiest model for building tints and shades from one base color.
Why This Tool Is Useful
Design files, CSS, screenshots, and image editors rarely agree on a single color notation, so you constantly need to translate one into another. This converter gives you all three at once from a single pick, which removes manual hex-to-rgb math, keeps brand colors exact across files, and makes it trivial to build a consistent palette of tints and shades for buttons, hover states, and themes.
Accuracy And Privacy
The conversions use the standard formulas browsers use to render color, so the HEX, RGB, and HSL values you copy will display identically wherever you paste them. Everything runs locally in your browser — nothing you pick or paste is uploaded, logged, or stored on a server, and the tool keeps working even if your connection drops after the page loads.
FAQ
What is HSL and when should I use it?
HSL stands for Hue, Saturation, and Lightness. Hue is an angle from 0 to 360 degrees on the color wheel, while saturation and lightness are percentages. It is the best model when you want to adjust a color intuitively — making a shade lighter or less intense — without recalculating the underlying numbers the way you would with HEX or RGB.
How do alpha and opacity work in color values?
Alpha controls transparency. In CSS you can add it with rgba() or hsla() using a value from 0 to 1, where 0 is fully transparent and 1 is fully opaque, or by appending two hex digits to a HEX color such as #0f766e80 for about 50% opacity. This converter works with solid, fully opaque colors, so add the alpha channel yourself when you need transparency.
What is 3-digit hex shorthand?
When each of the three HEX pairs is two identical characters, you can collapse the code to three digits. For example #ffffff becomes #fff and #0088cc becomes #08c. The browser expands each digit by doubling it, so shorthand and full form render the exact same color. Shorthand only works when every pair is a repeated character.
Which color format should I use in CSS?
All three are valid in CSS and render identically. HEX is compact and common for fixed brand colors. RGB is convenient when values come from code or image tools. HSL is best when you plan to tweak a color by hand, because changing the lightness or saturation is far more predictable than editing hex or rgb numbers.
Does this tool send my colors to a server?
No. The conversion between HEX, RGB, and HSL runs entirely in your browser using local math. Nothing you pick or paste is uploaded or stored, so the tool works the same way even if you go offline after the page has loaded.