Color Picker from Image

Add a picture to the box above, move over it and click the pixel you want. A magnifier shows the pixels around the cursor, so you can land on exactly the right one, and the panel beside the picture shows the colour as HEX, RGB, HSL, HSV, CMYK, Lab and a decimal number, each with its own copy button.

This color picker from image works entirely in your browser. The picture is never sent anywhere, there is no account, and the colours you pick are kept in a small palette in this browser so you can copy them as a list or download them for CSS, Tailwind, JSON or GIMP and Inkscape.

A colour picker reads the exact colour of one point in a picture and tells you its numbers. Every digital picture is a grid of tiny squares called pixels, and each pixel stores a red, a green and a blue value from 0 to 255. Those three numbers are the colour. The picker reads them and writes them out in the forms that designers, developers and printers use.

People need this all the time. A web developer wants the exact blue of a logo for a button. A designer wants to match a slide to a photo. Someone painting a room wants the name of the soft green in a picture they saved. A shop owner wants the brand colours of a supplier's banner. In every case the colour is already in the picture, and you only need a way to read it.

Guessing a colour by eye rarely works. Screens, light and the colours around a spot all change how it looks. Reading the pixel gives you the number the file really stores, so the colour you use later matches the picture exactly.

A color picker from image online saves you from installing a graphics program just to read one colour. Open this page on a computer, tablet or phone, add the picture and click. The page works the same in all modern browsers.

Many online tools send your picture to a server first. This one does not. The page loads once, and from then on your own device opens the picture, draws it on the screen and reads the pixels. That keeps private screenshots private, and it is fast, because nothing travels over the internet while you work.

Your picked colours and your sample size are remembered in this browser. When you come back tomorrow, the palette you built is still there, which helps when you collect colours for one project over several days.

This color picker from image free of charge has no sign-up, no trial and no daily limit. Pick one colour or a hundred, open one picture after another, and copy as many values as you like.

The work runs on your own device instead of a paid server, so there is nothing to charge for and no queue to wait in. The values you copy and the palette files you download carry no mark of ours.

Free does not mean cut down. Every feature on the page, from the magnifier and the main colours to the palette exports and the contrast check, is open to everyone.

A color picker from image with hex code is what most people are looking for, because HEX is the form used in CSS, HTML, design apps, presentation software and brand guides. The big swatch at the top of the colour panel shows the HEX code in large type, for example #1E90FF, and the first row below it has a copy button for it.

A HEX code is the same red, green and blue values written in base 16. Each pair of characters is one channel: the first two are red, the next two green and the last two blue. 00 means none of that channel and FF means all of it, so #FF0000 is pure red, #FFFFFF is white and #000000 is black. The page always writes HEX in capital letters with a leading #, which every program accepts.

When you move over the picture without clicking, the line under the picture shows the position of the pixel and its HEX code as you go, so you can scan an area quickly. Click when you find the one you want, and it moves into the panel and the picked colours.

If a program asks for a HEX code without the #, paste the code and delete the first character. If it asks for three characters, such as #F00, note that only some colours can be written that short; the six-character form always works.

This color picker from image with name shows a readable name under the HEX code, so a colour becomes something you can talk about, not just a number. The name comes from a list of all the standard CSS colour names, such as Dodger Blue, Tomato and Slate Gray, plus common design and paint names such as Charcoal, Sage, Terracotta, Mustard, Burgundy and Pastel Pink.

Most colours in a photo are not exactly one of the named colours, so the page finds the closest one. It compares the colours the way people see them, using a measure called ΔE 2000 in the Lab colour space, rather than just comparing RGB numbers. Two colours that look alike to the eye get a small difference, even if their numbers seem far apart.

When the picked colour matches a named colour almost exactly, the name is shown on its own. When it is only near one, the name has a ≈ sign in front of it, for example ≈ Sage. That tells you the name is a helpful description, not the exact colour; for the exact colour, use the HEX code.

Names are handy when you write a brief, label a palette or explain a colour to someone without design software. They are also used to name the entries when you download the palette as CSS variables, Tailwind colours or a GIMP palette, so a file of colours is easier to read.

A hex color picker from image files needs to read the pixel exactly as the file stores it. This page draws your picture on a hidden canvas at its real size, up to 8000 pixels on the longer side, and reads the colour straight from that copy. It does not read the scaled preview you see, so zooming in or out never changes the value.

