How to Use
- Enter a color code
Input a color in HEX, RGB, HSL, or CMYK format.
- Convert
Click Convert to see the color translated into all supported formats at once.
- Copy and preview
Click any converted value to copy it. A color swatch preview is shown alongside the results.
What is color code conversion?
Color code conversion means expressing the same color in different notation systems such as HEX, RGB, and HSL. A display screen creates color by mixing the primary colors of light — red, green, and blue — so every color ultimately reduces to the intensity of three RGB channels. HEX compresses these RGB values into a six-digit hexadecimal string (#RRGGBB), while HSL reorganizes them the way humans perceive color, using a hue angle, saturation, and lightness.
Why conversion matters
- Writing CSS — Take a HEX code from a design mockup and convert it to RGB, which makes adjusting opacity easier.
- Color tuning — When you only want to darken a color slightly, converting to HSL lets you adjust just the L value.
- Collaboration — Keep a designer's Figma HEX, a developer's RGB variables, and a print team's color references all in sync.
No matter which format you enter, this converter calculates every other format at once and shows the actual color in a live preview.
Conversion formula
HEX to RGB splits the hexadecimal string into two-digit pairs and reads each as a decimal number.
R = parseInt(hex[0:2], 16), and G and B are computed the same way. Example: #FF5733 → FF=255, 57=87, 33=51 → RGB(255, 87, 51).
RGB to HSL first normalizes each channel to a 0-1 range, then derives lightness.
L = (max + min) / 2S = delta / (2 − max − min) (when L > 0.5)
where delta = max − min. In the example above, max=1 and min=0.2 give L = 0.6 (60%), S = 0.8/0.8 = 100%, and a hue angle of H ≈ 11°, converting to HSL(11°, 100%, 60%).