HEX to RGB Converter
Convert colours between HEX, RGB and HSL with a live preview and copyable CSS values.
Processing: This tool runs entirely in your browser. Your input and any file you open stay on your device — nothing is uploaded to a server.
How to use the hex to rgb converter
- Enter a colour in any of the three notations, or use the picker.
- The other notations update immediately.
- Copy the CSS value you need.
About this tool
The same colour has several notations and each is convenient somewhere different. HEX is compact and dominates design handoffs. RGB maps directly to how a screen mixes light and is easier to adjust programmatically. HSL separates hue from saturation and lightness, which is what you want when building a palette — one hue, several lightness steps.
All three describe the identical colour, so conversion is lossless apart from rounding in HSL. Eight-digit hex adds an alpha channel, which converts to the fourth value in rgba().
Common uses
- Translating a brand hex code into rgba() so you can add transparency.
- Building tints and shades by changing only HSL lightness.
- Reading a colour out of a design file into CSS variables.
Frequently asked questions
- What does the fourth value mean?
- Alpha — opacity from 0 (transparent) to 1. In hex it is the last two digits, so #RRGGBBAA.
- Why do HSL numbers look slightly off after a round trip?
- HSL is stored here with rounded degrees and percentages. Converting back can shift a channel by one, which is invisible on screen.
Related tools
Colour Contrast Checker
Check text and background colours against the WCAG 2.1 contrast requirements for AA and AAA.
CSS Gradient Generator
Build linear and radial CSS gradients visually and copy the generated background property.
Image Compressor
Reduce image file size with an adjustable quality setting and an instant before/after comparison.
Image Resizer
Resize an image to exact pixel dimensions or a percentage, with the aspect ratio locked by default.