zippydevtoolsEncoding
CSS Color Converter
Convert CSS colors between RGB, RGBA, HEX, HEXA, HSL, and HSLA formats.
Process the input to see the result here.
Convert CSS colors between HEX, RGB, RGBA, HSL, and HSLA for design systems, CSS variables, and visual tokens.
When to use
Use it when a color from a layout, Figma file, stylesheet, or design token needs another CSS-compatible format.
Input
Choose the source format and enter a valid color, including alpha when the format supports transparency.
Output
The output lists equivalent CSS formats ready to copy, preserving alpha when provided.
- Select RGB, HEX, or HSL as the input format.
- Paste a matching value such as #336699, rgb(51 102 153), or hsl(210 50% 40%).
- Run conversion and copy the CSS format your project needs.
- Review alpha, contrast, and rounding before applying critical design tokens.
- Design tokens: Convert HEX values to RGB or HSL while creating CSS variables and theme tokens.
- Transparency: Convert RGBA or HSLA while preserving alpha for overlays, hover states, and backgrounds.
- Stylesheet debugging: Read computed CSS colors and convert them into the format used by your project.
- Invalid ranges: RGB must be 0-255; saturation, lightness, and alpha must stay within their valid ranges.
- Rounding: HSL and RGB conversions can round channels, so compare critical design tokens visually.
- Optional alpha: When alpha is omitted, the tool assumes full opacity.
- Contrast is not validated: The converter does not calculate WCAG contrast; validate accessibility separately.
RGB to HEX
Input: rgb(255, 99, 71)
Output: #FF6347
HEX with alpha to RGBA
Input: #FF634780
Output: rgba(255, 99, 71, 0.502)
HSL to RGB
Input: hsl(9, 100%, 64%)
Output: rgb(255, 99, 71)
Which input formats are supported?
You can choose RGB/RGBA, HEX/HEXA, or HSL/HSLA in the format selector.
Does it accept short HEX values?
Yes. Values such as #0FA and #0FA8 are expanded internally to full-length format.
How do I provide alpha/transparency?
Use alpha between 0 and 1, or percentages between 0% and 100%, depending on input style.
When do I get an invalid color error?
When channels are outside valid ranges, such as RGB outside 0-255 or HSL saturation/lightness outside 0-100%.
Is conversion done on a server?
No. All processing happens locally in the browser.
How do I use this tool safely?
Use the tool as a short workflow: review the expected input, run processing, and validate the output: Fields: Input format (select, required); Color value (text, required). Example workflow: rgb(255, 99, 71) -> #FF6347. Enter the requested input, run the tool, and review validation messages or warnings before copying the result.
Which inputs and outputs should I check?
Check this tool's input fields, examples, and output before using the result: Input format (select, required); Color value (text, required). Use the fields, formats, and limits described in the tool interface; review the output before applying it to critical workflows.