ToolXkit Icon

HEX to RGB Converter

Turn a hex colour code into RGB values.

  • Free
  • No signup
  • Nothing uploaded
  • No watermark
#2563EB
  • HEX#2563EB
  • RGBrgb(37, 99, 235)
  • HSLhsl(221.2, 83.2%, 53.3%)
  • HSB / HSVhsv(221.2, 84.3%, 92.2%)
  • CMYKcmyk(84%, 58%, 0%, 8%)
  • Nearest nameroyalblue (closest)

Worked out in your browser. Nothing you enter or open is uploaded.

How to Convert HEX to RGB Values

HEX to RGB Converter: before and after HEX A INPUT HEX TO RGBCONVERTER RGB A RESULT

A hex code such as #FF5733 is compact, but plenty of places want the colour as three separate numbers: a PowerPoint colour dialog, an Excel fill, an Android layout, a CSS rgba() with transparency. This converter reads the hex code and gives you the red, green and blue values right away.

Paste your code and the RGB row is highlighted in the results, already written as rgb(255, 87, 51) for copying. Underneath sit HSL, HSB and CMYK versions plus the closest CSS name, in case the next program asks for something else.

No software to install Free Works on any device

Steps to Turn a Hex Code into RGB

  1. 1. Paste the hex code

    Type or paste it into the colour box, replacing the starting value. The hash sign is optional, and short codes like #FFF or F0C are expanded for you.

  2. 2. Read the RGB row

    The RGB line is highlighted in the results. It shows the three channels from 0 to 255 in the rgb() form that CSS and most apps accept.

  3. 3. Copy what you need

    Press Copy on the RGB row, or on any other format. Use the sliders if you want to nudge the colour before copying.

Try it now

What Is the HEX to RGB Conversion?

A hex colour is really three numbers in base 16. In #FF5733, FF is red, 57 is green and 33 is blue. Each pair runs from 00 to FF, which is 0 to 255 in everyday numbers. So FF becomes 255, 57 becomes 87 and 33 becomes 51, giving rgb(255, 87, 51). The conversion changes only how the colour is written, never the colour itself.

See an Example

Before 

#2563EB

After 

rgb(37, 99, 235)

Why Use Colour and CSS Tools?

Choosing colours that work together and writing CSS for shadows, gradients or grids takes a lot of trial and error. These tools show a live preview as you adjust, then hand you the colour codes or CSS to copy.

“See it first, then copy the code.”
  • Live previews while you adjust
  • Codes in HEX, RGB and HSL
  • CSS ready to paste
  • Designs checked for colour blindness
  • Palettes that work together
  • Readable text checked for contrast
  • Print colours in CMYK
  • Colours taken from photos

Popular Uses for Colour Pickers and CSS Generators

Designers and site owners use these for the same handful of jobs.

  • Brand colours Build a palette around a logo colour with matching tints, shades and accents.
  • Readable buttons Check that text on a coloured button passes the WCAG contrast ratio.
  • Card shadows Adjust a box shadow until a card looks right, then copy the CSS.
  • Page layouts Set up a CSS grid or flexbox layout visually instead of guessing values.
  • Print artwork Convert screen colours to CMYK and check bleed before sending a flyer to print.
  • Colours from a photo Pull the main colours out of a product photo to match a web page.
  • Colour blind checks See how a chart or poster looks to people with different kinds of colour blindness.
  • Button styles Design a gradient, glass or soft 3D style button and take the code.

What the Hex Converter Handles

Three and six digit codes

Shorthand like #0AF is expanded to #00AAFF before conversion, exactly as a browser would read it.

Eight digit codes

Codes that carry transparency in the last two digits are accepted. The colour is converted and the transparency part is set aside.

More than just RGB

Alongside RGB you also get HSL, HSB, CMYK and the closest CSS name, and every row can be copied separately.

Sliders for adjusting

Drag hue, lightness or any channel and both the hex and RGB values update together.

Why Use ToolXkit for HEX to RGB Converter?

Your files stay with you

Everything runs inside your browser. Nothing you open or type is uploaded to a server.

Design Tools for Different Users

Designers

Build palettes, test contrast and convert colours between HEX, RGB, HSL and CMYK.

Front-end developers

Generate CSS for gradients, shadows, animations and layouts and check it in a preview.

Design students

Learn how colour harmony and CSS properties work by changing them live.

Small business owners

Pick consistent brand colours for a shop sign, website and social posts.

Print designers

Convert colours for print and work out bleed, trim and pixel sizes.

Accessibility testers

Check contrast ratios and preview designs through different types of colour blindness.

Best Times to Pick Colours and Write CSS

These tools help when you are:

  • Starting a new brand or logo
  • Fixing text that is hard to read
  • Styling a button or card
  • Preparing a flyer for print
  • Matching a colour from a photo
  • Laying out a page with grid
  • Checking a chart for colour blindness
  • Converting a HEX code to RGB

Tips for Hex and RGB Codes

  1. Hex codes are not case sensitive. #ff5733 and #FF5733 are the same colour.

  2. Need transparency in CSS? Take the three RGB numbers and write rgba(255, 87, 51, 0.5) for a half-see-through version.

  3. In Excel or Word, choose More Colours, then Custom, and type the three numbers into the Red, Green and Blue boxes.

  4. If a red warning appears under the box, look for a stray letter beyond F or a missing digit. Hex codes only use 0 to 9 and A to F.

Frequently Asked Questions

Answers to common questions about this tool.

How do I convert hex to RGB by hand?

Split the code into three pairs and convert each from base 16. Multiply the first character by 16 and add the second, where A is 10 and F is 15. For 57 that is 5 times 16 plus 7, which gives 87.

What is RGB for #FFFFFF and #000000?

#FFFFFF is white, rgb(255, 255, 255), with every channel at full strength. #000000 is black, rgb(0, 0, 0), with every channel off. Mid grey #808080 is rgb(128, 128, 128).

Can I convert RGB back to hex here?

Yes. Type an rgb() value such as rgb(37, 99, 235) into the same box and the HEX row shows #2563EB. The tool reads either format and lists both.

What happens to an 8-digit hex code with alpha?

The first six digits are converted as normal. The final two, which describe transparency, are not carried into the rgb() result, so add an alpha value yourself with rgba() if you need it.

Why does my colour look different in print?

RGB describes light from a screen, while print uses ink. Certain vivid screen colours are simply out of reach for ink, so they come out duller on paper.

Can I copy the CSS straight into my project?

Yes. The generators give plain CSS that works in current browsers. Copy it into your stylesheet, then adjust class names or values to fit the rest of your design.

Is HEX to RGB Converter free for commercial work?

Yes. The colours, palettes and CSS you make are yours to use in client projects, products or anything else, with no credit required and no fee.

Why do my screen colours look different when printed?

Screens mix light in RGB, while printers mix ink in CMYK, and some bright screen colours cannot be printed. Convert to CMYK and ask your printer for a proof before a large print run.

What contrast ratio should my text have?

WCAG asks for at least 4.5 to 1 for normal text and 3 to 1 for large text. The Colour Contrast Checker shows whether your pair passes, so you can adjust before publishing.

Do I need to sign in to use HEX to RGB Converter?

No. There is no account to create. Open the page, adjust the settings and copy the result. Your choices are worked out on your own device and never leave it.

Further reading

More Colour & CSS Tools

Other free tools for the same kind of job.

Browse all tools