App Interface
What this RGB to HEX converter does
CSS, design tools and image editors describe the same colour in several notations. RGB gives the red, green and blue channels as numbers from 0 to 255. HEX writes those three numbers as two hexadecimal digits each, after a #. HSL describes the colour by hue, saturation and lightness, which is easier to adjust by eye.
This tool converts RGB values to all of these at once. It also handles transparency: set alpha below 1 and it adds the 8-digit #RRGGBBAA form, rgba() and hsla(). A swatch shows the colour over a checkerboard, so you can see how transparent it really is.
When to use it
- Copying a colour from a design spec given in RGB into a stylesheet or theme file that expects HEX.
- Finding the HSL equivalent so you can make a lighter or darker variant by changing one number.
- Checking whether a colour has a 3-digit shorthand, such as
#F00for pure red. - Converting a semi-transparent
rgba()value to the 8-digit HEX form that modern browsers support.
How to use it
- Either paste a CSS colour into Paste a CSS colour, for example
rgb(30, 144, 255),rgba(30, 144, 255, 0.5)or simply30, 144, 255, or set the channels directly. - Adjust Red, Green and Blue with the sliders or type exact values in the number boxes. Each accepts whole numbers from 0 to 255.
- Set Alpha from 0 (fully transparent) to 1 (opaque). Leave it at 1 for an ordinary solid colour.
- Check the swatch, then use the Copy button next to the format you need.
Out-of-range values, such as 300 for red or an alpha of 2, are flagged with a message and the swatch clears until the value is fixed.
Worked example
Enter red 30, green 144 and blue 255. The results are:
| Format | Value |
|---|---|
| HEX | #1E90FF |
| RGB | rgb(30, 144, 255) |
| HSL | hsl(210, 100%, 56%) |
| Shorthand | Not available, because 1E, 90 and FF are not repeated pairs |
The arithmetic is simple: 30 is 1E in hexadecimal, 144 is 90 and 255 is FF. Now paste rgba(255, 0, 0, 0.5). The tool gives #FF0000, shorthand #F00 and the 8-digit #FF000080. There is no 4-digit shorthand here, because the alpha pair 80 is not a repeated digit; an alpha of 0.533 (88) would give #F008. The alpha byte is 0.5 times 255, rounded to 128, which is 80 in hex.
Where each format is used
HEX is the most common notation in stylesheets, brand guidelines and design tools, because it is short and easy to copy. rgb() and rgba() are handy when you need transparency or when code builds colours from numbers. HSL is the easiest to reason about by eye: hue is a position on the colour wheel from 0 to 360 degrees, saturation is how vivid the colour is, and lightness runs from black at 0% to white at 100%.
Options and limits
- Shorthand HEX exists only when each pair has two identical digits, such as
#AABBCC, which shortens to#ABC. - Alpha rounding. HEX stores alpha in 256 steps, so some decimal alphas cannot be represented exactly. 0.5 becomes 80 (128/255, about 0.502).
- HSL rounding. Hue, saturation and lightness are rounded to whole numbers, so converting the HSL back may land one unit away on a channel.
- Paste accepts
rgb(),rgba()and the space-separated modern syntax such asrgb(30 144 255 / 50%). It does not read named colours likedodgerblue.
Privacy
The conversion and the swatch are drawn by your browser. No colour values are sent to a server.
Tips
- HEX letters are not case sensitive;
#1e90ffand#1E90FFare the same colour. - 8-digit HEX works in all current major browsers, but some older tools and email clients only understand 6 digits. Use
rgba()where support is uncertain. - To build a palette, copy the HSL value and change only the lightness, for example 56% to 40% for a darker shade.
- Going the other way? The HEX to RGB converter reads any 3, 4, 6 or 8-digit code.
Frequently Asked Questions
How do I convert RGB to HEX manually?
Convert each channel from 0-255 to a two-digit hexadecimal number and join them after a #. For example 30, 144, 255 becomes 1E, 90, FF, so the colour is #1E90FF.
What is #RRGGBBAA?
It is HEX with a fourth pair for alpha (opacity). 00 is fully transparent and FF is fully opaque, so #FF000080 is red at roughly 50 percent opacity.
Why is there no shorthand for my colour?
A 3-digit code like #ABC expands to #AABBCC, so only colours whose pairs repeat a digit can be shortened.
Can I paste a CSS rgb() value?
Yes. Paste rgb(), rgba() or just three numbers separated by commas, and the sliders and results update.
Is anything uploaded?
No. The tool runs in your browser and does not send the colours anywhere.
