Skip to color picker

Color Picker

Pick a color, sample a screen or image, and copy HEX, RGB, HSL, or CSS values in your browser.

Loading color picker…

What is a color picker?

An online color picker lets you choose a color visually or sample it from a supported screen or image workflow, then copy reusable HEX, RGB, HSL, and CSS values. This tool keeps one color in focus so you can inspect it, copy it, and reuse it.

How to use this color picker

  1. Pick a color using the visual picker or color input.
  2. Paste a HEX, RGB, or HSL value if you already know the color.
  3. Use Pick from Screen on Chrome, Edge, or Opera.
  4. Upload or paste an image and click a pixel to sample a photo or screenshot.
  5. Copy HEX, RGB, HSL, RGBA, or CSS-ready output.
  6. Use history, shades, compact harmonies, or the contrast preview when needed.

Pick a color from your screen or image

Screen picking calls the browser EyeDropper API. It returns one sRGB color. It is not a screenshot and it is not available in every browser. Image picking draws your file on a local canvas, maps the click to that canvas, and reads the pixel. Use the magnifier to avoid anti-aliased edges.

HEX, RGB, HSL, and CSS color formats

  • HEX — compact CSS and design-handoff token, such as #3B82F6.
  • RGB / RGBA — channels 0–255. Use RGBA when you need transparency.
  • HSL / HSLA — hue, saturation, and lightness. The sliders on this page use HSL.
  • CSS variables — copy --color-primary for a design token.

Common color picker use cases

  • Get a HEX code from a website mockup or screenshot.
  • Match a brand color you can see on screen.
  • Copy CSS color or background-color for a component.
  • Convert HEX to RGB or HSL without leaving the browser.
  • Sample a photo pixel, then check contrast before using it as text.

How color values are calculated

Each pair of HEX digits is one 0–255 RGB channel. HSL is derived from those channels; there is no extra proprietary formula. The image sampler reads the canvas pixel at the mapped coordinate. Screen picking uses the EyeDropper API’s sRGB value. Contrast versus white and black uses WCAG relative luminance as a hint, not a certificate.

Common color picker mistakes

  • Copying an anti-aliased edge instead of a flat pixel.
  • Treating six-digit HEX as if it stored transparency.
  • Choosing a nearby shade by eye instead of the exact sampled value.
  • Using color alone for meaning without a contrast check.
  • Building a full scheme here — use the Color Palette Generator for coordinated palettes.

Real examples

  • #3B82F6 is rgb(59, 130, 246) and about hsl(217 91% 60%). Paste the HEX into CSS, or use RGB when you need alpha.
  • Paste #E11D48 and read the synchronized RGB/HSL fields for a landing-page accent.
  • Paste a screenshot, click a blue UI pixel, then copy HEX into a stylesheet.

Frequently asked questions

What is a color picker?

A color picker is a tool that selects one color and shows reusable codes such as HEX, RGB, and HSL so you can paste them into CSS or a design file.

What is an online color picker?

An online color picker runs in the browser. This one converts formats locally, copies CSS-ready values, and can sample a screen or image without an account.

How do I get a HEX color code?

Use the visual picker, type a color, pick from the screen, or click a pixel on an image. The HEX field updates immediately. Six-digit HEX is #RRGGBB.

What is the difference between HEX, RGB, and HSL?

HEX is a compact CSS token. RGB is the same color as 0–255 channels. HSL is hue, saturation, and lightness—the sliders on this page use HSL.

Can I pick a color from my screen?

Yes, if the browser supports the EyeDropper API (Chrome, Edge, Opera). The button is disabled in browsers that do not implement it.

Can I pick a color from an image?

Yes. Upload, drop, or paste a JPG, PNG, WebP, or GIF, then click a pixel. The image is drawn on a local canvas and is not sent to a server.

Does the color picker work on mobile?

Yes. The native picker, HEX/RGB/HSL fields, image tap-to-sample, history, and copy buttons work on phones. Screen eyedropper depends on the mobile browser.

Can I copy CSS-ready color values?

Yes. Copy color:, background-color:, a CSS variable, JSON, HEX, RGB, RGBA, HSL, or HSLA.

Does the tool support transparency?

Yes. The alpha slider updates RGBA, HSLA, and 8-digit HEX (#RRGGBBAA). Six-digit HEX does not store alpha.

Are my images uploaded to a server?

No. The file is read with a local canvas, then discarded. Share links store only the color in the URL hash.

Is the color picker free?

Yes. There is no signup and no paid export wall on this page.

Why does a picked color sometimes look slightly different from the surrounding area?

Anti-aliased edges mix neighboring pixels. Click the flattest area of the color, or use the magnifier to land on one pixel.