Color Converter — HEX ↔ RGB ↔ HSL ↔ HSV
Convert colors between HEX, RGB, HSL, and HSV formats instantly. Pick a color or enter a value in any format. See also HEX to RGB and RGB to HEX.
#FF5733
HEX
#FF5733
RGB
rgb(255, 87, 51)
HSL
hsl(11, 100%, 60%)
HSV
hsv(11, 80%, 100%)
Hex Color → RGB Breakdown
Red
255
Green
87
Blue
51
How the Color Converter Works
This tool converts a color value between four widely used color models: HEX, RGB, HSL, and HSV. Enter a color in any format, and the converter instantly displays the equivalent value in all other formats. You can also use the built-in color picker to select a color visually.
Color Models Explained
HEX (Hexadecimal)
A 6-digit hexadecimal code prefixed with #. Each pair of digits represents the Red, Green, and Blue channels (00–FF). Used universally in CSS and HTML. Example: #FF5733.
RGB (Red, Green, Blue)
Specifies color as three integers from 0 to 255 representing the intensity of each primary color channel. Used in CSS (rgb(255, 87, 51)), image editing software, and display hardware.
HSL (Hue, Saturation, Lightness)
Hue is a degree on the color wheel (0–360), Saturation is a percentage (0%–100%), and Lightness is a percentage (0%–100%). HSL is intuitive for designers because adjusting lightness or saturation is straightforward. Used in CSS (hsl(11, 100%, 60%)).
HSV (Hue, Saturation, Value)
Similar to HSL but uses Value (brightness) instead of Lightness. HSV is the model used in most color pickers in design tools like Photoshop and Figma. Hue is 0–360°, Saturation and Value are 0%–100%.
Conversion Formulas
HEX → RGB
R = parseInt(hex[0..1], 16)
G = parseInt(hex[2..3], 16)
B = parseInt(hex[4..5], 16)
RGB → HSL
R' = R/255, G' = G/255, B' = B/255
Cmax = max(R', G', B'), Cmin = min(R', G', B')
L = (Cmax + Cmin) / 2
S = Δ / (1 - |2L - 1|) where Δ = Cmax - Cmin
H = 60° × ((G'-B')/Δ mod 6) when Cmax = R'
RGB → HSV
V = Cmax
S = Δ / Cmax (or 0 if Cmax = 0)
H = same formula as HSL hue calculation
Example Conversion
Input: #FF5733
HEX → RGB: R=255, G=87, B=51 → rgb(255, 87, 51)
RGB → HSL: H=11°, S=100%, L=60% → hsl(11, 100%, 60%)
RGB → HSV: H=11°, S=80%, V=100% → hsv(11, 80%, 100%)
Common Color Reference Table
| Color | HEX | RGB | HSL | Preview |
|---|---|---|---|---|
| Red | #FF0000 | 255, 0, 0 | 0, 100%, 50% | |
| Green | #00FF00 | 0, 255, 0 | 120, 100%, 50% | |
| Blue | #0000FF | 0, 0, 255 | 240, 100%, 50% | |
| Yellow | #FFFF00 | 255, 255, 0 | 60, 100%, 50% | |
| Cyan | #00FFFF | 0, 255, 255 | 180, 100%, 50% | |
| Magenta | #FF00FF | 255, 0, 255 | 300, 100%, 50% | |
| White | #FFFFFF | 255, 255, 255 | 0, 0%, 100% | |
| Black | #000000 | 0, 0, 0 | 0, 0%, 0% | |
| Orange | #FFA500 | 255, 165, 0 | 39, 100%, 50% | |
| Purple | #800080 | 128, 0, 128 | 300, 100%, 25% |
When to Use Each Color Model
- HEX — Best for web development (CSS, HTML). Compact and universally supported.
- RGB — Best for programmatic color manipulation and display hardware. Used in CSS
rgb()andrgba()for transparency. - HSL — Best for designers who want to adjust brightness or saturation intuitively. Supported in CSS3.
- HSV — Best for color pickers in design tools (Photoshop, Figma, GIMP). Not directly supported in CSS.
Technical Details
All four models represent 24-bit color (16,777,216 possible colors). HEX and RGB are mathematically equivalent — HEX is simply the base-16 representation of the same three 8-bit channel values. HSL and HSV are cylindrical-coordinate representations of the RGB color space. HSL separates color information (hue) from luminance, making it easier to create color palettes with consistent brightness. HSV separates color information from brightness (value), which aligns better with how humans perceive color mixing. Modern CSS supports HEX, RGB, HSL, and the newer oklch() and lab() color spaces.
Frequently Asked Questions
What is the difference between HSL and HSV?
HSL uses Lightness (0% = black, 100% = white, 50% = pure color), while HSV uses Value (0% = black, 100% = brightest). In HSV, a fully saturated color at 100% value is the purest version of that hue. In HSL, the purest color is at 50% lightness.
Can I use HSV in CSS?
No, CSS does not natively support HSV. You need to convert HSV to HEX, RGB, or HSL for use in stylesheets. This converter does that for you.
Why does my HEX color look different on different screens?
Color appearance depends on the display's color profile, brightness, and calibration. The same HEX value can look different on an sRGB monitor versus a wide-gamut display. For consistent color, use color management profiles.
What is the shorthand HEX notation?
When each pair of hex digits is identical (e.g., #AABBCC), you can use the 3-digit shorthand #ABC. The browser expands each digit: #ABC becomes #AABBCC.