ColorKitFree hex to rgb converter
HEX to RGB, byte by byte
This hex to RGB converter is free and needs no signup: drop in a hex code and the red, green and blue channels appear as 0-255 bytes, as percentages and as the 0-1 floats a SwiftUI or Compose color takes. All four legal digit counts go in — the three-digit shorthand, the plain six digits, and the four- and eight-digit forms that end in an alpha pair — with or without the leading #. A second box converts a pasted column of up to 200 codes at once and marks any line that is not a color instead of dropping it.
- 100% free
- No signup
- 3, 4, 6 and 8 digits
- 200 codes per batch
- 0-1 floats for Swift
Six digits, one byte per channel.
Press Ctrl+V anywhere on the page to drop in a hex code — no need to click the field first.
- CSS legacy
- CSS Color 4
- Channels only
Each pair, in the four scales it gets asked for
| Channel | Pair | 0-255 | Percent | 0-1 |
|---|---|---|---|---|
| Red | 4f | 79 | 31.0% | 0.3098 |
| Green | 46 | 70 | 27.5% | 0.2745 |
| Blue | e5 | 229 | 89.8% | 0.8980 |
The 0-1 column is the one UIColor, Compose and Figma plugin APIs want; the percent column is what CSS accepts inside rgb().
Paste up to 200 codes separated by newlines, commas or spaces. Anything that is not a color is listed too, so a dropped digit does not vanish from the output.
Output appears here line for line.
How to convert a hex code to RGB
From a code in a comp to the three numbers a stylesheet, a Swift view or a canvas call needs.
Drop the code into the field
Type it or paste it — the leading # is optional and the letters may be upper or lower case, so a value copied out of a Figma inspector, a Sass variable or an annotated screenshot goes in unedited. Shorthand is expanded in front of you rather than behind your back: enter #0af and the field reports #00aaff, since each digit is doubled. A five- or seven-digit string is refused with the digit count named, because guessing which character went missing would be worse than saying so.
Read the channel in the scale you need
The table gives every pair four ways: the two hex digits, the byte from 0 to 255, the percentage to one decimal, and the 0-1 float to four. CSS takes the first three inside rgb(); SwiftUI's Color, Jetpack Compose and most Figma plugin APIs take the last one. Add an eight-digit code and an alpha row joins the table with its own byte.
Convert the rest of the file
Paste a whole column into the batch box — up to 200 codes split on newlines, commas or spaces — and each one comes back as an rgb() string next to the code it came from. Tokens that are not colors stay in the output marked as rejected, so a typo in a 60-line design-token export is visible instead of silently missing, and Copy all takes the finished list.
Technical specifications
| Digit counts accepted | 3, 4, 6 and 8, with or without the leading #; 5 and 7 digits are rejected with the count named rather than guessed at |
|---|---|
| Shorthand expansion | Every digit doubled — #0af becomes #00aaff, never #0a0f0f, and #fffa becomes #ffffffaa |
| Scales per channel | Four: the hex pair, the 0-255 byte, the percentage to 1 decimal, and the 0-1 float to 4 decimals |
| Alpha row | Appears for 4- and 8-digit codes; #4f46e5cc reports an alpha byte of 204, and the shorthand #0af8 doubles its last digit to 136 |
| Letter case | A-F and a-f both parse; output digits are lowercase, as Prettier prints CSS hex |
| Named colors | All 148 CSS keywords resolve — rebeccapurple returns 102, 51, 153 and transparent returns an alpha of 0 |
| Batch box | 200 codes per run, split on newlines, commas or spaces; rejected tokens hold their place in the output |
| Requests after the page loads | None — a 200-code batch is parsed by a loop in this tab and costs no round trip |
Frequently asked questions
Is #0af the same color as #00aaff?
Yes, exactly the same — the shorthand doubles each digit, it does not pad with zeros. So #0af is #00aaff and never #0a0f0f, and the same rule turns #fff into #ffffff. A three-digit code can only describe a color whose pairs are both-digits-equal, which is why the shorthand exists for #ffcc00 but not for #ffcc01.
What do the last two digits of an eight-digit hex code mean?
They are the alpha channel, written as a byte from 00 to ff just like the color channels. Divide the pair by 255 to get the CSS alpha: 99 is 153, which is 0.6, not 0.99 — the resemblance between the hex pair and a percentage is a coincidence that catches people out roughly once each. A four-digit code works the same way with the shorthand doubling applied to the alpha digit too.
Why will a five-character hex code not convert?
Because only 3, 4, 6 and 8 digits are legal, and nothing sensible can be done with 5. The usual cause is a dropped character during hand-copying, and #12345 could just as reasonably have been #112345 or #123450 — a converter that picks one silently hands you the wrong color, so this one names the digit count instead and lets you look again.
How do I get the 0-1 values SwiftUI or Jetpack Compose expects?
Divide each byte by 255, which is what the 0-1 column already shows. Four decimal places is more than enough precision: with only 256 possible values per channel the gaps are 0.0039 apart, so anything beyond the fourth decimal is describing a color your display cannot produce. Those APIs also want the alpha as a 0-1 float, and an eight-digit code supplies it in the same column.
Does converting hex to RGB lose anything?
Nothing at all — the two notations hold the identical three bytes and the conversion is reversible without drift. Hex is base 16 and rgb() is base 10, and both describe the same sRGB triple, so a round trip through this page and back returns the code you started with. Precision is only ever lost when a color moves to a model with a different shape, such as HSL rounding or a CMYK separation.
Can I convert a column of hex codes from a design token file?
Yes — the batch box takes 200 at a time and splits on newlines, commas or spaces, so a pasted JSON value list or a column out of a spreadsheet works without cleanup. The loop runs inside this tab, which matters when the token file belongs to a client project: 200 codes are converted without a single network request. Rejected tokens keep their position in the output so you can match the list back to the source.
Do CSS color names work in this field?
All 148 CSS keywords resolve, so typing rebeccapurple returns 102, 51, 153. That is worth knowing in reverse too: if the code you were given happens to be one of the named colors, the name is often more readable in a stylesheet than the digits. Anything outside the keyword list and the four hex forms is rejected rather than approximated.
About hex codes and the bytes behind them
CSS has accepted #rrggbb and its three-digit shorthand since CSS1 in 1996; the four- and eight-digit forms carrying alpha are a later addition from CSS Color Module Level 4. Nothing about a hex code makes it a different kind of color from rgb() — it is the same three bytes written in base 16 — but the notation has two rules that trip people, and both of them are about counting. Shorthand expands by doubling each digit rather than padding, and a code is only valid at 3, 4, 6 or 8 digits. Converters that quietly accept five and return black are common enough that a wrong color in a build is worth suspecting before a wrong eye.
Which scale you want depends entirely on where the number is going. A stylesheet takes bytes or percentages inside rgb(), though the legacy comma form will not let you mix 255 with 50% in one function while the space-separated form will. Native UI toolkits want 0-1 floats. A canvas or a shader often wants neither and would rather have the whole color as one integer. If you are browsing for a code rather than converting one, the hex color codes chart lists the ones worth memorising, and the color wheel is the better starting point when nothing has been chosen yet.
The direction you are converting in says something about what happens next. Reading a hex code into channels is usually the first step of an edit — and channels are a poor place to edit, because making a color 20% lighter by scaling red, green and blue also drags its hue, which is the argument for converting the code to HSL instead. Going the other way, from channel numbers you already hold to a code you can paste, RGB to HEX shows the byte arithmetic as it happens, and when the value carries transparency the eight-digit question belongs to RGBA to HEX, which also flattens it against a background.
Where the codes you paste are read
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
The batch box deserves the specific version of that: a 200-line token list is parsed by a loop in this tab, held in React state and nothing else, so reloading the page empties it and no copy of your palette exists anywhere afterwards.