Color Picker — Pick Any Color, Get Its Hex Code

Free online hex color picker with a screen eyedropper — no signup.

Pick a color from the spectrum, sample one straight off your screen with the eyedropper, or paste a hex code you already have. The picker shows the color's hex, RGB, and HSL values instantly, each with one-click copy — and hands the color off to the tint & shade generator when you're ready to build a palette from it.

How to Use This Color Picker

There are three ways in, depending on where your color is coming from:

• Browse the spectrum. Click the color swatch to open your browser's native picker — a full spectrum with hue and brightness controls. It's the same picker built into your operating system, so it feels familiar and works offline.
• Sample your screen. The Pick from screen button turns your cursor into an eyedropper that reads any pixel — from a photo, a competitor's site, a PDF, even another app. (Chromium browsers only; details below.)
• Paste a hex code. Already have a value like #3498db? Paste it into the hex field and the swatch and readouts update instantly. Three-digit shorthand like #fa3 works too.

Whichever way you pick, the three readouts stay in sync: hex for CSS and design tools, RGB for code that works with channels, and HSL when you want to reason about hue and lightness. Every value is one click to copy. Nothing leaves your browser — the picker runs entirely client-side.

Pick a Color from Your Screen (Eyedropper)

The eyedropper uses the browser's EyeDropper API: click the button, and your cursor becomes a magnified loupe that samples whatever pixel you click — anywhere on your screen, not just this page. It's the fastest way to answer "what exact color is that?" about a logo, a photo, or any design you're looking at.

On Safari or Firefox the button hides itself rather than failing. The practical fallback: take a screenshot, open it beside this page, and match the color with the spectrum picker — or use your OS's built-in sampler (Digital Color Meter on macOS, PowerToys Color Picker on Windows) and paste the hex it reports.

From One Picked Color to a Full Palette

Picking the color is usually step one, not the goal. Once you have your hex code, the rest of the HexTints toolkit takes over:

• Need lighter and darker versions? The Get tints & shades link above opens your exact color in the tint & shade generator — a 31-step ramp from near-white to near-black, every step click-to-copy.
• Building a whole scheme from it? A single picked color extends into a complete monochromatic color palette — harmonious by construction, with design-token and Tailwind examples.
• Checking a popular color? The color library has precomputed tints, shades, RGB/HSL values, and WCAG contrast tables for common colors.

Hex, RGB, and HSL — Which Format When

All three describe the same color; they differ in what they make easy:

• Hex (#3498DB) — the compact, universal default. CSS, design tools, brand guidelines: hex everywhere.
• RGB (rgb(52, 152, 219)) — the same three channels as decimal numbers, handy when code manipulates channels directly or you need an alpha variant via rgba().
• HSL (hsl(204, 70%, 53%)) — hue, saturation, lightness. The format to think in: "same hue, a bit lighter" is just a lightness change, which is exactly how tints and shades work.

Need conversions beyond what the readouts show — or want to understand the math behind them? Our hex to RGB converter does two-way conversion with a worked example.

Frequently Asked Questions

• What is a hex color picker?

  A hex color picker is a tool that lets you choose a color visually — from a spectrum, a wheel, or your screen — and gives you its hex code, the six-digit value like #3498DB that CSS and design tools use. Most pickers, this one included, also show the equivalent RGB and HSL values.

• Can I pick a color from my screen or an image?

  Yes — in Chromium browsers (Chrome, Edge, Opera, Brave), the eyedropper button samples any pixel on your screen, including images, other tabs, and other apps. Safari and Firefox don't support the API yet; there, open the image next to the picker and match it with the spectrum, or use your OS's color sampler and paste the hex.

• What's the difference between a color picker and a palette generator?

  A picker captures one color and reads its values. A palette generator expands a color you already have into a coordinated set — the HexTints generator turns one hex code into a full ramp of tints and shades. They work in sequence: pick first, then generate.

• Is this color picker free?

  Completely — no signup, no limits, like every HexTints tool. It also runs entirely in your browser: no color you pick is ever sent to a server.

• Is a picked color safe to use for text?

  Only if it has enough contrast with its background — WCAG requires 4.5:1 for normal text and 3:1 for large text. Check the color library for precomputed ratios, or generate a darker shade of your color if it falls short.

Got your color? Take it further: generate its tints and shades, build a monochromatic palette around it, or convert it between formats.