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.
Create beautiful CSS gradients visually and get CSS & Tailwind code instantly.
Open ToolCompress and optimize images online. Reduce file size with adjustable quality, resize, and format conversion.
Open ToolGenerate SEO meta tags with live Google SERP and social media card previews.
Open Tool