Color Converter
Convert colors between HEX, RGB, HSL with live preview
Supports HEX (#ff6600 or #f60), RGB (rgb(255,102,0)), HSL (hsl(24,100%,50%))
About This Tool
Color conversion between HEX, RGB, and HSL formats is a daily task for frontend developers and designers. This free online color converter provides instant, bidirectional conversion with a live color preview so you can see exactly what you're working with.
Use this tool to convert Tailwind CSS colors (like #3b82f6) to RGB for use in Canvas API or SVG filters, generate HSL values for CSS color manipulation, ensure color consistency across different CSS color formats, and preview colors before committing to a design.
The converter supports all standard CSS color formats: HEX with 3 or 6 digits (#f60 or #ff6600), RGB functional notation (rgb(255,102,0)), and HSL (hsl(24,100%,50%)). The live color preview updates instantly as you type.
How to Use
- Paste a color in HEX, RGB or HSL — the format is auto-detected.
- The converted values update live in all three notations.
- Check the preview block to see the color at full size.
- Click any output to copy it in your preferred format.
Tip: Design tokens usually live in HEX, while CSS animation prefers HSL because lightness adjusts independently of hue.
Common Mistakes
1. Short and long HEX confusion
Three-digit HEX is a shorthand that doubles each digit. It covers fewer colors than six-digit notation — expand it before comparing values.
2. Dropping the alpha channel
Eight-digit HEX and the rgba function carry transparency. Converting through a tool that ignores alpha silently makes colors opaque.
3. Mixing HSL units
Hue runs from zero to three sixty degrees, but saturation and lightness are percentages. Feeding raw integers into functions expecting percentages shifts colors unpredictably.
4. Rounding drift
Converting back and forth between notations rounds numbers each time, and the color slowly drifts away from the original. Keep one canonical format as your source of truth.