HEX to RGB Converter

Convert a colour between HEX, RGB and HSL in either direction, and get the exact snippet for CSS, Tailwind or SwiftUI ready to paste — because the conversion itself is one line of code, and the part that actually saves time is the export format for wherever you’re pasting it.

How to use it

1. Type a HEX code, or enter values directly into the RGB or HSL fields.
2. All three formats update together, whichever one you last edited.
3. Scroll to the export section for CSS, Tailwind and SwiftUI snippets, each with its own copy button.

Why this tool exists alongside a plain colour picker

The HEX-to-RGB conversion itself is trivial — split the hex string into three byte pairs, parse each as base-16. Any calculator can do that math in one line. What actually costs time is the three or four places a developer pastes a colour value into code, each of which wants a different syntax:

• CSS wants either the hex literal or a function call: rgb(37 99 235) or hsl(217 91% 60%).
• Tailwind wants an arbitrary-value bracket: bg-[#2563eb], because the value isn’t in the default token palette.
• Swift’s UIColor wants floats from 0 to 1, not bytes from 0 to 255 — UIColor(red: 0.145, green: 0.388, blue: 0.922, alpha: 1.0).

Doing that conversion by hand, especially the Swift float division, is a place small arithmetic mistakes creep in. This tool does the conversion once and formats it correctly for all three destinations at once.

The float conversion that trips people up

Swift’s UIColor(red:green:blue:alpha:) initialiser expects each channel as a CGFloat between 0 and 1, inclusive — not the 0-255 byte range that CSS, most design tools, and virtually every other colour picker use. Converting rgb(37, 99, 235) to Swift means dividing each channel by 255: 37/255 = 0.145, 99/255 = 0.388, 235/255 = 0.922. Get the division backwards or skip it entirely and you get either a colour that renders as solid white (values clamped above 1) or an error, depending on the Swift version. This tool performs that division automatically and rounds to three decimal places, which is precise enough for any practical UI colour.

What it does not do

It converts standard 6-digit HEX only — 3-digit shorthand and 8-digit alpha-channel HEX are not parsed. It has no palette or harmony features; for that, see the Color Palette Generator. It does not validate that a Tailwind class name is syntactically legal beyond the bracket format — Tailwind’s own JIT compiler is the actual source of truth for whether a given arbitrary value compiles.

Conversion reference

HEX	RGB	HSL
#2563eb	37, 99, 235	217°, 91%, 60%
#dc2626	220, 38, 38	0°, 71%, 51%
#16a34a	22, 163, 74	142°, 76%, 36%
#ca8a04	202, 138, 4	41°, 96%, 40%
#9333ea	147, 51, 234	271°, 81%, 56%

Export syntax by destination

Destination	Syntax pattern
CSS (space-separated)	rgb(37 99 235)
CSS (comma, legacy)	rgb(37, 99, 235)
Tailwind arbitrary value	bg-[#2563eb]
SwiftUI / UIKit	UIColor(red: 0.145, green: 0.388, blue: 0.922, alpha: 1.0)
Android XML	#FF2563EB (with alpha prefix)