Color Converter
Convert colors between HEX, RGB, and HSL formats instantly.
Color Input
Accepts: #RRGGBB or #RGB · rgb(R, G, B) or R, G, B · hsl(H, S%, L%) or H S% L%
Examples
Input
#ff5733
Output
HEX: #FF5733 · RGB: rgb(255, 87, 51) · HSL: hsl(11, 100%, 60%)
Input
rgb(100, 149, 237)
Output
HEX: #6495ED · RGB: rgb(100, 149, 237) · HSL: hsl(219, 79%, 66%)
About this tool
Use this color converter to switch between HEX, RGB, and HSL color formats instantly. It is useful for front-end development, design work, CSS authoring, and any workflow where you need the same color expressed in a different format.
How to use
- Enter a color in any format: HEX (#ff5733), RGB (255, 87, 51), or HSL (11, 100%, 60%).
- The tool auto-detects the format and shows a live color preview.
- Copy the HEX, RGB, or HSL value you need.
When to convert between color formats
Different tools, design systems, and codebases use different color formats. CSS often uses HEX or RGB, while HSL is useful for making programmatic adjustments to lightness and saturation. A color converter lets you move between them without manual calculation.
This tool accepts HEX, RGB, and HSL input and outputs all three formats so you can pick whichever you need.
HEX vs RGB vs HSL
HEX is the most common format for web colors and is compact. RGB makes each color channel explicit and is easy to use in CSS. HSL is the most intuitive for humans because it separates hue, saturation, and lightness into distinct values that are easy to reason about when adjusting a color.
FAQ
What color formats does this tool accept?
It accepts HEX (#RRGGBB or #RGB), RGB (as rgb(R,G,B) or plain R,G,B numbers), and HSL (as hsl(H,S%,L%) or plain H S% L% values).
Does it show a color preview?
Yes. A color swatch appears once a valid color is detected so you can visually confirm the result.
Can I copy just the format I need?
Yes. Each output row has its own copy button so you can copy HEX, RGB, or HSL independently.
Related Tools
HTML Entities Encoder / Decoder
Encode text to HTML entities or decode HTML entities back to plain text.
Open tool
Base64 Encoder & Decoder
Encode or decode Base64 strings instantly.
Open tool
URL Encoder & Decoder
Encode or decode URLs instantly.
Open tool
Random String Generator
Generate random strings easily.
Open tool
JSON Formatter
Format and validate JSON instantly.
Open tool
Remove Extra Spaces
Remove extra spaces from text instantly.
Open tool