About the Handiwork Color Converter
The Color Converter translates colors between HEX, RGB, and HSL with a large live preview. Pick a color, adjust channels with sliders or type exact values in any format, and copy CSS-ready strings — all formats stay synced in real time.
How to use the Handiwork Color Converter
- Pick a color with the swatch preview or color picker.
- Fine-tune using HEX, RGB sliders, or HSL sliders — every format updates together.
- Copy the HEX, rgb(), or hsl() value 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 from 0 to 255. HSL describes it by hue (0–360°), saturation, and lightness, which makes it intuitive for creating tints, shades, and color variations by adjusting a single slider.
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. Sliders make it easy to explore variations, and dedicated copy buttons give you ready-to-paste CSS values without manual formatting.
Accepted input formats
HEX input accepts both three-digit shorthand (#FFF) and full six-digit values (#FFFFFF) — shorthand is expanded by doubling each digit, the same rule browsers use. RGB channels accept 0–255 and HSL accepts hue in degrees with saturation and lightness as percentages; out-of-range values are clamped rather than rejected.
Rounding across formats
RGB channels and HSL degrees/percentages are whole numbers, so converting HEX → HSL → HEX can occasionally land one shade off due to rounding rather than returning the exact original value. This is a property of representing color in integer channels, not specific to this tool.
Continue this workflow
Use the adjacent tool when the next step calls for a different input, output, or method.
Assumptions and limitations
- Alpha (transparency) is not supported — there is no 4/8-digit hex, rgba(), or hsla() input or output, only fully opaque colors.
- Converting between formats involves rounding to whole numbers, so a round trip through HSL can shift a HEX value by one unit per channel.
- Color names (like "rebeccapurple") and other CSS color syntaxes such as lab() or oklch() are not recognized — only HEX, RGB, and HSL.
Sources and standards
These authoritative references were used to verify the method and guidance on this page.
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. Use the sliders to adjust either format and see the others update instantly.
Can I convert a HEX code to RGB?
Yes. Type a HEX value like #635BFF and the RGB and HSL fields update automatically. Invalid hex codes show an error message until corrected.
Can I copy CSS-ready color values?
Yes. Each format panel has its own copy button — copy the raw HEX code, or a formatted rgb() or hsl() string ready to paste into your stylesheet.
Does it support transparency or alpha values?
Not currently. The converter works with fully opaque HEX, RGB, and HSL values only — there is no rgba(), hsla(), or 8-digit hex support.