How do I convert a HEX color to RGB?

Paste the hex code (for example #ff8800) into the input. The RGB row shows rgb(255, 136, 0) immediately, along with HSL, HSV, and the CSS name. Click the copy icon on the RGB row to copy it.

How do I convert RGB or HSL back to HEX?

Type the value as rgb(255, 136, 0) or hsl(32, 100%, 50%) and the HEX row updates instantly. Both comma syntax and modern space syntax such as rgb(255 136 0) are accepted.

Does it keep transparency when I convert?

Yes. Enter an 8-digit hex like #ff880080 or an rgba()/hsla() value and the alpha is preserved in the HEX8, RGBA, and HSLA outputs. The preview shows a checkerboard behind semi-transparent colors so you can see the opacity.

What is the difference between HSL and HSV/HSB?

Both start from a hue angle. HSL's third axis is lightness — 50% with full saturation is the pure hue, 100% is white. HSV's third axis is value or brightness — 100% with full saturation is the pure hue, and 0% is black. HSV/HSB is what most design-app color pickers use.

How does the shades and tints generator work?

It produces eleven steps that run from black, through your exact color in the outlined center swatch, to white — the darker half are shades, the lighter half are tints. Click any swatch to copy its hex code.

Will it give me the CSS color name?

Yes. If your color exactly matches one of the 148 standard CSS named colors, that name is shown. Otherwise the closest name is shown labeled as nearest, so you always have a readable label to work from.

Is my color data uploaded to a server?

No. All parsing and conversion run in your browser with JavaScript, so nothing you enter leaves your device.

Color Converter — HEX, RGB, HSL, HSV & CSS Names

Convert HEX, RGB, HSL, HSV & CSS Color Names

This free color converter turns any color you type into every common web format at once. Enter a hex code, an rgb() or rgba() value, an hsl() or hsla() value, an hsv()/hsb() value, or a CSS color name such as coral, and instantly read the color back as 6-digit HEX, 8-digit HEX with alpha, RGB, RGBA, HSL, HSLA, HSV/HSB, and its exact or nearest CSS name. A native color picker stays in sync with the text field, so you can dial a color in visually or paste one from your code.

It is built for front-end developers translating a design token between formats, designers matching a brand color, and anyone who has a hex code and needs the rgb() or hsl() equivalent. Every value is one click to copy, a large swatch previews the color over a transparency checkerboard, and a shades and tints strip generates a ready-made palette from black through your color to white. All conversion runs in your browser with JavaScript — nothing you enter is uploaded, stored, or transmitted.

How to use Color Converter

Type or paste a color into the input: a hex code (#ff8800 or #ff880080), rgb(255, 136, 0), hsl(32, 100%, 50%), hsv(32, 100%, 100%), or a CSS name like orange.
Or click the color picker on the left to choose a color visually — the text field updates to match.
Read the color in every format in the Formats list and click the copy icon on any row to copy that value.
Check the large preview swatch; if the color is semi-transparent, the checkerboard behind it shows through.
Scroll to Shades & tints and click any swatch to copy its hex — the center swatch (outlined) is your original color.

Formats it converts between

HEX — the 6-digit #rrggbb form used throughout CSS and design tools.
HEX8 — the 8-digit #rrggbbaa form that encodes alpha as the final byte (ff is opaque, 80 is about 50%).
RGB and RGBA — red, green, and blue on a 0-255 scale, with an optional 0-1 alpha channel.
HSL and HSLA — hue in degrees with saturation and lightness as percentages; intuitive for making a color lighter or more muted.
HSV / HSB — hue with saturation and value (also called brightness); the model many color pickers, including Photoshop, are built on.
CSS color name — the exact keyword if the color matches one of the 148 CSS named colors, otherwise the nearest name so you have a human label.

Input formats it accepts

The input is deliberately forgiving. Hex codes work with or without the leading #, in 3, 4, 6, or 8 digits. Functional notation accepts both the legacy comma syntax rgb(255, 136, 0) and the modern space syntax rgb(255 136 0 / 50%), and channels may be written as percentages. Hue tolerates a trailing deg, and saturation, lightness, and value can be written with or without a % sign. The keyword transparent and all standard CSS color names are recognized.

If what you type is not a color yet, the tool shows a short inline hint and simply waits — it never clears your text or crashes mid-edit.

#ff8800
rgb(255, 136, 0)
hsl(32, 100%, 50%)
hsv(32, 100%, 100%)   are all the same orange

Four ways to write one color; the converter shows every other format for each.

How shades and tints are generated

A tint is a color mixed with white; a shade is a color mixed with black. The strip builds eleven evenly spaced steps by mixing your color toward black on the left half and toward white on the right half, with your exact color in the outlined center swatch. That gives a quick, consistent palette for hover states, borders, and background variants without leaving the page. Mixing is done in sRGB, the same space the values are stored in, so the steps line up with what you would get from a simple CSS color-mix.

How alpha is handled

Transparency is preserved through every conversion. Enter an 8-digit hex like #ff880080 or an rgba()/hsla() value with an alpha channel and the alpha byte survives into HEX8, RGBA, and HSLA. The preview swatch is painted over a checkerboard so partial transparency is visible rather than blending invisibly into the page. Note that the native color picker itself only handles opaque colors, so using it sets alpha back to fully opaque.

Related terminology

HEX color: A color written as # followed by hexadecimal red, green, and blue pairs (#rrggbb), optionally with a fourth pair for alpha (#rrggbbaa). The standard way to specify colors in CSS.
RGB / RGBA: Red, green, and blue components on a 0-255 scale. RGBA adds an alpha channel from 0 (transparent) to 1 (opaque).
HSL: Hue (0-360 degrees on the color wheel), Saturation, and Lightness (both 0-100%). At 50% lightness with full saturation you get the pure hue; raising lightness tints it, lowering it shades it.
HSV / HSB: Hue, Saturation, and Value (also called Brightness). Like HSL but the third axis is brightness: at 100% value with full saturation you get the pure hue. The model behind many graphics-app color pickers.
Alpha channel: An extra value describing opacity, from fully transparent to fully opaque, carried in RGBA, HSLA, and 8-digit hex.
Tint and shade: A tint is a color lightened by mixing with white; a shade is a color darkened by mixing with black. Together they form a monochrome palette from one base color.

Frequently asked questions

How do I convert a HEX color to RGB?: Paste the hex code (for example #ff8800) into the input. The RGB row shows rgb(255, 136, 0) immediately, along with HSL, HSV, and the CSS name. Click the copy icon on the RGB row to copy it.
How do I convert RGB or HSL back to HEX?: Type the value as rgb(255, 136, 0) or hsl(32, 100%, 50%) and the HEX row updates instantly. Both comma syntax and modern space syntax such as rgb(255 136 0) are accepted.
Does it keep transparency when I convert?: Yes. Enter an 8-digit hex like #ff880080 or an rgba()/hsla() value and the alpha is preserved in the HEX8, RGBA, and HSLA outputs. The preview shows a checkerboard behind semi-transparent colors so you can see the opacity.
What is the difference between HSL and HSV/HSB?: Both start from a hue angle. HSL's third axis is lightness — 50% with full saturation is the pure hue, 100% is white. HSV's third axis is value or brightness — 100% with full saturation is the pure hue, and 0% is black. HSV/HSB is what most design-app color pickers use.
How does the shades and tints generator work?: It produces eleven steps that run from black, through your exact color in the outlined center swatch, to white — the darker half are shades, the lighter half are tints. Click any swatch to copy its hex code.
Will it give me the CSS color name?: Yes. If your color exactly matches one of the 148 standard CSS named colors, that name is shown. Otherwise the closest name is shown labeled as nearest, so you always have a readable label to work from.
Is my color data uploaded to a server?: No. All parsing and conversion run in your browser with JavaScript, so nothing you enter leaves your device.

Categories

Color Converter