Color Picker & Converter

Formats you can paste

#36c  #3366cc               3- and 6-digit hex (4 and 8 digits with alpha also accepted)
rgb(51, 102, 204)          classic comma syntax
rgb(51 102 204 / 50%)      modern CSS syntax, alpha ignored for conversion
hsl(220, 60%, 50%)         hue, saturation, lightness
hsl(220deg 60% 50%)        modern syntax with units

All of these describe the same blue. Transparency (alpha) is accepted in the input and ignored in the result, because HEX, RGB and HSL describe the colour itself; add the alpha back in the format your code uses, such as #3366cc80 or rgb(51 102 204 / 0.5).

How hex colour codes work

A hex colour code is RGB written in base 16. #3366cc is three pairs of hex digits: 33 red (51), 66 green (102) and cc blue (204), each from 00 (0) to ff (255). Three-digit shorthand doubles each digit, so #36c is #3366cc. Upper and lower case mean the same thing.

#ffffff  white          #000000  black          #808080  mid grey
#ff0000  red            #00ff00  green          #0000ff  blue
#ffff00  yellow         #00ffff  cyan           #ff00ff  magenta

An eight-digit code adds transparency: #3366cc80 is the same blue at about 50% opacity, because 80 is 128 out of 255.

RGB and HSL: when to use which

RGB and HEX are the same colours in different notation, and both are what design tools export. HSL describes a colour as a hue angle (0–360°), a saturation and a lightness, which makes adjustments intuitive. The same blue at lower lightness is simply a darker blue:

hsl(220 60% 50%)   #3366cc   base
hsl(220 60% 40%)   #2952a3   hover: darker
hsl(220 60% 90%)   #d6e0f5   background tint

That makes HSL convenient for building hover states, tints and shades from one brand colour. Its weakness is that equal lightness values do not look equally bright across hues, which matters for accessible contrast; modern CSS also offers oklch() for perceptually even palettes.

Picking a colour

The swatch uses your operating system's colour picker. On most desktop browsers it includes an eyedropper for sampling a colour from anywhere on screen, and on phones it opens the system colour selector. The picked colour appears as HEX, RGB and HSL at once, ready to copy.

The native picker only ever returns a six-digit hex code, because that is all an <input type="color"> can hold: no alpha and no HSL. The converter fills in the RGB and HSL values from it.

Using colour codes in CSS

:root {
  --brand: #3366cc;
  --brand-hover: hsl(220 60% 40%);
  --brand-tint: rgb(51 102 204 / 0.12);
}
.button { background: var(--brand); }
.button:hover { background: var(--brand-hover); }

Keep one source value for each brand colour in a custom property and derive variants from it, instead of scattering slightly different hex codes across stylesheets. Six months later, #3366cc, #3467cc and #3366cb in three files are almost always the same intended colour, and nobody can tell which one is right.

Checking colour contrast

A colour that looks fine on its own may be unreadable as text on a particular background. WCAG 2.2 measures this as a contrast ratio between the two colours' relative luminance, from 1:1 (identical) to 21:1 (black on white). Normal body text needs at least 4.5:1, and large text (about 24 px, or 19 px bold) at least 3:1. The stricter AAA level asks for 7:1.

Mid-tone brand colours are the usual problem. #3366cc on white reaches about 5.4:1 and passes for body text; a lighter #6699ff on white is only about 2.8:1 and fails even for large text. When a brand colour fails, keep it for backgrounds, borders and icons, and use a darker shade from the same hue, which HSL makes easy to find, for text and links.

Accuracy and rounding

HEX and RGB convert to each other exactly. HSL is continuous and displayed rounded to whole degrees and percentages, so converting a colour to HSL and back can land one or two units away from the original RGB values, a difference no one can see. Keep the original hex code as your source of truth when exact values matter, for example in brand guidelines.

Frequently asked questions

How do I convert HEX to RGB?

Paste the hex code, for example #3366cc, into the converter and read the RGB value, rgb(51, 102, 204). Each pair of hex digits is one channel from 0 to 255.

How do I pick a colour from my screen?

Click the colour swatch to open your system colour picker. Most desktop browsers include an eyedropper there, which samples a colour from anywhere on screen.

What is a hex colour code?

A six-digit hexadecimal code for a colour, written as #rrggbb, where each pair gives the red, green and blue value from 00 to ff. #ffffff is white and #000000 is black.

What is the difference between RGB and HSL?

They describe the same colours differently. RGB mixes red, green and blue light; HSL uses hue, saturation and lightness, which makes it easier to create lighter or darker versions of a colour.

Can I use modern CSS color syntax?

Yes. The converter accepts rgb(51 102 204), hsl(220 60% 50%) and values with alpha such as rgb(51 102 204 / 50%), as well as the classic comma syntax.

Why does the HSL value change slightly when I convert back?

HSL is shown rounded to whole numbers, so a round trip can shift RGB by one or two units. Keep the original hex code when exact values matter.