HEX to RGB Colour Converter

Convert a 3- or 6-digit HEX colour code to RGB and HSL values, or move the RGB and HSL sliders to get the HEX code, with a live colour preview.

Last updated
HEX#2563EB
RGBrgb(37, 99, 235)
HSLhsl(221, 83%, 53%)
RGBArgba(37, 99, 235, 1)

About the HEX to RGB

A HEX colour code such as #2563EB is three pairs of hexadecimal digits for red, green and blue, each running from 00 to FF (0 to 255). The converter reads each pair as a number: 25 is 37, 63 is 99 and EB is 235, so #2563EB is rgb(37, 99, 235). The three-digit shorthand doubles each digit, so #26E means #2266EE. You can type the code with or without the # and in upper or lower case.

The colour is shown in four CSS-ready forms: HEX, rgb(), hsl() and rgba() with an alpha of 1, each with its own copy button. HSL describes the same colour as a hue angle (0 to 360 degrees) plus saturation and lightness percentages, which makes it easy to produce a lighter or darker shade by changing only the lightness. All the controls are linked: type a HEX code, drag the R, G and B sliders, drag the H, S and L sliders, or use your browser's colour picker, and every value and the preview swatch update together.

Typical uses are copying a brand colour from a style guide into a stylesheet, or getting RGB numbers for a program that does not accept HEX. Once you have the colour, check that text in it is readable on your background with the Contrast Checker, or build matching colours with the Color Palette tool.

How to use the HEX to RGB

  1. 1

    Enter a HEX code

    Type or paste it into the HEX box, for example #2563EB, 2563eb or #26E. Clicking the small colour square opens your browser's colour picker instead.

  2. 2

    Or set the colour with sliders

    Drag R, G and B (0 to 255) or H (0 to 360) and S and L (0 to 100). The HEX box follows your changes.

  3. 3

    Check the preview

    The large swatch shows the current colour. If the HEX box holds an incomplete code, a red hint appears and the swatch keeps the last valid colour.

  4. 4

    Copy the format you need

    Click the copy icon next to HEX, RGB, HSL or RGBA.

What it can do

Shorthand and flexible input

3- and 6-digit codes, with or without the #, in any letter case.

Works in every direction

HEX to RGB and HSL, RGB to HEX and HSL, and HSL to RGB and HEX, all from the same screen.

Copy-ready CSS values

Outputs such as rgb(37, 99, 235) and hsl(221, 83%, 53%) can be pasted straight into a stylesheet.

Live preview and colour picker

A swatch updates as you type or drag, and the browser's own picker is one click away.

Limitations

  • There is no transparency control: 8-digit HEX codes (#RRGGBBAA) are not accepted, and the RGBA value always has an alpha of 1.
  • HSL values are rounded to whole numbers, so setting a colour with the HSL sliders can shift an RGB channel by a few units compared with the exact conversion.
  • Other colour formats such as CMYK, oklch(), lab() and named colours like "tomato" are not supported.
  • The HEX box accepts only HEX codes; to enter RGB numbers, use the R, G and B sliders.

Privacy

All conversions are calculated in your browser; the colours you enter are not sent to FlexyPdf's servers.

Frequently asked questions

How do I convert HEX to RGB by hand?

Split the code into three pairs and convert each from base 16 to base 10. For EB: E is 14 and B is 11, so 14 × 16 + 11 = 235. Do the same for the red and green pairs.

What does a 3-digit HEX code like #FFF mean?

It is shorthand where each digit is written twice: #FFF is #FFFFFF (white) and #26E is #2266EE. The converter expands it for you, and the HEX output always shows the full 6-digit form.

Is the HEX to RGB conversion exact?

Yes. HEX and RGB are two ways of writing the same three 8-bit numbers, so nothing is lost. Only the HSL values are rounded, to whole degrees and percentages.

Can I convert RGB to HEX here?

Yes. Move the R, G and B sliders to your values and the HEX code updates, shown in upper case. The RGB row also gives you the matching rgb() string.

How do I get a semi-transparent version of the colour?

Copy the RGBA value and change the last number from 1 to a value between 0 and 1, for example rgba(37, 99, 235, 0.5) for 50% opacity. The tool itself has no alpha slider.

Ratings & Reviews

—
No ratings yet
5
0
4
0
3
0
2
0
1
0

Rate HEX to RGB

Help others by sharing your experience. Your rating is shown without your name.

0/600