What colour formats does the picker support?

The tool shows and converts Hex, RGB, HSL, RGBA, HSLA, and Hex8 (with alpha). You can type into any field and the others update automatically.

How do I adjust transparency (alpha)?

Use the Alpha slider (0–100%). As you change alpha, RGBA, HSLA, and Hex8 outputs update in real time.

Can I pick a colour from anywhere on my screen?

Yes. Click Eyedropper to sample any on-screen colour (supported browsers only). The picker then converts it to Hex, RGB, HSL, RGBA/HSLA, and Hex8.

Does it check WCAG contrast?

Yes. Enter a foreground and background colour to see the contrast ratio and pass/fail badges for WCAG AA/AAA (normal and large text).

Can I save or reuse colours?

Yes. The tool keeps a Recents list automatically and lets you star Favourites. These are stored locally in your browser.

What copy options are available?

Copy individual values (Hex, RGB, HSL, RGBA, HSLA, Hex8) or copy bundles like CSS variables and Tailwind-ready tokens in one click.

Does the tool work offline and is it private?

Yes. After the first load, everything runs 100% client-side and can work offline. No colours or inputs are uploaded.

HTML Colour Picker — Hex, RGB, HSL, RGBA, HSLA & Hex8

Pick a colour, tweak opacity, convert formats, and check accessibility. 100% client-side.

Colour & Formats

Hex

RGB

HSL

Alpha (opacity)
100% Background for contrast check

Recents & Favourites

Preview & Contrast

Preview on Light

The quick brown fox

Preview on Dark

The quick brown fox

Preset Palette

Understanding Colour Formats (Hex, RGB, HSL, RGBA, HSLA, Hex8)

Designers and developers reach for different colour formats depending on the job. This picker shows and converts Hex, RGB, and HSL — and, with the alpha slider, it also outputs RGBA, HSLA, and Hex8 (hex with transparency). You can paste any of these into CSS or design tools and copy values with one click.

Hexadecimal (Hex / Hex8)

Format: #RRGGBB (e.g., #1E90FF) or shorthand #RGB. With alpha, Hex8 becomes #RRGGBBAA (e.g., #1E90FFCC).
Use it for: CSS colours, design tokens, styleguides, favicons, quick copy/paste.
When to prefer Hex8: You need a single string that also encodes transparency.

RGB / RGBA

Format: rgb(30, 144, 255) and rgba(30, 144, 255, 0.8).
Use it for: Scripted colour manipulation, canvas work, and when opacity is adjusted in code.

HSL / HSLA

Format: hsl(210, 100%, 56%) and hsla(210, 100%, 56%, 0.8).
Use it for: Theming and palettes — it’s easy to make tints/shades by changing lightness, or reduce intensity by lowering saturation.

Accessibility & Contrast

The built-in contrast checker computes WCAG contrast ratios of your colour against light and dark backgrounds (and an optional custom background). Look for AA and AAA badges to verify text meets accessibility guidelines.

Productivity Features

Eyedropper: Pick any pixel colour from your screen (supported browsers).
Alpha slider: Instantly see RGBA, HSLA, and Hex8 outputs.
Recents & Favourites: Your last colours and saved swatches persist in this browser.
Permalinks: Share the exact colour + opacity using the URL hash.
Copy bundles: One click to copy CSS variables or handy Tailwind snippets.