How to Convert Colours
Web designers and developers constantly work with colours in different formats. CSS supports HEX, RGB, and HSL, and different design tools favour different colour models. This converter lets you enter a colour in any format and instantly see all three representations, along with a live preview swatch.
How to Use This Converter
- Use the colour picker to visually select a colour, or type a HEX code directly into the HEX field.
- Adjust individual RGB values using the R, G, B number inputs. Each value ranges from 0 to 255.
- View all colour formats simultaneously. The HEX, RGB, and HSL values all update together in real time.
- Copy any format using the dedicated Copy buttons at the bottom. The copied value is ready to paste into your CSS or design tool.
How It Works
The converter maintains a single colour state in RGB format. When you change the HEX input, it is parsed into R, G, B components. When you use the colour picker, the selected value is converted to RGB. The HSL values are computed from RGB using the standard conversion algorithm: the hue is determined by which RGB channel is dominant, saturation measures the difference between the brightest and darkest channels, and lightness is the average of the maximum and minimum channel values. All conversions happen instantly in your browser using JavaScript with no server communication.
Frequently Asked Questions
What is a HEX colour code?
A HEX colour code is a six-digit hexadecimal number preceded by a hash symbol, such as #FF5733. The first two digits represent red, the middle two represent green, and the last two represent blue. Each pair ranges from 00 (0) to FF (255).
What is the RGB colour model?
RGB stands for Red, Green, Blue. It is an additive colour model where colours are created by combining red, green, and blue light. Each channel ranges from 0 to 255. For example, rgb(255, 0, 0) is pure red and rgb(0, 0, 0) is black.
What is the HSL colour model?
HSL stands for Hue, Saturation, Lightness. Hue is the colour angle (0-360 degrees on the colour wheel), Saturation is the intensity (0-100%), and Lightness is how light or dark the colour is (0-100%). HSL is often more intuitive for designers than RGB.
How do I convert HEX to RGB?
Split the six-character HEX code into three pairs. Convert each pair from hexadecimal to decimal. For example, #FF5733 becomes R=255, G=87, B=51. Our converter does this automatically as you type.
What is the difference between HEX and RGB?
HEX and RGB represent the same colour information in different formats. HEX uses hexadecimal notation (base 16) while RGB uses decimal values (0-255). HEX is more compact and commonly used in CSS, while RGB is often preferred in design tools.
Can I use the colour picker on mobile?
Yes, most modern mobile browsers support the native colour picker input. Tap the colour swatch to open the picker. You can also type HEX codes or RGB values directly into the input fields on any device.
