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.
CSS gradient generator with Tailwind output. Design linear and radial gradients visually, then copy production-ready CSS or Tailwind classes.
Open ToolFree online image compressor with no upload limit. Reduce file size with adjustable quality, resize and format conversion. Images never leave your device.
Open ToolOnline SEO meta tag generator with live Google SERP and social media card previews. Outputs ready-to-paste HTML and Open Graph tags.
Open Tool