Switch Between HEX, RGB and HSL
Translate a color between HEX, RGB and HSL, preview the swatch and copy values formatted for CSS.
HEX#1473e6RGBrgb(20, 115, 230)HSLhsl(213, 84%, 49%)
About this tool
Design tools hand out HEX, browsers read RGB, and HSL is easier to reason about when you want a lighter or more muted variant of the same hue.
Pick a swatch or type any of the three notations, and the other representations update immediately in a form you can drop into a stylesheet.
- HEX, RGB and HSL in sync
- Visual picker and swatch preview
- CSS-ready output strings
Frequently asked questions
Which notation should go into my stylesheet?
Any of them is valid. HEX is compact, RGB is explicit about channels, and HSL is convenient when generating shades from one hue.
How do I lighten a color quickly?
Switch to HSL and raise the lightness percentage. That keeps the hue and saturation intact instead of drifting toward grey.
Does it support transparent colors?
The converter works with solid colors. For alpha, add rgba() or hsla() with your own transparency value in the stylesheet.
Related tools
Epoch Converter — Timestamp to DateRead a Unix timestamp as a date, or get the timestamp for a moment you choose. Shows UTC and your local clock side by side.Hash Calculator — MD5, SHA-2 and SHA-3Hash a string with MD5, SHA-1, SHA-224, SHA-256, SHA-384, SHA-512 and the SHA-3 family in one pass, then copy any result.Number Base Converter — Binary, Hex, DecimalType a number in any base and read it in the others at once, with support for very large integers and bases from 2 to 36.Regex TesterTest regular expressions live against sample text. See matches, capture groups and flags highlighted as you type.