Color Converter
Convert colors between HEX, RGB, HSL, and HSV.
How to Use the Color Converter
The Color Converter translates colors between four common formats used in web design and digital graphics. Use the color picker wheel to choose any color visually, or type a HEX value directly into the HEX field. All other formats update automatically.
Color Formats Explained
- HEX (#RRGGBB): 6-digit hexadecimal code using pairs for red, green, and blue (0–FF each). Used in HTML/CSS. #FF0000 is red, #000000 is black, #FFFFFF is white.
- RGB (red, green, blue): Three values from 0–255. rgb(255, 0, 0) is red. Used directly in CSS and most design software.
- HSL (hue, saturation, lightness): Hue is 0–360° (color wheel angle), saturation is 0–100% (gray to pure color), lightness is 0–100% (black to white). Intuitive for understanding color relationships.
- HSV (hue, saturation, value/brightness): Similar to HSL but uses "value" (brightness) instead of lightness. Used in many graphics applications including Photoshop.
CSS Color Names
For common colors, the tool displays the CSS color name if one exists (e.g., #FF0000 = "red", #0000FF = "blue"). There are 147 CSS named colors from "aliceblue" to "yellowgreen".
Related Tools
Frequently Asked Questions
What's the difference between HSL and HSV?
Both use Hue (color wheel angle) and Saturation. The difference is the third channel: HSL uses Lightness (0% = black, 50% = pure color, 100% = white), while HSV uses Value/Brightness (0% = black, 100% = pure color at full brightness). HSL is more intuitive for web design; HSV is more common in design software like Photoshop and Illustrator.
Can I enter a 3-digit hex code?
The converter accepts full 6-digit hex codes (#RRGGBB). 3-digit shorthand (#RGB, where each digit is doubled, e.g., #F06 = #FF0066) is valid in CSS but not directly supported in this input. Type the full 6-digit equivalent for 3-digit codes.
Does this support alpha/transparency?
Not currently. The converter handles solid (fully opaque) colors. For RGBA (red, green, blue, alpha) or HSLA values, the alpha channel would need to be added manually to the CSS output. For example, rgb(79, 126, 247) with 50% transparency becomes rgba(79, 126, 247, 0.5) in CSS.
What color format does CSS use?
CSS accepts all four formats: hex (#4F7EF7), rgb(79, 126, 247), hsl(224, 90%, 64%), and named colors (cornflowerblue). Modern CSS also supports oklch() and other color spaces. For browser compatibility, HEX and RGB are the most universally supported. HSL is particularly useful for theme systems because you can easily adjust lightness to create tints and shades.