Free HEX to RGB Online

You picked a colour in Figma. Now your CSS file wants `rgb(34, 139, 230)` and your Tailwind config wants `#228be6` and your design tokens spec wants `rgba()` with an alpha channel — all the same colour, three different notations. Our free online HEX to RGB converter handles every direction at once: paste a HEX code and see RGB, RGBA, HSL, and HSLA appear instantly; paste an `rgb()` string and the HEX equivalent appears beside it. The colour is shown live in a preview swatch the moment you type, so you can sanity-check it against the design before you copy. Both 6-digit (`#228be6`) and 3-digit shorthand (`#28e`) HEX codes are accepted, with or without the leading `#`. The output panel keeps every notation visible at once with copy-to-clipboard buttons next to each, so whatever your stack expects — vanilla CSS, Tailwind, SCSS, styled-components, Flutter `Color(0xff...)`, Android XML, iOS UIColor — you can grab the right form in one click. Behind the converter is the formula every browser uses internally: split the HEX into three 8-bit channels, combine them with optional alpha, and run the standard HSL transform when needed. Real-world use cases come up daily: matching a brand colour from a PDF style guide that only shows HEX values; converting hand-coded CSS to use the new `oklch()` function; reading a colour out of a screenshot using a colour picker and pasting the result into a config file; debugging why your dark-mode background looks slightly off because someone wrote `#1a1a1a` in one file and `rgb(26, 26, 26)` in another. The HSL output is especially handy because it splits colour into hue, saturation, and lightness — three controls that map onto how humans actually think about colour, which makes it much easier to nudge a tone slightly warmer or slightly darker than fiddling with three RGB sliders. If you also need to build full palettes around a base colour, jump from here to the [Color Palette Generator](/tools/color-palette) to generate complementary, analogous, or triadic schemes. To pick a colour from a screenshot or live design first, the [Color Picker](/tools/color-picker) feeds straight into this converter. And if you are checking whether your final text colour will pass accessibility standards on a chosen background, run both values through the [Contrast Checker](/tools/contrast-checker) afterward. Everything happens in your browser — no upload, no signup, no daily limit.