Color converter
Same color. A different format.
- 1Add input
- 2Review and run
- 3Get your result
Tool input and files are processed in this browser without being uploaded.
Before you start
Paste one HEX, RGB(A) or HSL(A) color and copy its equivalent HEX, RGB(A) or HSL(A) value. HEX shorthand and alpha are supported; decimal display values are rounded.
How to use this tool
- Paste content into “HEX / RGB / HSL”, or load the example to try it.
- Check your input, then select “Convert color”.
- Copy the format you need from its result row, or download the complete JSON.
Supported inputs and limits
Pasted text is limited to 1 MiB; review the result before using it.
Worked example
Example input
#f00
Example options
{}Example output
{
"hex": "#ff0000",
"rgb": "rgba(255, 0, 0, 1)",
"hsl": "hsla(0, 100%, 50%, 1)",
"rgba": {
"r": 255,
"g": 0,
"b": 0,
"a": 1
}
}When something does not work
Use the documented input format and keep values within the displayed limits. Review the result before using it in another document or application. Editing the input marks the previous result as stale; a failed run clears it.
Frequently asked questions
Are my files uploaded?
No. Files and tool input are processed in your browser. Moving around the site can keep a temporary workspace in the same tab. Refreshing or closing the tab clears it, so download results you want to keep.
What should I check in this result?
HEX3/4/6/8, RGB(A) and HSL(A) are supported. Alpha stays between 0 and 1; inspect rounded CSS components in the target design.
Documentation & further reading
Related tools
Contrast checker
Check the contrast between text and background colors.
Gradient maker
Find a blend you love. Copy the CSS.
Palette and color mixing
Generate rule-based palettes or compare weighted RGB color mixtures.
CSS shadow and radius
Compose layered shadows with optional individual border-radius values.