How to use this calculator
What the two notations mean
Hex and rgb() are two spellings of the same thing: three channel values that say how much red, green, and blue a color mixes. A hex code like #3498db is the three channels written in base 16 — the pairs 34, 98, db — while rgb(52, 152, 219) writes the same numbers in decimal. The converter is pure arithmetic on those channels: each hex pair is parsed with parseInt(·, 16) and each decimal channel is converted back to two base-16 digits, so the two forms are always exact, never approximated.
That is the tool’s entire job, and it is why the conversion is instant and lossless: #3498db is rgb(52, 152, 219), and rgb(52, 152, 219) is #3498db, with nothing lost in either direction. The hex form is the compact notation style guides and design systems use; the rgb() form is what many charting libraries, canvas APIs, and older CSS code expect.
The input forms that just work
Values copied out of a browser inspector, a design tool, or a mockup arrive in different shapes, and the converter accepts them as pasted: a 6-digit code, a 3-digit shorthand like #fff (which expands to #ffffff, matching CSS behavior), an optional leading #, uppercase or lowercase digits, and even the full function syntax rgb(52, 152, 219) or a bare triplet 52, 152, 219. Output is always normalized to the unambiguous 6-digit lowercase hex form, so the result never carries the ambiguity of shorthand.
Validation is strict about what a color can be: hex digits must be valid hex, and each RGB channel must be an integer from 0 to 255. A triplet with a channel of 300 is rejected with a clear message rather than silently clamped — CSS clamps out-of-range values, but a conversion tool should not invent a color the input did not describe.
Why the precedence rule exists
When both fields are filled, the hex value wins and converts to RGB; the rgb field is ignored. The rule is documented rather than guessed because a converter that silently picked a side would produce a result that disagreed with what the user intended to change. The behavior is predictable: edit the field you want to be authoritative, and the other side updates to match.
The same predictability applies to case and formatting: hex output is always lowercase because hex digits are case-insensitive and lowercase is the convention most tooling and minifiers use, and shorthand input always expands to the full form so the result is unambiguous.
The honest limits
The converter handles three-channel colors only: 4- and 8-digit hex (#rgba, #rrggbbaa) and rgba() carry an alpha channel this tool does not parse, and named CSS colors (red, blue, rebeccapurple) are not accepted — convert those by looking up their hex or rgb form first. For colors with transparency, convert the 6-digit base color here and keep the alpha separately. And as with everything on the site, the conversion runs entirely in your browser: no value you enter is uploaded, logged, or stored.
Frequently asked questions
What is the difference between 3-digit and 6-digit hex?
A 3-digit code like #fff is CSS shorthand: each digit doubles, so #fff means #ffffff. It is supported by every modern browser. The converter accepts both and always outputs the full 6-digit form, so the result is unambiguous.
Do you handle alpha (transparency) values?
Not yet. 8-digit hex (#rrggbbaa) and rgba() carry a transparency channel that this converter does not parse. For colors with alpha, convert the 6-digit base color here and keep the alpha separately.
Why is the hex output lowercase?
Hex digits are case-insensitive — #3498db and #3498DB are the same color. Lowercase is the convention used by most modern tooling and minifiers, and it keeps the output consistent for copy-paste.
What happens if I fill in both the hex and RGB fields?
The hex value wins and converts to RGB; the RGB field is ignored. The tool documents this precedence rather than guessing, so the result is always predictable.
Why is #fff the same color as #ffffff?
CSS 3-digit shorthand doubles each digit: #fff means #ff ff ff, which is exactly #ffffff. The converter accepts both and always outputs the expanded 6-digit form, so the result is unambiguous.
Is 300, 0, 0 ever a valid color?
No — each channel must be an integer from 0 to 255. CSS clamps out-of-range values silently; this converter rejects them with an error instead, because converting a value that was not a color would produce a misleading result.