Genesis Forge
Genesis Forge › Free tools › Design tools

HEX to RGB converter

Convert a colour between HEX, RGB and HSL, with a live preview. Accepts #rgb, #rrggbb, rgb() and hsl().

Runs in your browser. Nothing you enter is uploaded.

What it does

The same colour can be written several ways. HEX is common in design tools and HTML, RGB in code and image editors, and HSL when you want to adjust lightness or saturation. Type any one form to get the others.

How to use it

  1. Type a colour as HEX (#5b4bb5 or #fff), as rgb(91, 75, 181), or as hsl(249, 42%, 50%), or use the picker.
  2. Read the other forms and copy the one you need.

Worked example

#5b4bb5 is rgb(91, 75, 181) and hsl(249, 42%, 50%).

How it works

A HEX code is three numbers in base 16: red, green and blue, each from 00 to ff (0 to 255). 5b is 91, 4b is 75 and b5 is 181. A three-digit code doubles each digit, so #fa3 means #ffaa33. HSL is worked out from RGB: hue from which channel is largest, lightness from the average of the largest and smallest channels, and saturation from how far apart they are. HSL values are rounded, so converting back can differ by one step.

Questions

What about transparency?

An eight-digit HEX code (#rrggbbaa) or rgb() with a fourth value adds alpha. This tool converts opaque colours only.

Is #FFF the same as #ffffff?

Yes. HEX codes are not case-sensitive, and three digits are shorthand for six.

Which form should I use in CSS?

Any of them works in all current browsers. HSL is easiest to adjust by hand.

Related tools

All free tools →