HTML Color Picker

What is the HTML Color Picker?

An HTML color picker is a tool that lets you choose a colour and get it in every format a website needs — HEX, RGB, RGBA, HSL and HSLA — with all the fields staying in sync. Pick a shade once, and this free HTML color picker shows you its HEX code, its red-green-blue values, its hue-saturation-lightness values and a ready-to-paste CSS variable, each with its own copy button.

Colours on the web are the same colour written in different languages. A designer hands you #E62F41; a developer needs rgb(230, 47, 65); a stylesheet wants a variable. Converting between them by hand means looking up formulas and doing arithmetic, and a single wrong digit gives you a different colour entirely. This tool does the conversion for you: type a value in any field and every other format updates to match.

It is for anyone who works with colour on the web — beginners learning how colours are written in CSS, designers matching a brand shade, and developers who need a value in a particular format right now. It runs entirely in your browser. There is no sign-up, nothing is uploaded, and the colours you pick never leave your device.

How to use the HTML Color Picker

The tool sits at the top of this page. The colour controls are on the left and the live preview with the format outputs is on the right. Follow these steps:

1. Pick a colour. Click the colour swatch under “Pick a color” and choose any shade from your browser’s colour picker. The tool loads with the site’s crimson, #E62F41, so you can see it working straight away. Or click “Random color” for a surprise.
2. Watch the preview. The large swatch shows your colour with the words “Sample text on your color” on it, so you can see whether text reads well on it. Below it, the same colour appears as text on white — “Your color as text on white” — which shows whether the colour works as a text colour.
3. Set the opacity. Drag the “Opacity” slider from 0 to 100%. Below 100%, the colour becomes see-through, and the HEX + alpha, RGBA and HSLA outputs update to include the transparency. At 100% the colour is fully solid.
4. Type a value in any format. Paste a HEX code into the “HEX” field, type three numbers into the R, G and B boxes, paste an rgb(230, 47, 65) or rgba(230, 47, 65, 0.5) string into the “RGB value” field, or type hue, saturation and lightness into the H°, S% and L% boxes. Every other field updates to match — the picker is also a HEX to RGB converter, and a RGB to HEX converter, in both directions.
5. Copy the format you need. Each of the seven outputs — HEX, HEX + alpha, RGB, RGBA, HSL, HSLA and CSS variable — has its own Copy button. Click it and the value goes to your clipboard.
6. Reuse a colour from history. Every colour you pick is added to the History row as a small swatch. Click one to bring it back. “Reset” restores the default crimson.

Worked example: a brand colour as a CSS variable

Say your brand colour is crimson #E62F41 and you want it as a reusable variable in your stylesheet. The tool already loads with that colour. Look at the “CSS variable” output on the right:

--brand-color: #E62F41;

Click its Copy button and paste it into your stylesheet:

:root {
  --brand-color: #E62F41;
}

.button {
  background: var(--brand-color);
  color: #ffffff;
}

Now every button uses the brand colour, and if the brand colour ever changes you edit one line instead of hunting through the whole stylesheet. If you need the same colour at half opacity for a hover state, drag the Opacity slider to 50% and copy the RGBA output: rgba(230, 47, 65, 0.5).

Where to use the colour formats

HEX for stylesheets and design tools. HEX is the shortest way to write a colour: #E62F41 is six digits after a hash. It is what most design tools show and what most developers type. Use the three-digit shorthand #RGB when each pair repeats — #F00 is the same as #FF0000 — but the tool always writes the full six digits, which is clearer in shared code.

RGB and RGBA for transparency. RGB writes a colour as three numbers from 0 to 255: rgb(230, 47, 65). Add a fourth number for opacity and it becomes RGBA: rgba(230, 47, 65, 0.5) is the same crimson at half opacity. RGBA is the natural choice when you need a see-through colour, because the opacity sits in the value itself rather than in a separate property.

HSL and HSLA for adjusting colours. HSL writes a colour as a hue angle (0 to 360 degrees around the colour wheel), a saturation percentage and a lightness percentage: hsl(354, 79%, 54%). It is the easiest format to adjust by hand — raise the lightness to make a colour paler, lower the saturation to make it greyer — without changing the hue.

Tips for working with colour

Check the sample text before you commit. A colour that looks good as a swatch can be unreadable as a background. The preview shows sample text on your colour for exactly this reason. If the text is hard to read, the colour is too light for white text or too dark for dark text — adjust the lightness, not the hue.

Use the RGB value field to paste colours from anywhere. Design tools, screenshots and other websites give you colours as rgb(...) strings. Paste the whole string — rgb(230, 47, 65) or rgba(230, 47, 65, 0.5) — into the “RGB value” field and the tool converts it to HEX, HSL and a CSS variable. It accepts the three-numbers form too.

Keep the opacity at 100% unless you need transparency. A colour at 90% opacity looks almost identical to the solid colour on a white page, but it will look different on a coloured background because the background shows through. If you do not need transparency, leave the slider at 100% so the colour is exactly the value you see.

Try the screen eyedropper. In browsers that support the EyeDropper API, the “Pick from screen” button lets you click any pixel on your screen — a logo in another tab, a photo, a design mockup — and use that exact colour. If your browser does not support it yet, the tool says so and you can pick the colour with the controls instead.

Frequently asked questions

What is the difference between HEX, RGB and HSL?

They are three ways of writing the same colour. HEX writes it as six hexadecimal digits: #E62F41. RGB writes it as three numbers from 0 to 255: rgb(230, 47, 65). HSL writes it as a hue angle, a saturation percentage and a lightness percentage: hsl(354, 79%, 54%). Every colour can be written in all three formats, and this tool converts between them instantly.

How do I convert HEX to RGB?

Type or paste the HEX code — #E62F41, with or without the hash, in three-digit or six-digit form — into the “HEX” field. The RGB output updates to rgb(230, 47, 65). It works the other way too: type three numbers into the R, G and B boxes and the HEX field updates. The tool also accepts #RGBA and #RRGGBBAA forms, which include an alpha channel.

What is the alpha in HEX + alpha, RGBA and HSLA?

Alpha is opacity, from 0 (fully transparent) to 1 (fully solid). In RGBA it is the fourth number: rgba(230, 47, 65, 0.5) is crimson at half opacity. In HEX + alpha it is an extra pair of digits at the end. The Opacity slider sets the alpha for all three formats at once, and at 100% the tool writes the plain HEX, RGB and HSL forms without an alpha.

Can I pick a colour from my screen?

Yes, if your browser supports the EyeDropper API. Click “Pick from screen”, then click any pixel on your screen and that exact colour loads into the tool. Chrome and Edge support it; if your browser does not, the tool shows a note and you can use the colour controls instead.

Is my colour sent anywhere?

No. The tool runs entirely in your browser. Nothing you pick, type or paste is sent to a server or stored. There is no account and no history beyond the swatches shown on the page, which disappear when you leave.

Conclusion

One colour, seven formats, no arithmetic: pick a shade above with the HTML Color Picker and copy it in the format your code needs. If you want to build a whole set of colours that work together, the Color Palette Generator on this site takes a starting colour and builds complementary, analogous and triadic palettes from it — each one ready to copy as CSS variables.

Related Tools

• Color Palette Generator
• WCAG Color Contrast Checker
• CSS Animation Generator
• CSS Border Radius Generator