RGB to Hex Converter: Free Color Code Tool

This RGB to hex converter turns red, green and blue values from 0 to 255 into a HEX color code, plus the matching HSL, HSV and CMYK values. Designers, developers and content creators can type numbers or drag sliders, watch a live color preview, and copy any format with one click.

What Is an RGB to Hex Conversion?

An RGB to hex conversion rewrites a color from three decimal numbers into one six-character hexadecimal code. RGB describes how much red, green and blue light a screen mixes, each on a scale from 0 (none) to 255 (full). HEX stores the same three amounts in base 16, which is why web code such as CSS and HTML uses it so often.

The rule is simple. Convert each channel to base 16, make sure it has two characters, and join them in red, green, blue order behind a hash sign. Divide a channel by 16 to get the first character, and the remainder is the second. Base 16 uses the digits 0 to 9 and the letters A to F, where A is 10 and F is 15.

Why 255 is the ceiling

Each channel holds one byte, which has 256 possible values (0 to 255). In base 16 the largest byte is FF, so every valid HEX code has exactly two characters per channel. That is also why values above 255 or below 0 are not valid colors.

How to Use the RGB to Hex Converter

You can convert a color in a few seconds by setting the three channels and reading the results panel. Follow these steps.

1. Enter a number from 0 to 255 in the R (red), G (green) and B (blue) fields. You can also drag the slider under each field.
2. Watch the preview box. It shows your color and its HEX code, such as #000000 when all channels are 0.
3. Check the CSS Color Name line. For common colors it shows a familiar name such as Gold or Tomato.
4. Look at the Channel Breakdown bars to see how much red, green and blue make up the color.
5. Scroll to CSS Color Formats and press the copy button next to HEX, RGB, HSL, HSV or CMYK to copy that value.
6. Press Reset to return all three channels to 0, or tap a Quick samples button (Tomato, Jade, Royal Blue, Gold, Dark Magenta, Steel Blue, Dark Orange or Sea Green) to load a ready-made color.

If a field is left empty it counts as 0, and a number above 255 is pulled back to 255, so you always get a valid color.

Worked Example: Converting Tomato (255, 99, 71)

The easiest way to understand the result is to follow one color through the conversion. Tap the Tomato sample, or enter R 255, G 99 and B 71.

• Red 255: 255 divided by 16 is 15 remainder 15, and both are F, so the pair is FF.
• Green 99: 99 divided by 16 is 6 remainder 3, so the pair is 63.
• Blue 71: 71 divided by 16 is 4 remainder 7, so the pair is 47.

Joined together, the HEX code is #FF6347. The tool also reports HSL as roughly 9, 100%, 64%, HSV as 9, 72%, 100%, and CMYK as 0, 61, 72, 0. In this example, the HSL saturation of 100% says the color is fully vivid, and the lightness of 64% says it sits a bit above the midpoint between black and white.

You would paste #FF6347 into a stylesheet as a text, border or background color. The color name line shows Tomato, which confirms you landed on a standard CSS named color.

How Do You Read the Results?

Each output answers a different practical question, so pick the format that matches where you will use the color.

HEX

HEX is the six-character code with a leading hash, shown in uppercase. Use it in CSS, HTML, SVG, design apps and most website builders. If both characters of every channel repeat, such as #FFCC00, some code editors accept the short form #FC0, but the full form always works.

RGB and HSL

RGB repeats your input in CSS notation, which is handy when you need to add transparency in your own stylesheet. HSL gives hue (0 to 360 degrees around the color wheel), saturation and lightness as percentages. It is the easiest format for making a color lighter, darker or less intense: change only the lightness or saturation number and the hue stays the same.

HSV and CMYK

HSV (hue, saturation, value) matches the way many graphic editors draw their color pickers. CMYK shows cyan, magenta, yellow and black percentages, which is a useful starting point when a printer asks for ink values. Treat the CMYK figures as a basic mathematical conversion, because printed color depends on paper, ink and the printer profile.

Channel Breakdown bars

The three bars show how far each channel is from 0 to 255. Three bars of similar length mean a gray or near-neutral color. One long bar and two short ones mean a strongly tinted color, such as a bar for red that is full while green and blue are small.

Common Colors Quick Reference

These widely used values are handy for checking your own results or answering quick questions such as the RGB hex code for white or black.

A quick rule: if all three channels are equal, the result is a gray, and the HEX code repeats one pair three times, like #808080.

Who Uses an RGB to Hex Converter?

Anyone who receives a color as three numbers but needs a web-ready code can use this page. These are typical situations.

• Front-end developers: A design file or API gives you rgb(70, 130, 180), and your stylesheet uses HEX. Convert it once and copy #4682B4.
• Designers and brand managers: You are documenting brand colors and want HEX, RGB, HSL and CMYK listed side by side in a style guide.
• Bloggers and site owners: A theme setting asks for a HEX code, but the color you picked from a screenshot is in RGB.
• Gamers and hardware tinkerers: Lighting software for controllers, keyboards or LED strips often asks for HEX or RGB. Enter the numbers and copy the code you need.
• Students: Watching the Channel Breakdown change as you move a slider makes additive color mixing easy to grasp.

If you only have the color on an image, grab it first with the image color extractor or pull a whole set with the color palette extractor, then bring the numbers here.

Best Practices and Troubleshooting

Most surprises come from a few small input mistakes, and each has a quick fix.

• Use whole numbers from 0 to 255. A value like 256 is brought back to 255, so the result will not match what you expected. Check your source number if the color looks off.
• Keep the channel order. RGB is red, green, blue. Entering blue first gives a very different color, such as orange becoming a blue-green.
• Include the hash in CSS. The tool shows the code with a leading hash. Some apps want it and some do not, so remove or keep it as the destination requires.
• Do not confuse a missing name with an error. The CSS Color Name line covers a limited set of common named colors. A valid color with no name still has correct HEX, HSL, HSV and CMYK values.
• Check contrast before using text colors. A color can convert perfectly and still be hard to read on your background. Compare lightness values and test text on the real page.
• Round-trip when in doubt. Paste the HEX result into the Hex to RGB converter and confirm you get your original numbers back.

If you are not sure which color you want yet, choose it visually with the color picker and then use this page to double-check specific channel values.

Limitations to Know About

This page converts opaque colors made of exactly three channels. It does not take an alpha (opacity) value, so there is no eight-character HEX output. If you need transparency, keep the HEX code from here and add the opacity in your own CSS, for example by using the RGB values with an alpha setting.

HSL, HSV and CMYK values are rounded to whole numbers. Converting a rounded HSL or CMYK value back can differ from the original by a point or two, so treat HEX and RGB as the exact pair. The page also does not convert colors for a specific monitor profile, so a color can look slightly different on different screens.

For code-based projects in Python or JavaScript, you can use the same rule shown above to build your own function, then use this page to test a few known colors and confirm your output.

Convert Your Color Now

Set the red, green and blue values above, check the live preview, and copy the HEX, HSL, HSV or CMYK code you need. For more ways to work with images and colors, browse the image editing and optimization tools, or build a matching site icon with the favicon generator once your brand color is set.