HTML colour codes — HEX, RGB, HSL and alpha for any colour

How to use the HTML colour code generator

1. Choose a colour with the Colour picker or type its hex code.
2. Move the Opacity slider (0–100%) if you need transparency.
3. Read the Colour codes table and copy the format you need.
4. Copy the Snippets for CSS rules, a CSS custom property and inline HTML styles.

What it does and when to use it

Design files give you a hex code. CSS, SVG, email templates and canvas code may need a different notation, and transparency always needs one of the alpha formats. This tool converts one colour into all of them at once:

The swatches show the solid colour and, when opacity is below 100%, the transparent version. For picking colours from an image or building a palette, use the Color Picker.

How it works

The hex code is split into red, green and blue values from 0 to 255; a 3-digit code such as #fff is first expanded to #ffffff. HSL is calculated from those values: lightness is the average of the largest and smallest channel, saturation depends on the gap between them, and the hue is the angle on the colour wheel. The opacity percentage becomes a decimal (75% → 0.75) for RGBA and HSLA, and a 0–255 value written as two hex digits for 8-digit HEX. The calculation runs in your browser.

Worked examples

A blue at 75% opacity. #1e40af gives rgb(30, 64, 175), hsl(226, 71%, 40%) and rgba(30, 64, 175, 0.75). Because the opacity is below 100%, the snippets use the RGBA value and keep the solid hex for the border:

.badge { background-color: rgba(30, 64, 175, 0.75); border: 1px solid #1e40af; }

Short hex. #fff is read as #ffffff: rgb(255, 255, 255) and hsl(0, 0%, 100%). Greys always have a saturation of 0%.

A colour name. Typing blue returns “Enter a hex colour such as #34d399.”

Limits and tips

• Transparency mixes with whatever is behind the element, so the colour you see depends on the background.
• Check that text colours have enough contrast with their background before you publish.
• To put a colour into a styled button, the HTML Button Generator takes an accent colour. To write characters such as © in HTML, see the HTML Character Entity Finder.