Convert colors between HEX, RGB, and HSL formats with live preview and CSS output.
Pick a color
Type any color in HEX (#FF0000), RGB (rgb(255, 0, 0)), or HSL (hsl(0, 100%, 50%)) format. Or use the color picker.
The tool instantly shows your color in HEX, RGB, and HSL formats along with CSS variable and Tailwind class output.
Click the Copy button next to any format to copy it to your clipboard.
HEX (#RGB, #RRGGBB), RGB (rgb(R, G, B)), and HSL (hsl(H, S%, L%)). You can also enter plain comma-separated RGB values like '255, 0, 0'.
HSL stands for Hue, Saturation, Lightness. It's a more intuitive color model where Hue is the color angle (0-360°), Saturation is the intensity (0-100%), and Lightness is how light or dark (0-100%).
The Tailwind output gives you an arbitrary value class like bg-[#E91E8C] that you can use directly in your Tailwind CSS projects for custom colors.
Yes. The color picker uses your browser's native color input, which provides accurate HEX color values that we then convert to all other formats.
Rounding hue and saturation to whole numbers shifts the colour slightly. Keeping one decimal means the HSL you copy converts back to exactly the same HEX.
Yes. Three and six digit hex both work, and four and eight digit hex are read as hex with an alpha channel.
It produces the RGBA value. Alpha is opacity, where 1 is fully solid and 0 is fully transparent.
HEX for fixed brand colours, HSL when you want to build lighter and darker variants by changing one number, and RGBA when you need transparency.
Check any colour pair against WCAG AA and AAA, and get a suggested fix when it fails.
Open ToolTurn one hex value into a full 50 to 950 scale for Tailwind v4, v3 or CSS variables.
Open ToolPull the dominant colours out of an image with hex, HSL and the share of each.
Open Tool