Free Online Color Converter
Convert any color between HEX, RGB, HSL, and HSV formats. Edit any field and the other three update instantly — a live color swatch shows the result.
Color Format Reference
HEX — #rrggbb
Six hexadecimal digits representing red, green, and blue channels (00–ff each). The native format for CSS colors and design tools. Shorthand #rgb is also supported — #fff expands to #ffffff.
RGB — r, g, b
Three integer values from 0 to 255. Direct representation of the red, green, and blue light intensities mixed to produce the color. The format used by CSS's rgb() function and most graphics APIs.
HSL — h, s%, l%
Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). More intuitive for designers: adjust hue to change the color, saturation to add or remove vibrancy, lightness to make it lighter or darker. Used natively in CSS via hsl().
HSV — h, s%, v%
Hue (0–360°), Saturation (0–100%), and Value/Brightness (0–100%). Used internally by most color picker widgets and image editing software (Photoshop, Figma). Unlike HSL, full saturation at full value always gives a fully vivid color.
Common Use Cases
- CSS development: Copy the exact format your stylesheet expects — HEX,
rgb(), orhsl(). - Design systems: Translate brand colors between the format your design tool exports and what your code requires.
- Accessibility checks: Use HSL to generate lighter/darker variants of a color for sufficient contrast ratios.
- UI development: Convert Figma / Sketch color values to the format needed by your component library or CSS-in-JS solution.
Frequently Asked Questions
Paste or type the HEX value (e.g. #4f46e5) into the HEX field — the RGB, HSL, and HSV fields update instantly, along with a live color swatch, so you never need to look up a conversion formula.
Both describe hue, saturation, and a third channel, but that third channel differs: HSL uses Lightness (0% = black, 100% = white, 50% = the purest color), while HSV uses Value/Brightness (0% = black, 100% = the purest, most vivid color regardless of saturation). HSL is more common in CSS; HSV is more common in color-picker UIs like Photoshop and Figma.
The core HEX/RGB/HSL/HSV conversions here focus on solid color values. For transparency, add an alpha channel manually in CSS — rgba(), hsla(), or an 8-digit HEX (#rrggbbaa) — using the RGB or HSL values this tool gives you as the base.
The # is a required prefix in CSS and most design tools to signal that what follows is a hexadecimal color value rather than a keyword or another type of value. You can paste HEX codes with or without it — the tool handles both.
It's completely free with no limits, and nothing is sent anywhere — all conversion happens instantly in your browser using JavaScript.