HEX to RGB Converter by Klipto

Convert a HEX color to RGB, HSL, CSS, SwiftUI and UIColor instantly. Free, in your browser, or download Klipto to convert colors on every paste on your Mac.

· Updated
Antony KorsBy

100% in your browser. Nothing is uploaded, logged, or stored.

Split a six-digit hex code into three pairs and read each pair as a base-16 number from 0 to 255. #394DFE is rgb(57, 77, 254), because 39 is 57, 4D is 77 and FE is 254. Hex and RGB are two spellings of the same sRGB color, so nothing shifts in the swap.

Meet Klipto

Convert colors on every paste, not in a browser tab.

Klipto is a native macOS clipboard manager. Copy any HEX and its preview panel offers RGB, HSL, SwiftUI, UIColor, CSS and Tailwind, right where you paste, offline.

See what Klipto does

The formats above

Web notation: rgb(57, 77, 254), rgba(57, 77, 254, 1) and hsl(234, 99%, 61%), where hue is degrees and the other two are percentages.

Normalized channels: 0.224, 0.302, 0.996, each byte divided by 255. SwiftUI wants floats in that range, not bytes.

Apple types: Color(.sRGB, red: 0.224, green: 0.302, blue: 0.996, opacity: 1) for SwiftUI, UIColor(red: 57/255, ...) for UIKit, NSColor(srgbRed: 57/255, ...) for AppKit.

CSS variable and Tailwind: --brand: #394dfe; plus the nearest class in the Tailwind palette.

Shorthand and alpha both work. Three-digit codes expand by doubling each digit, so #39F is #3399FF. Eight-digit codes add a fourth pair for alpha, where the byte is round(opacity x 255) in hex, so half opacity is 80. Hex alpha on a background leaves text and child elements at full opacity, while the CSS opacity property fades those too.

Two traps in the output

NSColor has a separate initializer per color space, and they produce visibly different colors on screen from the same three numbers. deviceRed: is device-dependent and skips ColorSync. srgbRed: pins sRGB, which is what Xcode asset catalogs and design files assume. Pick that one and the paste matches the mockup.

Tailwind has no exact hex lookup. Matchers compute CIEDE2000 perceptual distance against the palette, and anything under 2.0 is indistinguishable to the eye. Tailwind v4 redefined its default palette in oklch() for the P3 gamut in 2025, so treat any hex-to-Tailwind answer as the nearest color rather than the same one.

On a Mac, Klipto reads the format you copied and offers the alternatives in the paste preview, so a hex code, an hsl() string and a Swift initializer all produce the same row.

Frequently asked questions

How do I convert hex to HSL by hand?

Convert to RGB first, then divide each channel by 255. Lightness is `(max + min) / 2`. Saturation is `(max - min) / (max + min)` when L is at most 0.5, and `(max - min) / (2 - max - min)` above that. Hue comes from whichever channel is the max, scaled onto the 360-degree wheel.

What does an eight-digit hex code mean?

The last pair is alpha. `#394DFE80` is the same blue at roughly 50% opacity. Support is universal in modern browsers and absent in older tooling, where `rgba()` is safer.

Why does my pasted NSColor look wrong?

Almost always because the code uses `deviceRed:` instead of `srgbRed:`. The numbers are identical and the rendered color is not.

Related tools & guides

Stop re-copying. Download Klipto for Mac.

Download Klipto
Local · no card, no account · macOS 14+ · 7.5 MB