HTML Color Picker

How to use the color picker

Drag inside the square canvas. Moving right raises saturation and moving up raises brightness.
Move the hue slider to rotate through the spectrum; the canvas redraws for the new hue.
For an exact value, type into the HEX field or the RGB and HSL channel fields. The other fields and the canvas marker update to match.
Set the opacity field anywhere from 0 to 100% when you need a translucent color.
Press the random-color button if you want a fresh starting point.
Copy a snippet from the code export panel, or copy the page URL to share the color.

Picking by canvas or by typing a value

The canvas is an HSV plane at the hue set by the slider: the horizontal axis is saturation, the vertical axis is brightness. The top-right corner is always the fully saturated hue and the bottom edge is always black, so sliding straight down from a bright orange takes you through darker oranges into brown without changing the hue.

Typing is for precision. When a style guide gives you #FF6347, paste it into the HEX field and the marker jumps to the matching spot. In HSV terms tomato is 9°, 72% saturation and 100% brightness, so the marker lands on the top edge of the canvas, almost three-quarters of the way across.

Using it as an OKLCH color picker

Every color you pick is also shown as a CSS oklch() value, ready to copy; pure red #FF0000 is oklch(62.8% 0.2577 29.23). OKLCH splits a color into perceived lightness (L), chroma (C) and hue (H), so watching L as you drag tells you how light a color actually looks, which HSL lightness cannot. To start from an existing oklch() value, paste it into the color converter. The model is explained in what OKLCH is.

Each format has a job. HEX is the shortest form for CSS and handoff. RGB gives channel values for scripts and rgba(). HSL keeps manual tweaks readable. OKLCH suits design tokens and scales, and oklch() has worked in all major browsers since 2023. The RGB vs HSL vs OKLCH comparison goes deeper.

Exporting code for your project

The export panel turns the current color into ready-to-paste code in seven formats:

Standard CSS declarations for color, background-color and border-color.
CSS custom properties, with RGB, HSL and OKLCH variants of the same token.
SCSS variables.
Tailwind, as a theme.extend.colors entry for tailwind.config.js.
Swift UIColor, with channels written as 0–1 fractions.
Android colors.xml resource.
JSON token holding the HEX, RGBA, HSL and OKLCH values, for design-token pipelines.

Sharing a color with a link

The picker writes the current color into the URL hash, so /color-picker#ff6347 always opens on tomato. Paste the address into a ticket, chat or code review and the other person sees the exact color with every format filled in. Nothing is saved on a server; the color lives in the link itself.

Frequently asked questions

How do I find the HEX code of a color?

Drag on the canvas and adjust the hue slider until the swatch looks right, then read the HEX field. The RGB, HSL and OKLCH fields update at the same time, so every format is ready to copy.

Is this an OKLCH color picker?

Yes. Whatever you pick is shown as a CSS oklch() value, such as oklch(62.8% 0.2577 29.23) for pure red, ready to copy. OKLCH lightness matches perceived lightness, so it is a reliable guide when building lighter and darker variants.

How do I share a color I picked?

Copy the page URL. The color is stored in the hash, for example /color-picker#6366f1, so anyone who opens the link sees the same color.

Does the color picker support transparency?

Yes. The opacity field takes a value from 0 to 100%, and the code export carries it through, for example as an rgba() background color in the standard CSS snippet.

How do I add a color picker to my own HTML page?

Use the built-in input element with type="color". It opens the browser or operating system picker and returns a six-digit hex value such as #ff6347, which you can read in JavaScript from the input's value.