What the Color Converter Does
Pick a color in any standard format — HEX, RGB, HSL, or HSV — and the Microapp Color Converter shows you the equivalent values in every other format, side by side. Plus a live preview swatch so you can see exactly what color you're working with. All in your browser, instantly.
Designers and developers constantly need to translate between formats: a brand spec uses HEX, your code wants RGB with opacity, a design system tokens HSL, your image editor exports RGBA. Conversions by hand are tedious and error-prone. This is the always-correct version.
How to Use It
- Type or paste a color value into any of the four input fields (HEX, RGB, HSL, HSV).
- The other three fields update instantly with the converted equivalents. The preview swatch shows the actual color.
- Use the picker for visual selection — drag the color square or hue slider, and all four format outputs update in real time.
- Click "Copy" next to any format to put it on your clipboard.
HEX:
#1B6B45RGB:
rgb(27, 107, 69)HSL:
hsl(150, 60%, 26%)HSV:
hsv(150, 75%, 42%)Same color, four formats. Use whichever matches your tool.
The Four Formats Explained
HEX. Six hex characters representing red, green, and blue (two each). #1B6B45 means R=0x1B (27), G=0x6B (107), B=0x45 (69). The most common format for web design — every CSS file is full of HEX. Three-character shortcuts (#1B6) double each character, but they only work for colors with paired hex digits.
RGB. Three integers from 0-255 representing the same red, green, blue. rgb(27, 107, 69) is identical to #1B6B45 — same numbers in decimal. RGB has an alpha variant, RGBA, for partial transparency: rgba(27, 107, 69, 0.5) is half-opaque green.
HSL. Hue (0-360 degrees on a color wheel), Saturation (0-100% of color intensity), Lightness (0-100% from black to white). hsl(150, 60%, 26%) means a green-cyan hue, moderately saturated, fairly dark. HSL is intuitive for designers — you can adjust "make it darker" by lowering Lightness without affecting hue.
HSV. Hue, Saturation, Value (sometimes called HSB). Similar to HSL but Value represents brightness from black-to-pure-color rather than black-to-white. HSV is what most image editors (Photoshop, Figma) use in their color pickers.
When to Use Each Format
| Use this format | When |
|---|---|
| HEX | CSS, design specs, Slack messages, anywhere you need a single short string |
| RGB / RGBA | Programmatic color manipulation, partial transparency, CSS animations interpolating colors |
| HSL / HSLA | Theme generation, color palettes, programmatically lightening/darkening a brand color |
| HSV | Image editors, color pickers, places where "value" maps better to perceived brightness |
The Subtleties Designers Hit
HSL Lightness vs HSV Value — they're NOT the same. Two colors with HSL Lightness 50% can look very different in brightness because Lightness in HSL is the midpoint between black and white. HSV Value 50% means "half as bright as the pure-saturated version." When automating "make it 20% darker," using HSL gives more uniform results across hues than HSV.
Hex is sRGB by default. When you write #1B6B45, the browser interprets it as sRGB. Modern displays often have wider color gamuts (P3, AdobeRGB), and CSS now supports specifying them: color(display-p3 0.106 0.420 0.270). For most web work, stick to sRGB / HEX; for HDR or print-adjacent work, the wider-gamut formats matter.
Alpha (transparency) doesn't apply to HEX. Almost. Modern CSS supports 8-character HEX with alpha as the last 2 characters: #1B6B4580 is the brand green at 50% alpha. Older browsers ignore the alpha bytes. RGBA and HSLA are more universally supported for transparency.
Common Color Pitfalls
Forgetting the # in HEX. CSS requires #1B6B45, not 1B6B45. The Microapp converter accepts both for input but always outputs with the #.
Lowercase vs uppercase HEX. Functionally identical (#1b6b45 = #1B6B45). Most design systems standardize on uppercase for readability; CSS doesn't care.
Rounding errors when converting. Round-tripping HSL → HEX → HSL can produce a slightly different HSL value due to integer rounding (HEX is integers; HSL is floats). The Microapp converter uses high-precision math internally; you should see consistent results, but in code you may see drift over many round trips.
Related Tools
For converting just HEX to RGB, the simpler Hex to RGB tool is faster. To find the named color closest to a HEX value, the Color Name Finder can identify it. To generate a coordinated color palette around a base color, see the Color Palette Generator.