That matters for small details. A thin line of text, the edge of a logo or a one-pixel border can look like a single colour on screen while the pixels around it blend into the background. Zoom in, check the magnifier and pick the pixel in the middle of the line for the true colour.

Pictures larger than 8000 pixels on their longer side are reduced to that size when they are opened, which keeps the page fast and within the memory a browser allows. Flat colours, such as logos and interface colours, stay the same after this; only fine noise in very large photos can shift slightly.

Using a hex color picker from image online is the quickest route from a picture to a CSS value. Paste a screenshot of a website, click the button colour and copy the HEX code. The whole job takes a few seconds and needs no program besides the browser.

For a web project, copy HEX for CSS and HTML, RGB for code that wants three numbers, and HSL when you want to make lighter or darker versions by changing one number. Every row in the colour panel has its own copy button, so you take exactly the form you need.

If you already know a HEX code and want to see it, its name, its tints and its contrast, type it in the #HEX box at the top right of the tool and press Use. The colour is shown in the panel just as if you had picked it from a picture.

There are three ways to add a picture. Tap Select a picture and choose a file, drop a file from a folder onto the box, or copy a picture or screenshot and press Ctrl+V on the page (Cmd+V on a Mac). Paste works anywhere on the page, so you can take a screenshot and paste it straight in.

Think of it as a hex color picker from image upload, except the upload never leaves your device. The file is read by your browser, drawn on a canvas and kept only in the page's memory. Close the tab and it is gone.

To change the picture, press Other picture next to the file name, or paste a new screenshot. The picked colours stay in the palette, so you can collect colours from several pictures into one set.

The file name and the size in pixels are shown above the picture, so you can check you opened the right one. If a file cannot be opened, a short message tells you which formats work.

When you move the cursor over the picture, a round magnifier appears next to it. It shows the 15 × 15 pixels around the cursor, each one drawn as a large square with a thin grid between them, so you can see exactly which pixel you are on even in a busy photo.

The square outlined in the middle of the magnifier shows what will be picked. With a sample of 1 px it is a single pixel; with 3×3, 5×5 or 9×9 the outline grows to show the whole area that will be averaged.

The line under the picture shows the x and y position of the pixel and its HEX code. Position 0, 0 is the top left corner. This helps when you need to pick the same spot in two versions of a picture, for example before and after an edit.

The picture itself can also be used with the keyboard. Click it once or press Tab until it is focused, then use the arrow keys to move one pixel at a time. Hold Shift to move ten pixels at a time. Press Enter or Space to pick the pixel under the cursor. This is the most precise way to reach a tiny detail, and it works without a mouse.

Sample decides how many pixels are read for one pick. 1 px reads exactly one pixel. 3×3 reads the pixel and the eight around it and gives the average. 5×5 averages 25 pixels and 9×9 averages 81.

Use 1 px for logos, flat graphics, screenshots of apps and websites, and anything drawn on a computer. Those pictures have clean areas of one colour, and the single pixel is the true value.

Use 3×3 or 5×5 for photos. A photo of a wall, a dress or a sky looks like one colour, but up close every pixel is slightly different because of grain, noise and compression. An average gives a calmer value that better matches what you see. Use 9×9 for very noisy photos taken in low light, or for picking the general colour of a large soft area such as skin or sand.

At the edge of the picture the average uses only the pixels that exist, so a pick in a corner still works. Your chosen sample size is remembered in this browser for next time.

The zoom buttons above the picture are Fit, 100%, 200%, 400% and 800%. Fit shows the whole picture in the box and never enlarges a small picture beyond its real size. 100% shows one picture pixel per screen pixel.

200% and above make each pixel bigger, and above 200% the pixels are drawn as sharp squares instead of being smoothed, so the edges between colours are easy to see. Scroll inside the box to move around a zoomed picture.

Zoom only changes what you see. The colours are always read from the full-size copy of the picture, so the same pixel gives the same value at every zoom level. A good habit is to find the area at Fit, then zoom to 400% or 800% and pick with the magnifier or the arrow keys.

RGB gives the three channels as numbers from 0 to 255. HSL gives hue (the position on the colour wheel, 0 to 360), saturation and lightness, and HSV gives hue, saturation and value. Many people find HSL and HSV easier to adjust by hand: keep the hue and change the lightness to get a related colour.

