Hex ↔ RGB Converter
Convert between hex and RGB colour codes with a live swatch preview.
Enter a hex code like #FF6B52 or RGB values like rgb(255,107,82) and this tool converts between the two formats instantly, showing a live colour swatch so you can see exactly what the colour looks like. It's handy for designers and developers moving colours between CSS, design tools, and image editors.
Why colours need two different formats at all
Hex codes are compact and popular in CSS and design tools because a single six-character string captures a full colour. RGB values are more directly readable — three separate numbers for red, green and blue intensity — which some tools, canvas APIs, and design software prefer to work with directly rather than parsing a hex string. Neither format is 'better'; they're just suited to different tools and workflows, so being able to convert freely between them saves time switching contexts.
How hex actually encodes colour
A hex code like #FF6B52 splits into three pairs: FF, 6B, and 52 — each a two-digit hexadecimal number from 00 to FF (0 to 255 in decimal) representing red, green, and blue intensity respectively. Higher values mean more of that colour channel; #FFFFFF is full white (maximum of all three), and #000000 is black (none of any channel).
Matching a brand colour from a screenshot or logo
A common real-world use is grabbing an exact brand colour from an existing logo or screenshot using the Colour Picker From Image tool, then converting that pixel's RGB value here into a hex code ready to paste into a CSS stylesheet — closing the loop between 'I see a colour I like' and 'I have the exact code for it.'
How to use it
- Type a hex code (e.g. #FF6B52) into the hex field, or
- Type RGB values into the R, G, B fields.
- The other format and the colour swatch update instantly.
- Copy whichever format you need.
Common ways people use this tool
Matching a brand colour in CSS
Convert a brand guideline's RGB value into the hex code needed for a stylesheet, or vice versa.
Checking a colour from a design tool
Convert a colour picked in Photoshop or Figma into the format needed for a different tool that only accepts the other notation.
Verifying a colour visually before using it
Use the live swatch preview to confirm a hex or RGB value actually looks like the colour you expected before committing to it in code.
Tips for getting the best results
- Double-check for a leading '#' — most tools expect it on hex codes, though this converter accepts both with and without it.
- Use the swatch preview as a sanity check — a typo in a hex code can produce a wildly different colour than intended.
- Remember RGB values must stay between 0 and 255 — entering a higher number will be automatically capped.
- For accessibility, check text/background colour combinations for sufficient contrast, not just visual preference.
Frequently asked questions
What hex formats are accepted?
Both 3-digit (#F00) and 6-digit (#FF0000) hex codes work, with or without the leading #.
What RGB range is valid?
Each of R, G, and B must be a whole number from 0 to 255.
Can I convert RGBA or hex with alpha?
This tool focuses on standard RGB/hex without transparency; alpha values aren't currently supported.
Why does 3-digit hex work the same as 6-digit?
A 3-digit hex code like #F00 is shorthand where each digit is duplicated, so #F00 expands to #FF0000 — this tool handles that expansion automatically.
Is there a difference between 'RGB' and 'RGBA'?
RGB defines only colour; RGBA adds a fourth alpha channel controlling transparency, which this tool doesn't currently convert.
Can I use this to check if a colour is web-safe?
This tool doesn't flag web-safe colours specifically, though virtually all modern displays render the full hex/RGB range accurately regardless.
Does the swatch reflect exactly how the colour will look in a browser?
Yes, the swatch is rendered using the same CSS colour value, so it matches how a browser would display that exact colour.
Why do some hex codes look almost identical in the swatch preview?
Colours that differ by only a small amount in one channel (like #FF6B52 versus #FF6B50) can be visually indistinguishable to the human eye at normal viewing size, even though they're technically different hex values.
Can I paste a colour name like 'red' instead of a hex code?
This tool expects a hex or RGB value specifically; for named CSS colours like 'red' or 'cornflowerblue', a browser or CSS reference chart would show the exact hex equivalent to enter here.
Is there a standard hex code for pure black and pure white?
Yes — #000000 represents pure black (zero of all three colour channels) and #FFFFFF represents pure white (maximum of all three channels), the two extremes of the RGB colour space.
Why do designers often avoid using pure black text on a white background?
Pure black on pure white can create a harsh, high-contrast look that some find slightly uncomfortable to read for long stretches, which is why many design systems use a very dark grey instead of true black for body text.
Can I use this tool to check a colour's accessibility contrast ratio?
This version shows the colour values themselves rather than calculating contrast ratios; a dedicated accessibility contrast checker tool would be needed to verify a colour combination meets readability standards.