HTML Color Picker

Shades, tints & matching colors

Click any swatch to load it into the picker.

How to use this HTML color picker

1. Pick a color. Drag in the color field and move the hue slider, type a hex code into the Hex box, enter exact R, G, B numbers, or use the eyedropper (Chrome and Edge) to sample any pixel on your screen.
2. Set the opacity if you need a transparent color. The 8-digit hex, RGBA and HSLA codes update with it.
3. Copy the HTML color code you need — hex, RGB or HSL — or copy a complete snippet: an inline style attribute, a CSS rule, a CSS variable or an HTML <input type="color">.
4. Check it is readable. The live preview shows the color as text on white and on black and as a background, with WCAG contrast ratios, so you can see at a glance whether it passes AA.

The page address updates as you pick, so Copy link gives you a URL that reopens this exact color — handy for sharing a brand color with a developer or saving it for later. Everything runs in your browser; nothing you pick is uploaded.

HTML color codes: hex, RGB and HSL

An HTML color picker gives you a color code, and HTML and CSS accept the same color in several notations. A hex color code such as #FF5A36 writes the red, green and blue channels as two hexadecimal digits each — it is the most common format in stylesheets and design tools. An RGB code such as rgb(255, 90, 54) writes the same three channels as numbers from 0 to 255. An HSL code such as hsl(11, 100%, 61%) describes the color by hue, saturation and lightness, which makes it easy to create lighter or darker variants by hand.

All three produce exactly the same color, so choose whichever your project already uses. For transparency, add an alpha value: #FF5A3680 (8-digit hex), rgba(255, 90, 54, 0.5) or hsla(11, 100%, 61%, 0.5). If you have a code in one format and need another, the color converter translates between hex, RGB, HSL, HSV, CMYK and OKLCH, and the dedicated hex to RGB and RGB to hex converters handle the most common conversions.

Using a picked color in HTML and CSS

Once you have copied a color code, there are three common places to put it. For a one-off element, add it as an inline style:

<h1 style="color: #FF5A36;">Hello world</h1>
<div style="background-color: rgb(255, 90, 54);">…</div>

For anything reused, put it in a stylesheet — ideally as a CSS custom property, so the color is defined once and every rule refers to it:

:root { --brand: #FF5A36; }
.button { background: var(--brand); color: #FFFFFF; }
a:hover { color: var(--brand); }

HTML also has its own built-in color picker: the <input type="color"> element. Give it a starting color with the value attribute (it must be a lowercase 6-digit hex code), and read the user's choice from input.value in JavaScript. The System picker button above opens that same native browser control.

<label>Theme color <input type="color" id="theme" value="#ff5a36"></label>
<script>
  document.getElementById("theme").addEventListener("input", (e) => {
    document.body.style.setProperty("--brand", e.target.value);
  });
</script>

Pick colors people can read

A color that looks good in a picker can still be hard to read on a page. WCAG asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (level AA), and 7:1 for the stricter AAA level. The preview above checks your color against white and black automatically; to test it against any other background color, open the contrast checker. To see how the color appears to people with color-vision deficiency, try the color blindness simulator.

More color tools

• HTML color codes — search 245 named colors and click to copy their codes.
• Color picker — the full picker with HSV, CMYK and OKLCH values, tones and every harmony.
• Image color picker — pick an HTML color code from a photo or screenshot.
• Color matcher — find the colors that match your pick and its closest Tailwind or CSS color.
• Palette generator — turn one color into a full color scheme and export it as CSS.
• Color mixer — mix two picked colors and copy every step in between.
• Gradient creator — blend picked colors into a CSS gradient.
• 140 CSS color names — every color keyword HTML understands, with hex, RGB and HSL.
• Color name from image and the color library — find what a color is called.

HTML color picker FAQ