CMYK is the mix of cyan, magenta, yellow and black inks. The page uses the simple standard formula, which is useful as a starting point, but real printing depends on the paper, the press and a colour profile. For important print work, give your printer the HEX or Lab value as well and ask for a proof.

Lab describes a colour by lightness (L) and two colour axes (a for green to red, b for blue to yellow). It is built to match human vision, which is why the page uses it to find the nearest colour name and to merge similar main colours. Decimal is the HEX code written as one ordinary number.

RGBA appears only when the pixel is partly or fully see-through, as in a PNG or WebP with transparency. The fourth number is the opacity from 0 to 1. A fully see-through pixel has no real colour to show, so pick from a solid part of the picture where you can.

As soon as a picture opens, the page finds its main colours and shows them as a strip under the picture. The width of each block follows how much of the picture it covers, and the chips below list each HEX code with its share in percent.

Choose 5, 8 or 12 under How many. Five gives the broad mood of a picture, eight is a good default for a palette, and twelve brings out smaller accents such as a red button in a mostly blue screenshot.

Click a block in the strip to show that colour in the panel, with its name, values, tints and contrast; it is also added to your picked colours. Click a chip under the strip to copy its HEX code straight away without changing the panel.

The main colours are found with a method called median cut: the pixels are split again and again into groups of similar colours, the average of each group is taken, and groups that look the same to the eye (a ΔE 2000 under 6) are merged. Fully or mostly see-through pixels are left out, so a logo on a transparent background gives the logo's colours, not empty corners.

Main colours are averages, so in a photo they may not match any single pixel exactly. For an exact value from one spot, click that spot in the picture.

Under the colour panel you see nine swatches: four tints that move towards white, the colour itself in the middle, and four shades that move towards black. They are mixed at 80%, 60%, 40% and 20% towards white, and 20%, 40%, 60% and 80% towards black.

Click any swatch to make it the current colour. Its values appear in the panel and it is added to the picked colours. This is a quick way to build a full scale from one brand colour: a light tint for backgrounds, the colour for buttons and a dark shade for text or hover states.

The tints are useful for soft backgrounds, cards and highlighted rows in a table, where the full colour would be too strong. The shades are useful for borders, pressed buttons and text that has to stand out on a light tint of the same colour. Because they all share the same hue, a page built from one colour and its tints and shades looks calm and planned.

Each swatch shows its HEX code when you hover over it on a computer. Check the contrast of a tint or shade before you use it for text: click it, and the contrast line updates for the new colour, including its ratio with the colour you picked before.

Contrast (WCAG) tells you how readable text would be in this colour. The page shows the ratio of the colour on white, on black, and with the colour you picked before, each with a short verdict. The ratio goes from 1:1 (no difference) to 21:1 (black on white).

Use it when you take a brand colour from a picture and want to use it for text or a button. A mid blue may pass on white for large headings but fail for small body text. If it fails, click a darker shade in the tints and shades row and check again.

The comparison with the previous colour is useful for pairs: pick the background of a banner, then the text on it, and you see straight away whether the text is easy to read. These checks follow the WCAG contrast formula; they do not cover every part of accessibility, such as font size or colour blindness.

Every colour you pick goes into Picked colours below the tool, newest first. If you pick the same HEX twice, it is moved to the front instead of being added again. Up to 40 colours are kept.

Click a swatch to show that colour in the panel again. Move over a swatch and press the small × to remove it, or press Clear to empty the palette. The palette is saved in this browser only, so it is still there after a reload but not on your other devices.

Picking from several pictures builds one palette. You can open a logo, pick its two colours, paste a screenshot of the website, pick the background and text colours, and export all of them in one file.

The buttons under the picked colours turn your palette into something you can use elsewhere. Copy HEX list puts the codes on the clipboard. The other buttons download a small text file.

In CSS variables and Tailwind, each colour is named after its nearest colour name and its position, such as --dodger-blue-1, so you can tell the entries apart at a glance. Rename them to your own names, such as --brand or --accent, once they are in your project.

The .gpl file is the palette format used by GIMP and Inkscape. In GIMP, import it from the Palettes panel; in Inkscape, place it in the palettes folder of your settings and it appears in the swatches list. The JSON file lists each colour with its HEX code and name, which is easy to read from any script.

