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

Pick, convert, and understand web colors

This HTML color picker helps you find the exact color you need and converts it into the formats used across the web. Whether you are choosing a brand color, matching a UI element, or building a palette, it gives you clear, copy-ready values in Hex, RGB, and HSL. With the alpha slider, you also get RGBA, HSLA, and Hex8 for transparency. Everything happens in your browser, so you can work quickly without installing anything.

Colors in CSS are usually represented in a few common ways. Hex is the classic format you see in style sheets, RGB expresses colors as red/green/blue values, and HSL represents hue, saturation, and lightness, which many people find easier to adjust by eye. Each format describes the same color, just in a different language. This tool lets you move between them instantly so you can use the format that fits your workflow.

How to use the color picker

1. Use the color panel or eyedropper to choose a color.
2. Adjust the alpha slider if you need transparency.
3. Copy the format you need: Hex, RGB, HSL, or their alpha variants.
4. Paste the value into your CSS, design tool, or code editor.

If you are building a theme, use HSL to create lighter or darker versions by changing lightness. If you are working with scripts or canvas drawing, RGB or RGBA is often the easiest to manipulate. If you need a compact color code for a stylesheet or a design token, Hex or Hex8 keeps things short.

Format basics

• Hex: #RRGGBB or shorthand #RGB for quick copy and paste.
• RGB: rgb(30, 144, 255) for script-friendly color values.
• HSL: hsl(210, 100%, 56%) for easier palette tweaks.
• Alpha: RGBA, HSLA, and Hex8 add transparency for overlays and UI states.

Accessibility and real-world use

The built-in contrast checker compares your color against light and dark backgrounds and shows WCAG contrast ratings. This is useful when you are choosing text colors, button styles, or link colors that must remain readable. Designers use it for UI themes, developers use it for CSS variables, and content teams use it when matching brand guidelines across documents and web pages.

Whether you are looking for a color picker, a hex to RGB converter, or a tool to check contrast for accessibility, this page gives you a fast, reliable workspace for color decisions.