HEX to RGB Converter
Convert colors between HEX, RGB, and HSL instantly. Edit any format and the others update live, with a swatch preview and one-click copy.
HEX
RGB
HSL
All formats
#6366f1
rgb(99, 102, 241)
hsl(239, 84%, 67%)How to use the color converter
- Enter a HEX code, or use the color picker.
- Or type RGB (0–255) or HSL values directly.
- Every format updates instantly — the conversion works both ways.
- Click Copy next to any format, or copy all three at once.
HEX, RGB and HSL explained
HEX is the most common way to write colors in CSS and design tools. RGB is useful when working with code, canvas, or opacity (rgba). HSL makes it easy to create consistent tints and shades by adjusting lightness while keeping the same hue.
Once you've picked your colors, turn them into a background with the CSS gradient generator, or build the layout around them using the CSS grid & flexbox generator.
Frequently asked questions
How do I convert HEX to RGB?
Paste your HEX code (e.g. #6366f1) into the HEX field and the RGB and HSL values update instantly. You can also use the color picker or type RGB/HSL values to convert in the other direction.
What does a HEX color code mean?
A HEX code is a six-digit representation of a color in red, green, and blue. Each pair of digits (00–FF) sets the intensity of one channel — for example #FF0000 is pure red.
What is the difference between RGB and HSL?
RGB describes color by mixing red, green, and blue light (0–255 each). HSL describes the same color by hue (0–360°), saturation (%), and lightness (%), which is often more intuitive for adjusting tints and shades.
Is the conversion accurate?
Yes. All conversions use the standard sRGB math and round to the nearest whole value, matching what browsers render.
Need a whole screen, not just a snippet?Describe an app screen and MakeUI generates editable UI you can export to Figma or code.
Try MakeUI