Convert any color between HEX, RGB and HSL formats with a single input. Enter a hex code, an rgb() value, or an hsl() value and see all three representations plus a color preview. Perfect for designers and developers who need to switch between color formats.
Enter your values to see the result.
#ff5733 → rgb(255, 87, 51) / hsl(12, 100%, 60%)
A warm orange-red converted from hex to RGB and HSL.
rgb(0, 128, 255) → #0080ff / hsl(210, 100%, 50%)
A bright blue converted from RGB to hex and HSL.
hsl(120, 100, 50) → #00ff00 / rgb(0, 255, 0)
Pure green expressed in all three formats.
Web developers, designers, and digital artists frequently need to switch between color formats. CSS supports HEX, RGB, and HSL natively, and different tools and design systems use different defaults. A color picked in a design tool might give you a HEX value, but your CSS-in-JS library might expect RGB.
This converter eliminates the manual math and lets you see all formats at once.
The most compact format. A six-digit hex code like #ff5733 encodes the red, green, and blue channels as two hexadecimal digits each. The range for each channel is 00 to FF (0 to 255 in decimal). HEX is the default format in most color pickers and design tools.
An additive color model where each channel ranges from 0 to 255. RGB is intuitive for thinking about screen colors because displays literally emit red, green, and blue light. The format rgb(255, 87, 51) means maximum red, moderate green, and low blue.
A more human-friendly representation. Hue is the position on the color wheel (0° = red, 120° = green, 240° = blue). Saturation controls vividness (0% = grayscale, 100% = full color). Lightness controls brightness (0% = black, 50% = pure color, 100% = white).
HSL makes it easy to create color harmonies — for example, rotating the hue by 120° gives you a triadic color scheme.
The tool parses your input to identify the format, extracts the raw color values, then converts to the other two formats using standard algorithms:
All conversions are mathematically exact for integer inputs, with rounding applied only for HSL values.
Web development — Switch between HEX for CSS properties and RGB for canvas operations or JavaScript color manipulation.
Design systems — Document colors in HSL for easier theme adjustments while providing HEX for implementation.
CSS gradients — Use RGB with alpha values for transparent overlays, converting from your design tool's HEX output.
Accessibility — Adjust lightness in HSL to ensure sufficient contrast ratios while maintaining the same hue.
All conversions happen in your browser. No color values are sent to any server. The tool processes input instantly as you type, with no external dependencies.
HEX colors use a six-digit hexadecimal code preceded by a hash sign, like #ff5733. Each pair of digits represents the red, green, and blue components respectively. HEX is the most common format in web design and CSS.
RGB stands for Red, Green, Blue. Each component ranges from 0 to 255. For example, rgb(255, 0, 0) is pure red. This format is intuitive because it directly describes the intensity of each color channel.
HSL stands for Hue, Saturation, Lightness. Hue is the angle on the color wheel (0–360), saturation is the color intensity (0–100%), and lightness controls how light or dark the color is (0–100%). HSL is often more intuitive for humans because you can reason about colors in terms of "what color, how vivid, how bright."
Yes, 3-digit hex codes like #f00 are fully supported by this tool. They are automatically expanded to their 6-digit equivalents by doubling each character, so #f00 becomes #ff0000 (pure red). This is the standard shorthand notation used in CSS and web design, where each digit is repeated to form the full six-digit hex value.
No, all color conversions happen entirely in your browser using client-side JavaScript. No color values are transmitted to any server, stored in any database, or logged anywhere. The tool runs locally on your device and produces results instantly with no network requests, making it safe for proprietary brand colors and design work.
Last updated on 2026-09-26 · Written by UtiliaTools