In Chrome and Edge on a computer, a Pick from screen button appears at the top of the tool. Press it and the cursor becomes an eyedropper that can read any pixel on your screen: another tab, a desktop app, a video or a document. Click to pick, or press Esc to cancel.

The picked colour goes into the panel and the palette, just like a colour from a picture. This uses the EyeDropper feature built into those browsers, so you do not need to take a screenshot first.

Other browsers, such as Firefox and Safari, do not offer this feature yet, so the button is hidden there. On those browsers, take a screenshot and paste it into the page instead; the result is the same.

Colours picked from the screen are the colours your screen is showing, after any night light, colour profile or video processing. For the exact colour stored in a file, open the file itself.

The color picker from image WebP support is built in: WebP opens directly, with no conversion first, including WebP files with transparency. The same is true for JPG, PNG, GIF, BMP and AVIF.

HEIC photos from an iPhone open too. If your browser cannot read HEIC by itself, the page loads a small decoder and opens the photo anyway. SVG files are drawn at their own size and then read like any other picture. For an animated GIF, the first frame is used.

JPG and WebP photos are compressed, which can add small changes around edges and in smooth areas. If the values jump around near an edge, move into the middle of the area or use a 3×3 or 5×5 sample. PNG keeps every pixel exactly, so it is the safer format for screenshots you want to read precisely.

A color picker from image Windows users can trust needs nothing more than the browser already on the PC. Open this page in Edge, Chrome or Firefox, add the picture and click. There is no program to install and nothing to allow in Windows settings.

The fastest way to read a colour from anything on a Windows screen is a screenshot. Press Windows + Shift + S, select the area, then click on this page and press Ctrl+V. The screenshot opens straight away and you can pick from it at full size.

In Edge and Chrome you can skip the screenshot: press Pick from screen and click any pixel on the screen, even in another program. Windows also has a free add-on from Microsoft, PowerToys, which includes its own colour picker for the screen; it is a separate install, and this page works without it.

Copied values paste into Word, PowerPoint, Excel and design programs with Ctrl+V. In PowerPoint and Word, open More colours and choose the custom tab to enter the HEX code or the RGB numbers.

For a color picker from image iPhone users only need Safari. Open this page, tap Select a picture and choose a photo from your library, take a new photo, or pick a file from the Files app. Screenshots are in the Photos app too, so you can screenshot an app or website and open it here.

On a touch screen, tap the spot you want to pick. To be precise, use the zoom buttons above the picture, such as 400%, and scroll inside the box to the area first; then a tap lands on a much larger pixel. The magnifier follows the pointer where the device supports it, and the HEX code under the picture confirms what you tapped.

Pick from screen is not available on iPhone or iPad, because Safari does not offer the eyedropper feature. Take a screenshot instead and open it here. iPhone photos in HEIC open without any conversion.

Tap a copy button to copy a value, then paste it into Notes, Messages or a design app. Palette downloads are saved in the Files app, in the Downloads folder.

On Android, open the page in Chrome or another browser and tap Select a picture to choose a photo or screenshot from the gallery. Pick the same way as on an iPhone: zoom in first, then tap.

On a Mac, the page works in Safari, Chrome, Edge and Firefox. Press Cmd+Shift+4 to take a screenshot of an area; hold Control as well to copy it to the clipboard, then press Cmd+V on this page. In Chrome and Edge, Pick from screen works on a Mac too.

On Linux and ChromeOS the page runs the same as anywhere else, in any modern browser.

The page gives you three ways to get a colour, and each one suits a different job. Clicking the picture gives the exact value of one pixel or a small average, and is right when you know which spot you want. The main colours strip gives the colours that cover the most area, and is right when you want a palette that sums up a picture.

Pick from screen reads any pixel on your screen, in Chrome and Edge on a computer, and is right when the colour is in another app or a video and you do not want to take a screenshot. Typing a HEX code is right when you already know the colour and want its name, other values, tints and contrast.

All four end in the same place: the colour panel and the picked colours palette. You can mix them freely, for example pick two colours from a logo, one from the screen and one typed by hand, and export them together.

