Color Converter -- HEX to RGB to HSL Explained
The format mismatch problem
You grab a brand color from a design file in hex -- say #3B82F6. Then your CSS animation needs it in HSL so you can adjust the lightness on hover. Or your JavaScript canvas API wants rgb() values. Suddenly you are juggling three notations for the same color, and converting between them by hand means math you should not have to do.
Different tools and platforms default to different formats. Figma exports hex, Tailwind configuration uses hex, CSS custom properties often use HSL for easy theming, and older codebases are full of rgb(). A quick color converter eliminates the friction of moving between them.
How to convert colors
- Open the Color Converter.
- Enter a color in any supported format -- hex, RGB, or HSL.
- The tool instantly shows the equivalent value in every other format.
- Copy the format you need with one click.
When to use HEX vs RGB vs HSL
Each format has strengths depending on context:
- HEX (
#3B82F6) -- the most compact format. Best for design tokens, configuration files, and anywhere you want a single short string. Nearly universal across tools. - RGB (
rgb(59, 130, 246)) -- maps directly to how screens produce color by mixing red, green, and blue channels. Useful in JavaScript, canvas APIs, and when you need to manipulate individual channels programmatically. - HSL (
hsl(217, 91%, 60%)) -- describes color in human terms: hue (the color), saturation (intensity), and lightness (brightness). Ideal for CSS theming because you can create hover states and variants by changing just the lightness value.
How color conversion works
HEX is just RGB in base-16 notation. #3B82F6 breaks into three pairs: 3B = 59 red, 82 = 130 green, F6 = 246 blue. Converting between hex and RGB is straightforward base conversion.
RGB to HSL is more involved. The algorithm finds the maximum and minimum channel values, uses them to calculate lightness (the average of max and min), saturation (based on the range between max and min), and hue (based on which channel is dominant and the offset of the others). The reverse -- HSL to RGB -- uses sector-based math to map the hue angle back to channel intensities.
CSS color formats reference
#RGB-- shorthand hex (e.g.,#F00= red)#RRGGBB-- full hex (e.g.,#FF0000)#RRGGBBAA-- hex with alpha (e.g.,#FF000080= 50% transparent red)rgb(R, G, B)-- decimal 0-255 per channelrgba(R, G, B, A)-- with alpha 0-1hsl(H, S%, L%)-- hue 0-360, saturation and lightness 0-100%hsla(H, S%, L%, A)-- with alpha 0-1
Modern CSS also supports the space-separated syntax: rgb(59 130 246 / 0.5) and hsl(217 91% 60% / 0.5).
Built with vanilla HTML/JS. No frameworks, no backend, loads instantly.