Color Converter

Convert colors between HEX, RGBA, and HSLA formats instantly. Includes alpha support and a color picker.

Color Picker

Click to open the color picker, or type values directly below.

HEX

RGB

rgb()

HSL

hsl()

Alpha / Opacity100% · 1

CSS Snippet

color: #6366f1;
color: rgb(99, 102, 241);
color: hsl(239, 84%, 67%);

Colour Formats Explained

Digital colours can be represented in several formats, each suited to different contexts. Knowing when to use each format saves time when working across design tools, CSS, and development environments.

HEX (#RRGGBB) — The most common format in web development. A six-character string where each pair of characters represents the red, green, and blue channels in hexadecimal (0–FF). Compact and universally supported in CSS and design tools.
RGB (red, green, blue) — Expresses each channel as a decimal number from 0 to 255. Easier to reason about programmatically and supports an optional alpha channel (rgba) for transparency.
HSL (hue, saturation, lightness) — Represents colours by their perceptual properties rather than screen values. Hue is a degree on the colour wheel (0–360), saturation is how vivid the colour is (0–100%), and lightness is how bright it is (0–100%). HSL is far more intuitive for creating colour palettes and adjusting shades.
HSB / HSV (hue, saturation, brightness/value) — Similar to HSL but uses brightness instead of lightness. This is the format used by most design tools including Figma, Photoshop, and Sketch. The same hue looks different in HSL vs HSB at the same saturation value.

When to Use Each Format

Use HEX when writing CSS colour values for consistent rendering across browsers — it is the most widely supported and shortest to type. Use RGB or RGBA when you need to manipulate colour values programmatically or apply transparency in CSS. Use HSL for building design systems and generating colour scales, as it is easy to predictably lighten or darken a colour by adjusting only the L value. Use HSB when communicating with design tools or designers who work in Figma or Photoshop.

How to Convert HEX to RGB (and Back)

A HEX code like #3366FF is just RGB written in base 16. Split it into three pairs — 33,66,FF — and convert each from hex to decimal to get rgb(51, 102, 255). To go the other way, convert each channel back to a two-digit hex value. You don't have to do the maths by hand — enter any HEX, RGB, HSL, or HSB value above and the tool shows all formats at once with a live preview.

Frequently Asked Questions

How do I convert a HEX colour to RGB?

Paste the HEX code into the tool and read off the RGB value instantly, or split the code into red, green, and blue pairs and convert each from hexadecimal (00–FF) to decimal (0–255). For example #FF6600 isrgb(255, 102, 0).

Why do HSL and HSB give different results for the same colour?

HSL and HSB use different models. In HSL, a lightness of 50% with full saturation gives a pure vivid colour. In HSB, a brightness of 100% with full saturation also gives a pure vivid colour. But a lightness of 100% in HSL always gives white, while a brightness of 100% in HSB does not — the hue is still visible. They describe the same colour space differently, which is why the numbers differ.

What is the difference between HEX 6-digit and 8-digit?

The 8-digit HEX format (#RRGGBBAA) adds two additional characters for the alpha (opacity) channel, whereFF is fully opaque and 00 is fully transparent. This is supported in all modern browsers but not in some older tools. The standard 6-digit HEX format assumes full opacity.

How do I find the HEX code for a colour on screen?

On Mac, use the built-in Digital Color Meter app (in /Applications/Utilities). On Windows, use PowerToys' Color Picker or the colour picker in Paint. In Chrome DevTools, click any colour swatch in the Styles panel to open a full colour picker with HEX, RGB, and HSL outputs. Browser extensions like ColorZilla also add an eyedropper tool to pick colours from any webpage.

Can I convert CMYK colours here?

CMYK is a print colour space (cyan, magenta, yellow, black) that operates differently from the RGB-based colour models used on screens. This tool converts between screen colour formats (HEX, RGB, HSL, HSB). Converting CMYK to HEX/RGB accurately requires a colour profile and rendering intent because print and screen gamuts do not map 1:1 — this is best done in dedicated design software like Photoshop or Illustrator.