Logos are one of the most common things people pick colours from, and they are also one of the easiest. A logo is usually made of a few flat colours, so a sample of 1 px gives the exact value. Open the logo, zoom to 200% or 400%, and click in the middle of each colour area, away from the edges.

The edges of a logo are smoothed so they do not look jagged. Those smoothing pixels mix the logo colour with the background, which is why a pick right on an edge gives an in-between colour that is not part of the brand. The magnifier makes this easy to see: the solid area is one even colour, and the edge is a soft line of mixed pixels.

If the logo is an SVG, open the SVG itself rather than a screenshot of it. The page draws the SVG at its own size and the flat areas come out exactly as the designer set them. If you only have a small or blurry copy, pick from the largest flat area you can find and use a 3×3 sample to smooth out the noise.

The main colours strip is a quick check for a logo. Set How many to 5 and the strip usually shows the background and the two or three brand colours, each with its share. Click a block to confirm it, then pick the exact value from the logo itself.

Photos are harder than logos, because the colour of a real object changes with the light. The same red car is bright red in the sun, dark red in the shade and almost brown in the evening. A colour picker reports what the camera recorded at that spot, which is not always the colour of the object itself.

For the most useful value, pick from an area that is lit evenly, not from a highlight or a shadow. Highlights are washed out towards white, and shadows are pushed towards black. On a curved object such as a cup or a face, the true colour is usually in the area between the brightest and the darkest part.

Use a larger sample for photos. A 5×5 average smooths out grain and compression and gives a value that is close to what your eye sees when you look at the area as a whole. Then look at the tints and shades row: if a slightly lighter or darker swatch looks more like the real object, click it to use that instead.

If you want a set of colours that sums up a photo, rather than the colour of one object, use the main colours strip. It reads the whole picture and gives you the colours that cover the most area, which is a good start for a mood board or a slide theme.

Screenshots of websites and apps are ideal for picking colours. Interface colours are flat and exact, and a screenshot saved as PNG keeps every pixel. Take the screenshot, paste it with Ctrl+V and pick with a 1 px sample.

Text is the one tricky part. Letters on a screen are smoothed at the edges, and on some systems the smoothing even adds faint coloured fringes. To get the colour of text, zoom to 800% and pick a pixel in the thickest part of a letter, such as the stem of an l or the middle of a bold heading.

Shadows, gradients and see-through layers are also common in modern interfaces. A gradient has a different value at every pixel, so pick at both ends to get its start and end colours. A see-through layer over a photo shows a mix of the layer and the photo, so the value you pick is the result on screen, not the colour set in the code.

If your screen is set to scale content, for example 150%, a screenshot may contain more pixels than you expect, and thin lines may be spread over two pixels. That does not change the colours of flat areas, but it is another reason to pick from the middle of a shape.

A picture you like is often the easiest place to start a colour scheme. Open it, set the main colours to 5 or 8, and look at the strip. The largest blocks tend to work as background colours, and the small, strong blocks tend to work as accents.

A common approach is to use one main colour for most of the space, a second colour for a smaller part, and a strong accent for the few things that should stand out, such as buttons. Pick those three from the picture, then use the tints and shades row to add a very light version for backgrounds and a very dark one for text.

Check each pair you plan to use for text with the contrast line. Pick the background first and the text colour second; the ratio with the previous colour appears straight away. If a pair fails, try a darker shade of the text colour or a lighter tint of the background.

When the palette feels right, export it. CSS variables and Tailwind suit a website, JSON suits a script or an app, and the .gpl file brings the swatches into GIMP or Inkscape. The HEX list is handy for pasting into a message to a client or a colleague.

Many people use a colour picker to find a paint, a fabric or a thread that matches a photo. The page can give you a good starting point: the HEX code, the RGB values, a readable name and the Lab values, which describe the colour in a way that does not depend on any one screen.

Keep in mind that a screen and a paint chip never look exactly the same. A screen gives off light, while paint reflects it, and both depend on the light in the room. Use the picked value to narrow the choice, then compare real samples in the place where the colour will be used.

For print, the CMYK row gives a simple conversion that is fine for a first draft. A printer working with a colour profile may adjust it. Sharing the HEX or Lab value alongside the CMYK numbers gives them the full picture of the colour you want.

