Overview
Convert colors between HEX, RGB, and HSL
Every color on the web can be written in several formats, and each one is useful in different places. HEX codes like #3b82f6 are compact and dominate CSS and design tools. RGB spells out the red, green, and blue channels as numbers from 0 to 255, which maps directly to how screens emit light. HSL describes a color by hue, saturation, and lightness, which is far more intuitive when you want to tweak a shade or build a palette by eye.
ToolHub Color Converter takes a single color and shows you all three formats at once. Pick a color with the swatch, or type a hex code, and the HEX, RGB, and HSL readouts update together. Everything happens in your browser.
Step-by-step
How to convert a color
- 1
Choose a color
Click the swatch to open your system color picker, or type a hex code into the text field. The preview block fills with your color. - 2
Read the formats
HEX, RGB, and HSL appear in their own rows, each formatted exactly as you would paste it into CSS. - 3
Copy what you need
Click copy next to any format to put it on your clipboard. Use HEX for design tools, RGB for opacity work, and HSL for adjusting shades.
Background
What each format means
All three formats describe the same point in color space, just with different axes. Converting between them is pure math, so the values always round-trip back to the same color.
HEX and RGB are the same numbers
A hex code is just RGB written in base 16. #3b82f6 breaks into 3b, 82, and f6, which are 59, 130, and 246 in decimal. That is exactly the RGB triple. The only difference is notation, which is why the conversion is lossless.
HSL is built for humans
HSL rearranges the same color into hue (the position on the color wheel, 0 to 360 degrees), saturation (how vivid it is), and lightness (how close to black or white). To make a color lighter you raise the L value, no guessing at channel math required. That makes HSL ideal for generating tints, shades, and accessible variations.
Use cases
When to use a color converter
Translating a design handoff
A designer sends a hex code but your component library expects rgb() or hsl(). Convert it in one click.
Building tints and shades
Switch to HSL, then nudge lightness up or down to generate a consistent set of related colors.
Adding transparency
RGB is the easy path to rgba(). Grab the RGB values, then append an alpha channel for overlays.
Matching brand colors
Verify that the hex in your CSS resolves to the exact RGB the brand guidelines specify.
Debugging color drift
Paste a hex from one tool to confirm it matches the RGB another tool reports.
Learning color theory
Watch how hue, saturation, and lightness change as you drag the picker around the wheel.
Tips and best practices
- Use HSL when you want to create a palette. Keep hue fixed and vary lightness for a clean tint scale.
- Three digit hex like #f0f is shorthand for #ff00ff. Both are valid and convert the same way.
- RGB values are whole numbers from 0 to 255. HSL hue is degrees, saturation and lightness are percentages.
- For semi-transparent colors, convert to RGB first, then write rgba(r, g, b, alpha).
- Rounding in HSL can cause tiny differences on round-trip. The visible color stays the same.
Common questions
Why does my HSL value look slightly off after converting back?
HSL components are rounded to whole numbers for readability. That rounding can shift a value by a fraction of a percent when you convert back to hex, but the change is far too small to see. The displayed color stays identical.
What is the difference between HSL and HSB or HSV?
HSL uses lightness, where 50 percent is the pure, most saturated color and 100 percent is white. HSB and HSV use brightness, where 100 percent is the pure color. They are different models, so do not paste HSV numbers into an HSL function.
Can I enter a three digit hex code?
Yes. Both three digit shorthand like #0af and full six digit codes like #00aaff work. The converter expands the shorthand automatically.
Does this support alpha or opacity?
The converter focuses on the opaque HEX, RGB, and HSL formats. To add transparency, take the RGB values and write them asrgba(r, g, b, alpha) with your chosen alpha from 0 to 1.
100% private