Color Formats, Quick Facts
- •HEX colors use 6 hexadecimal digits (2 each for red, green, blue), e.g.
#2563eb. A 3-digit shorthand like#25eexpands each digit, e.g.#2255ee. - •RGB expresses color as three 0-255 values for red, green, and blue light mixed together, e.g.
rgb(37, 99, 235). - •HSL, hue/saturation/lightness, is often more intuitive for humans: hue is a position on the color wheel (0-360°), saturation is intensity, lightness is how close to black or white.
- •All three formats represent the exact same color; converting between them never changes what you see, only how it's written.
The Real Problem This Solves
A designer hands you a HEX code, your CSS-in-JS library wants RGB, and you want to tweak just the lightness without hunting for a completely different hex value. Doing this math by hand is slow and error-prone.
This tool keeps all three formats in sync live, drag any slider or paste any value and watch the others update instantly.
How the Conversion Works
HEX and RGB are two representations of the same three numbers, HEX just writes each 0-255 channel value in base 16 instead of base 10. HSL is a genuine transformation: it finds the maximum and minimum of the red, green, and blue values to compute lightness and saturation, then determines hue from which channel is dominant.
Example: #2563eb is rgb(37, 99, 235). Blue is the dominant channel, and pushing it through the HSL formula gives hsl(221, 83%, 53%), a vivid, moderately dark blue.
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Red | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Green | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| White | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
Frequently Asked Questions
Why does my color look slightly different after converting?
It shouldn't. HEX, RGB, and HSL are mathematically exact conversions of the same color with no loss. If a value looks off, check for rounding in the last digit; HSL percentages and degrees are rounded to whole numbers for readability, which can shift the reconstructed RGB by 1 out of 255, invisible to the eye.
What is the difference between HSL and HSB/HSV?
They're closely related but not identical. HSL's "lightness" reaches pure white at 100% regardless of saturation, while HSV/HSB's "brightness" behaves differently, pure white only appears at 100% brightness and 0% saturation. This tool uses HSL, the format supported natively in CSS.
Can I paste a 3-digit hex code?
Yes, shorthand hex like #f00 (red) is automatically expanded to the full #ff0000 form.
Why would I use HSL instead of HEX in my CSS?
HSL makes it easy to create color variations by eye, keep the hue and saturation fixed and just change lightness to get a palette of shades, without needing a color picker or design tool.
Does this support alpha/transparency?
Not currently. This tool converts solid HEX, RGB, and HSL colors; for transparency, add an alpha value to the CSS output manually, for example rgba() or hsla() with a 4th value from 0 to 1.
Need placeholder text to go with your palette?
Mocking up a design with this color scheme? Fill in the layout with realistic placeholder text from our Lorem Ipsum Generator.
Open Lorem Ipsum Generator →