Color Converter
Pattern ToolsConvert between HEX, RGB, and HSL color formats
rgb(109, 40, 217)
hsl(263, 70%, 50%)
CSS Values
color: #6d28d9;
color: rgb(109, 40, 217);
color: hsl(263, 70%, 50%);
About Color Converter
Converts color values between HEX, RGB, and HSL formats with a live preview swatch that updates as you type. All three output formats are shown simultaneously so you can copy whichever one your code needs. The three formats represent the same color but are used in different contexts. HEX (#FF5733) is the most compact and is what browser DevTools display when you inspect elements. RGB (255, 87, 51) maps directly to screen hardware — red, green, and blue channels each on a 0-255 scale. HSL (12, 100%, 60%) is the most human-intuitive: hue as a degree on the color wheel, saturation as a percentage of grayness, lightness as a percentage from black to white. HSL is especially useful when you need to programmatically create lighter or darker variants of a color by adjusting only the L value. A common workflow: you have a HEX color from a design file and need the HSL version to use in a CSS custom property for theme color manipulation. Or you have an RGB value from an image picker and need HEX to write it in Tailwind config. The color picker input (native browser color chooser) lets you visually select any color without knowing its code in advance.
How to Use Color Converter Online
- Paste your data into the input field above
- The result appears instantly in the output area
- Click "Copy" to copy the result to your clipboard
Convert between HEX, RGB, and HSL color formats. Runs 100% client-side — no data is sent to any server.