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.
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.