zippydevtoolsEncoding
CSS Color Converter
Detect and convert CSS colors between RGB, RGBA, HEX, HEXA, HSL, and HSLA, including modern syntax.
- Conversion runs locally and does not send the entered color to a server for processing.
- The tool normalizes HEX, RGB, and HSL only; it does not validate WCAG contrast, named colors, or wide-gamut color spaces.
Process the input to see the result here.
Detect and convert CSS colors between HEX, RGB, RGBA, HSL, and HSLA, including percentage channels, hue units, and modern syntax.
When to use
Use it when a color from a layout, Figma file, stylesheet, or design token needs another CSS-compatible format.
Input
Use automatic detection for complete values beginning with # or a CSS function; select a manual format for prefix-free channel lists.
Output
The output lists equivalent legacy and modern CSS formats ready to copy, preserving alpha when provided.
- Keep automatic mode for values such as #336699, rgb(20% 40% 60%), or hsl(0.5turn 50% 40%).
- Select RGB, HEX, or HSL manually only for a prefix-free channel list.
- 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 or interpret named colors and wide-gamut spaces; validate those properties separately.
RGB percentages to HEX
Input: rgb(100% 38.8% 27.8%)
Output: #FF6347
HEX with alpha to RGBA
Input: #FF634780
Output: rgba(255, 99, 71, 0.502)
HSL hue unit to RGB
Input: hsl(0.025turn 100% 64%)
Output: rgb(255, 99, 71)
Which input formats are supported?
Automatic mode recognizes parenthesized RGB/RGBA and HSL/HSLA functions plus HEX/HEXA beginning with #. Prefix-free channel lists remain available when you choose a format manually.
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.
Can I use percentages and modern CSS units?
Yes. RGB channels accept numbers from 0 to 255 or percentages from 0% to 100%. HSL hue accepts degrees, gradians, radians, and turns with deg, grad, rad, or turn.
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. The input and converted formats remain in your browser; the tool does not send the color value to a server for processing.
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(100% 38.8% 27.8%) -> #FF6347. Enter the requested input, run the tool, and review validation messages or warnings before copying the result.