Color Converter
Three-way color format converter — type in any field and HEX, RGB, and HSL all update instantly. The live preview swatch shows the color as you type. Click Copy next to any field to grab the value for CSS or design tools.
How to Convert Color Formats
Enter any color value to start
Type or paste a color value into any of the three fields — HEX, RGB, or HSL. The other two update as you type without pressing Enter or clicking a button. The preview swatch on the left shows the live result. Click Copy next to any field to copy the formatted value directly to your clipboard, ready to paste into CSS or a design tool.
HEX codes — the CSS standard
HEX colors use six hexadecimal digits prefixed with #, for example #FF5733. Each pair of digits represents a red, green, or blue channel on a scale from 00 (none) to FF (full intensity). Three-digit shorthand like #FFF or #ABC is also accepted and automatically expanded. HEX is the most common format in CSS, HTML attributes, and design tools such as Figma, Sketch, and Adobe XD.
RGB — red, green, blue channel values
RGB specifies the intensity of red, green, and blue light using integers from 0 to 255. The CSS format is rgb(R, G, B), for example rgb(255, 87, 51). This format maps directly to how display hardware renders color and is convenient when passing color values to JavaScript, Canvas 2D drawing APIs, or image-processing code that expects separate channel components.
HSL — hue, saturation, lightness
HSL represents a color as hue (0–360°, the angular position on the color wheel), saturation (0–100%, the vividness of the color), and lightness (0–100%, from pure black through the color to pure white). The CSS format is hsl(H, S%, L%), for example hsl(11, 100%, 60%). HSL is preferred when generating color palettes because adjusting the hue shifts the color family while the overall brightness and saturation stay constant.
FAQ
What color formats does this converter support?
The tool converts between HEX (hexadecimal like #FF5733), RGB (rgb(255, 87, 51)), and HSL (hsl(11, 100%, 60%)). All three fields update simultaneously whenever any one of them changes.
How do I convert a HEX code to RGB?
Paste your HEX code — with or without the # prefix — into the HEX field. The RGB and HSL fields update immediately. Click Copy next to the RGB field to grab the formatted value for use in CSS or JavaScript.
What is the difference between RGB and HSL?
RGB mixes red, green, and blue light (0–255 each), mapping directly to how screens render color. HSL describes the same color as hue (color-wheel position, 0–360°), saturation (vividness, 0–100%), and lightness (brightness, 0–100%). HSL is more intuitive for creating palettes because rotating the hue shifts the color while keeping its overall brightness and richness constant.
Can I enter a short three-digit HEX code?
Yes. Three-digit shorthand is automatically expanded: #FFF becomes #FFFFFF, #ABC becomes #AABBCC, and #000 becomes #000000. Both 3-digit and 6-digit forms are accepted with or without the leading #.
Are my colors uploaded to a server?
No. All conversions run entirely in your browser using JavaScript. No color values, input data, or usage information is sent to any server. The tool works offline once the page is loaded.