How hex becomes RGB
Three steps, and no rounding until the end.
Split into pairs: six hex digits hold three bytes, one per channel. #394DFE gives 39, 4D and FE for red, green and blue.
Read each pair in base 16: digits run 0-9 then A-F, where A is 10 and F is 15. Each pair covers 0 to 255. 39 is (3 x 16) + 9 = 57. 4D is (4 x 16) + 13 = 77. FE is (15 x 16) + 14 = 254.
Assemble: rgb(57, 77, 254).
Shorthand codes use three digits, and you expand them by doubling each one. #39F becomes #3399FF, which reads as rgb(51, 153, 255).
Eight-digit codes add a fourth pair for alpha, #RRGGBBAA. The alpha byte is round(opacity x 255) in hex, so half opacity is 128, written 80. One difference worth knowing: hex alpha on a background color leaves the element's text and child elements at full opacity, while the CSS opacity property fades them too.
Every format from one hex code
Klipto reads the format you copied, so a hex code, an hsl() string and a Swift initializer all produce the same row of alternatives. Detection happens at copy time. A color sitting inside a longer sentence is left alone, because the value has to be the thing you copied.
The set of output formats is fixed at nine on purpose. Nine covers CSS, Swift and Tailwind work. A dropdown of forty color spaces takes longer to operate than typing the number by hand.
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, green: 77/255, blue: 254/255, alpha: 1) for UIKit, and NSColor(srgbRed: 57/255, green: 77/255, blue: 254/255, alpha: 1) for AppKit.
CSS variable and Tailwind: --brand: #394dfe;, read back through var(--brand), plus the nearest class in the Tailwind palette.
Two of those hide a trap. NSColor has separate initializers 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 the sRGB one and the paste matches the mockup.
Tailwind has no exact hex lookup. Matchers compute CIEDE2000 (ΔE00) perceptual distance against the palette, and a ΔE under 2.0 is indistinguishable to the eye. Tailwind v4 also 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.
Hex to HSL
HSL takes more work, because it is not a direct byte read. Convert to RGB first, then divide each channel by 255. For #3498DB that is 52, 152, 219, which become 0.20, 0.60, 0.86.
Take the max and min of those three. Lightness is (max + min) / 2, about 0.53 here. Saturation is 0 when max equals min, (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 0-360 degree wheel.
Using the converter
1. Paste or type a hex code above. Three, six and eight digits all work, with or without the #.
2. Read the RGB, RGBA and HSL values, or scroll to the developer formats.
3. Copy the line you need. Everything runs in your browser, so no code is uploaded.
This free tool vs Klipto
| This free web tool | Klipto | |
|---|---|---|
| RGB, RGBA, HSL | Yes, one code at a time | Yes, on the paste |
| SwiftUI, UIColor, NSColor | Yes | Yes |
| CSS variable and Tailwind class | Yes | Yes |
| Detects a color when you copy it | No, you paste it in | Yes |
| Works in Xcode, VS Code, Figma, Slack | This page only | Anywhere you copy |
| Needs a browser tab | Yes | No |
| Clipboard history and other transforms | No | Yes, 20-plus transforms |
| Platform | Any browser | macOS 14+ |
| Price | Free | Free tier, $19.99 one-time |
For one value a month, a browser tab is fine and I would not install anything for it. The tab stops being fine at ten colors a day, when the copy-open-paste-copy-return loop is most of the work. You can get it automatically on every paste with Klipto instead: it detects the color as you copy it, offline, and puts the other eight formats in the paste preview.