HEX to RGB Color Converter — All Formats in One Place
Convert any hex colour code to RGB, HSL, HSB, and CSS variable format instantly — all live, all in one place. This free colour converter also identifies CSS named colours and generates a tints and shades palette. Everything runs in your browser with no data sent to any server.
How to Use the HEX to RGB Converter
- Type or paste a hex colour code into the text field (e.g.
#6366f1or#fff). - Alternatively, click the colour picker swatch and choose a colour visually.
- All output formats — HEX, short HEX, RGB, HSL, HSB, and CSS variable — update instantly.
- Click Copy next to any format to copy that value to your clipboard.
- Click any chip in the tints or shades palette to load that colour as your new primary.
Key Features
- Live conversion — all six colour formats update in real time as you type or pick.
- HEX shorthand detection — automatically shows the 3-digit shorthand when applicable.
- CSS named colour lookup — identifies any of the 148 official CSS named colours by exact match.
- Tints and shades palette — 5 tints (toward white) and 5 shades (toward black) with clickable chips.
- Per-format copy buttons — copy HEX, RGB, HSL, HSB, or CSS variable with one click.
- 3-digit HEX input — type #fff or #abc and the tool expands it to 6 digits automatically.
- No upload, no account — all conversion happens in your browser; nothing is sent to any server.
Use Cases
Convert HEX Colour Codes to RGB for JavaScript and Canvas
The HTML5 Canvas API and many JavaScript libraries work with RGB values rather than HEX strings. This converter instantly gives you the rgb(r, g, b) values needed to set fill styles, calculate colour blends, or animate opacity transitions in code.
Convert Hex to HSL for CSS Custom Properties
HSL is the most designer-friendly colour model for CSS because it lets you adjust lightness and saturation intuitively. Converting a brand HEX to HSL makes it easy to define a set of CSS custom properties for a consistent design system — lighter variants for backgrounds, darker ones for text.
Find Tints and Shades for a Monochromatic Palette
The tints and shades palette generates five lighter and five darker variants of any colour in one click. Use these chips to quickly build a monochromatic colour scheme for a button set, card hierarchy, or data visualization — without needing a full design tool open.
Verify CSS Named Colour Codes for Development
CSS supports 148 named colours from aliceblue to yellowgreen. This tool checks your hex code against the full list and displays the name if there is an exact match — useful for confirming colour values or substituting a human-readable name in your stylesheets.
Convert Photoshop HSB Colour Values to CSS HSL
Photoshop uses HSB (Hue, Saturation, Brightness) while CSS uses HSL. This converter shows both side by side, making it straightforward to translate colour values from your design tool into CSS without manual calculation.
FAQ's
Both use Hue and Saturation, but differ in the third value. HSL's Lightness ranges from black (0%) through the full colour (50%) to white (100%). HSB's Brightness (Value) ranges from black (0%) to the pure, maximally-saturated colour (100%). HSB is used in Photoshop and Illustrator; HSL is native to CSS.
A 6-digit HEX shortens to 3 digits when each pair of characters is identical: #ffcc00 → #fc0, #ffffff → #fff, #aabbcc → #abc. If any pair differs (e.g. #6366f1), no shorthand is possible. This tool detects and shows the shorthand automatically.
A tint is created by mixing a colour with white, making it lighter. A shade is created by mixing with black, making it darker. The 5-step palette interpolates between the source colour and pure white (for tints) or pure black (for shades), giving you a ready-made monochromatic scale.
This tool checks your HEX code against a built-in table of all 148 official CSS named colours (aliceblue to yellowgreen). If your colour exactly matches a named colour, the name is shown below the swatch. Only exact matches are shown — no nearest-colour guessing.
Yes. Type a 3-digit code like #fff or #abc and the tool automatically expands it to the 6-digit equivalent (#ffffff or #aabbcc) before converting. All outputs update live as you type.
HEX encodes the same Red, Green, Blue values as RGB but in hexadecimal notation. #ff0000 and rgb(255, 0, 0) both represent pure red — they are different representations of the same colour. HEX is more compact; RGB is more readable for programmatic manipulation.
Yes. All conversion logic runs entirely in your browser with JavaScript. Once the page is loaded, you can disconnect from the internet and the tool will continue working. No data is sent to any server.
Enter your brand primary colour and use the tints and shades palette to generate lighter and darker variants. Copy the HSL values for each — HSL is ideal for CSS custom properties because you can programmatically adjust lightness. For example: --color-primary-300: hsl(239, 84%, 78%) for a lighter tint.