Color Format Converter
The color format converter converts any HEX color to RGB, HSL, RGBA, CSS custom property, and Tailwind JIT format instantly. The hex to rgb converter runs in your browser with no server request, paste your HEX code once and all five output formats appear simultaneously. Copy any format individually or export all at once for use across your project.
#3B82F6rgb(59, 130, 246)rgba(59, 130, 246, 1.00)hsl(217, 91%, 60%)hsla(217, 91%, 60%, 1.00)--color: #3B82F6--color-rgb: 59, 130, 246[#3B82F6]HEX, RGB, and HSL: when to use each format
HEX is the most common format in design tooling and is widely supported in HTML and CSS. Hex to rgb conversion is often needed when you require individual channel values, for example, to construct an RGBA value with a custom opacity or to pass color data into a JavaScript calculation. RGB expresses the same color as three integers from 0 to 255 for red, green, and blue channels.
HSL (Hue, Saturation, Lightness) is the most developer-friendly format for programmatic color manipulation. Adjusting only the lightness value in HSL produces predictable tints and shades without shifting the hue. Adjusting saturation creates more vivid or more muted versions of the same hue. The hex to hsl conversion on this tool lets you move between these formats without losing precision.
How to convert a HEX color to a CSS custom property
After entering a HEX value, the tool outputs a ready-to-use CSS custom property declaration formatted as --color-name: #yourvalue. Paste this into the :root block of your global stylesheet to make the color available as a token throughout your entire codebase. Reference it in any CSS rule using the var(--color-name) function.
For RGBA usage with CSS variables, copy the individual RGB channel values from the converter output. Define a separate variable like --color-rgb: 59, 130, 246 and reference it in rgba() as rgba(var(--color-rgb), 0.5). This pattern lets you control opacity dynamically using a single color token without defining multiple semi-transparent variants. The hex color to css variable workflow is common in design systems that need opacity scaling.
Frequently asked questions
HEX represents a color as a six-digit hexadecimal string like #3B82F6. RGB expresses the same value as three integers from 0 to 255 for red, green, and blue channels. HSL describes color using hue as a degree on the color wheel, plus saturation and lightness percentages. HSL is generally easier to adjust programmatically because changing only the lightness value predictably lightens or darkens the color.
Use RGBA when you need the color to be semi-transparent. The fourth value (alpha) in rgba() controls opacity from 0 (fully transparent) to 1 (fully opaque). HEX codes can express transparency using an 8-digit format like #3B82F680, but rgba() has broader support across older environments and is more readable when working with variable opacity.
Enter your HEX value and copy the CSS variable output, which is formatted as --color-name: #3B82F6. Paste it into the :root block of your stylesheet. Reference it anywhere in your CSS using var(--color-name). For RGBA usage with the variable, use the separate RGB channel output and construct it as rgba(var(--color-rgb), 0.5).
HSL stands for Hue, Saturation, and Lightness. Hue is the color angle from 0 to 360 degrees on the color wheel. Saturation controls how vivid or grey the color appears, and Lightness controls how dark or light it is. HSL is useful for programmatically generating color variations because adjusting only the lightness value produces predictable tints and shades without shifting the hue or saturation.