For developers, each row of the colour panel is ready to paste. The HEX, RGB, RGBA and HSL rows are written in CSS syntax, so they go straight into a stylesheet, a style attribute or a design token file. The HSV and CMYK rows use the same pattern for easy reading, but they are not CSS values; use them in design programs instead.

The Lab row is written the way CSS writes Lab colours, with spaces between the numbers. Modern browsers understand lab() in CSS, but older ones do not, so keep the HEX value as a fallback if you use it. The decimal row is the 24-bit number of the colour, which some APIs, game engines, chat bots and spreadsheets expect.

When you export the palette as CSS variables, you get a :root block with one variable per colour. With Tailwind, you get a colors object you can paste into the theme section of your config. The JSON file is a simple list of objects with hex and name, which is easy to load in JavaScript, Python or any other language.

A quick routine for a new project: paste the screenshot of the design, pick each colour once, rename the exported variables to their roles, and check the text pairs with the contrast line. That gives you a tested set of colour tokens in a few minutes.

The tool can be used with a keyboard alone. Press Tab to reach Select a picture and press Enter to open the file dialog. After the picture opens, Tab to the picture, move with the arrow keys and press Enter or Space to pick. The copy buttons, sample and zoom buttons and palette buttons can all be reached with Tab.

Every copy button has a label that names the value it copies, such as Copy HEX, and every swatch has a label with its HEX code, so screen readers can tell them apart. The text in the large swatch switches between black and white, whichever is easier to read on the current colour.

The contrast line is useful for accessibility work in its own right. Pick the text and background colours from a screenshot of any page and you get the WCAG ratio and verdict for that pair straight away.

A colour picker is also a good way to learn how colour works on screens. Pick a colour, look at its RGB numbers, then click the tints and shades and watch how the numbers move. Tints raise all three numbers towards 255, and shades lower them towards 0.

Compare HSL and HSV for the same colour. Both share the hue, the angle on the colour wheel, but they describe brightness in different ways. Pure red is hsl(0, 100%, 50%) and hsv(0, 100%, 100%). Seeing both side by side makes it clear why some programs feel different when you pick colours.

Lab is worth a look too. Two colours with the same L value have about the same lightness to the eye, even if one is yellow and the other is blue. That is why designers use Lab, and ΔE, when they want colours that look balanced next to each other.

A colour often leads to another job. To make a picture smaller before you share it, use Compress Image or Resize Image. To cut out just the part you need, use Crop Image. To take away the background around a product or a person, use Remove Background, and then pick the colours of the subject on a clean picture.

If an iPhone photo will not open in another program, turn it into a common format with HEIC to JPG, or change any picture between formats with Convert Image. To turn a logo into a vector, try PNG to SVG. To put text in a picked colour on a picture, use Add Text to Image.

If you plan to share the original picture, Remove Metadata takes out hidden details such as the camera and the location first.

Your picture is not uploaded. The page reads the file with your browser, draws it on a canvas and reads its pixels on your own device. Nothing about the picture reaches our servers.

The only things the page stores are your picked colours and your sample size, and they are kept in your browser's local storage, not on a server. Clear them with the Clear button, or by clearing the site data in your browser.

Because nothing is uploaded, you can safely pick colours from private screenshots, unreleased designs, client work or personal photos.

When you add a picture, the browser decodes it and the page draws it on a canvas at full size, up to 8000 pixels on the longer side. The raw pixel data of that canvas is kept in memory. Every pick, every move of the magnifier and every average reads from that data, which is why the values do not change with zoom.

The values are worked out with standard formulas: HSL and HSV from RGB, CMYK with the simple ink formula, and Lab through the sRGB to XYZ conversion with a D65 white point. The nearest name is found by comparing the colour with every name in the list using ΔE 2000. Contrast uses the WCAG relative luminance formula.

The main colours come from a median cut over tens of thousands of pixels spread evenly across the picture, followed by a merge of groups that look alike. All of this runs in the page in a moment, even on a phone.

Zoom to 400% or 800% and use the arrow keys for small details such as thin lines and text.

Use 1 px for screenshots and logos, 3×3 or 5×5 for photos.

Pick from the centre of an area, not its edge, where colours blend.

Use PNG screenshots when you need exact values; JPG adds small changes.

Check contrast before you use a picked colour for text.

Export the palette as soon as it is finished, because it is kept only in this browser.