PickXColorPick color from
DeutschDEOpen editor

HSB color picker

The picker designers know from Photoshop and Figma: choose the hue on the ring, then saturation and brightness in the square. HSB, HEX and every other format update as you drag.

Drag along the ring to choose the hue, then in the square: right for more saturation, up for more brightness.

hsb(243, 69%, 90%)#4F46E5

Values: click one to copy it

Picked colors

Colors you pick show up here. Pick as many as you like. They stay here until you import or clear them.

Opens the editor and adds these colors as one group, with names, shades, contrast checks and code export.

How it works

  1. The HSB picker with a hue ring around a saturation and brightness square and sliders below

    1Choose the hue on the ring

    Drag along the ring to choose the hue. The square in the middle switches to that hue right away.

  2. The chosen color with its HSB value, name and HEX, RGB, HSL, HSV, OKLCH and CMYK values

    2Fine-tune in the square

    Drag right for more saturation and up for more brightness, or type exact values into the H, S and B fields. The top right corner is the purest color.

  3. A grid of picked color swatches with HEX codes and color names

    3Collect your colors

    Every pick lands in the grid below with its HEX code and name. Pick as many as you like, copy them or remove the ones you don't need.

  4. The PickXColor editor showing the imported colors as a named group of cards

    4Open them in the editor

    Press “Import into PickXColor editor” to add all colors as one group, with names, shades, contrast checks and code export.

Frequently asked questions

What is HSB?

HSB describes a color by hue (0–360° on the color wheel), saturation (0–100%, from grey to vivid) and brightness (0–100%, from black to full intensity). It's the model behind the color pickers in Photoshop, Illustrator, Figma and Sketch.

Are HSB and HSV the same?

Yes. HSB (hue, saturation, brightness) and HSV (hue, saturation, value) are two names for the same model, so the values match exactly. That's why the value list shows it as HSV.

Can I use HSB in CSS?

No, CSS has no hsb() function. Copy the HEX, RGB, HSL or OKLCH value from the list instead: they describe exactly the same color.

How do I copy values from Figma or Photoshop?

Type the H, S and B numbers into the fields next to the sliders, or paste the HEX code into the HEX field and press Enter. Arrow keys change a field by 1, with Shift by 10.

Is it privacy-safe and GDPR-compliant?

Yes. Your data is opened and processed entirely in your browser. It is never uploaded, stored or sent to a server, and we never see it. There's no account, no tracking and no cookies, and the tool pages don't load anything from third parties. Because none of your file data reaches us, there is no personal data from it that we could process.

The colors you pick are kept in your browser's local storage, so they survive a reload. Clear them with the Clear button or by deleting this site's data.

What can I do with the picked colors?

Copy all HEX codes at once, or press “Import into PickXColor editor”. The editor adds them as one named group on an infinite board, with human color names, HEX, RGB, HSL, OKLCH and CMYK values, Tailwind-style shades, WCAG contrast checks and code export for CSS, Tailwind, SCSS, Swift and Jetpack Compose.

Is it free?

Yes. It's free with no sign-up, no watermark and no limit on how many colors you pick.

More ways to pick colors

Every tool runs in your browser and adds to the same picked colors.