About the Handiwork Color Converter
The Color Converter translates colors between HEX, RGB, and HSL with a live preview. Paste a value in any format and instantly see the equivalents, making it easy to copy the exact color into your CSS, design tool, or codebase.
How to use the Handiwork Color Converter
- Enter a color in HEX, RGB, or HSL.
- See the live preview and the equivalent values in every format.
- Copy the format you need for your project.
HEX, RGB, and HSL explained
HEX (e.g. #3b82f6) is a compact six-digit notation common in CSS. RGB describes a color by its red, green, and blue channels. HSL describes it by hue, saturation, and lightness, which makes it intuitive for creating tints, shades, and color variations by adjusting a single value.
Why convert between formats?
Different tools prefer different formats: design apps often show HEX, accessibility checks use RGB, and theming systems lean on HSL because adjusting lightness is straightforward. Converting instantly means you never have to do the math by hand.
Frequently asked questions
What is the difference between RGB and HSL?
RGB mixes red, green, and blue light to make a color, while HSL describes the same color by hue, saturation, and lightness — which is easier to tweak when you want a lighter or more muted version.
Can I convert a HEX code to RGB?
Yes. Enter the HEX value and the converter instantly shows the matching RGB and HSL values.