Color Converter
Enter a HEX color and instantly get the RGB, HSL, and component values side by side.
How to use this tool
- 1Click the colour swatch on the left to open the native browser colour picker, or type a 6-digit HEX code (e.g. #3b82f6) directly into the HEX input.
- 2The RGB, HSL, RGB object, and HSL object values update instantly below.
- 3Click any value to select it, then copy it to your clipboard.
- 4A colour preview swatch at the bottom confirms the selected colour visually.
About Color Converter
Design tools output HEX codes, CSS expects rgb() or hsl(), and Tailwind config wants object notation — switching between them manually is error-prone. This Color Converter takes a 6-digit HEX value (typed or picked with the native color picker) and simultaneously outputs four representations: the CSS rgb() function string, the CSS hsl() function string, the RGB object notation (r: 59, g: 130, b: 246), and the HSL object notation (h: 217°, s: 91%, l: 60%). The HEX-to-RGB conversion reads each pair of hex digits as a base-16 integer. The RGB-to-HSL conversion uses the standard luminance formula, rounding H to the nearest degree and S/L to the nearest percent. A live colour swatch below the inputs shows the actual colour so you can visually confirm the value. Useful for web developers translating Figma colour tokens into CSS variables, designers checking contrast ratios, and anyone who needs to move a colour between different tools or codebases.
Frequently asked questions
Related Tools
PX to REM Converter
Convert pixel values to REM units (and back) with a configurable root font size.
Length Converter
Convert between mm, cm, m, km, inches, feet, yards, and miles — all values shown at once.
Weight Converter
Convert between mg, g, kg, metric tons, oz, lb, and stone — all values shown at once.