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

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.