Color Converter
Convert colors between HEX, RGB, and HSL — edit any field and the others update instantly.
How to Convert a Color
- Pick a color using the color swatch/picker, or type a value directly into the HEX, RGB, or HSL fields.
- Watch the other two formats update automatically — all three stay in sync no matter which one you edit.
- Use the live swatch above the fields to preview the exact color as you adjust it.
- Click "Copy rgb()" or "Copy hsl()" to copy a ready-to-use CSS color string to your clipboard.
Frequently Asked Questions
What color formats does this tool support?
HEX (e.g., #2563eb), RGB (red/green/blue values 0-255), and HSL (hue 0-360°, saturation and lightness as percentages) — you can enter a value in any one of the three and the others recalculate instantly.
Why do my RGB and HSL values sometimes look slightly different after converting?
HSL and RGB use different math models, so converting from RGB to HSL and back can introduce tiny rounding differences of about ±1 — this is normal and won't be visible to the eye.
Does the HEX field accept 3-character shorthand codes?
Yes, shorthand HEX codes like #06c are automatically expanded to their full 6-character form (#0066cc) before conversion.
Can I use the copied rgb() and hsl() values directly in CSS?
Yes — the Copy rgb() and Copy hsl() buttons generate valid CSS color function syntax, like rgb(37, 99, 235), that you can paste straight into a stylesheet.
What happens if I type an invalid HEX code?
Invalid HEX input — anything that isn't 3 or 6 valid hexadecimal characters — is ignored, and the other fields won't update until you enter a valid code.