ToolBox FreeDESIGN TOOL
Color Picker & HEX/RGB/HSL Converter
Choose a colour or type a value and see its HEX, RGB and HSL equivalents instantly.
How to use the Color Picker & HEX/RGB Converter
Use the colour picker, or edit any field: HEX, the three RGB numbers or the three HSL numbers. The others update straight away and the swatch shows the result. Use the copy buttons to paste a ready-to-use CSS value into your stylesheet.
The three formats
HEX is the familiar #RRGGBB code (three-digit shorthand such as #0af is accepted). RGB gives the red, green and blue amounts from 0 to 255. HSL describes hue (0–360° around the colour wheel), saturation and lightness, which makes it easy to produce lighter or darker versions of one colour.
Examples and uses
#635BFF is rgb(99, 91, 255) and hsl(243, 100%, 68%). Raising the lightness value in HSL gives a paler tint of the same colour.
Limitations and good to know
Values are rounded to whole numbers, so converting back and forth between HSL and RGB can shift a channel by one. Transparency (alpha) and CSS named colours are not handled by this tool.
Frequently asked questions
What is the difference between HEX and RGB?
They describe the same colour. HEX writes the three RGB channels as hexadecimal pairs.
Why does my HSL change by 1 after converting?
HSL values are rounded to whole numbers, which can cause a one-unit difference when converting back.
Does this support transparency?
Not currently. It works with opaque colours only.
Related tools
Looking for something else? Browse all free online tools on the ToolBox Free Hub homepage.