Find out the color from the photo. How to find out the background color on a page? Choose ColorZilla

Useful tips

Surely web designers and graphic artists have come across different colors or images online that they would like to use in their own projects. It is impossible to remember every color variation, and the eyedropper tool is designed to help them with this, which more than one designer cannot do without!

With it, you simply click anywhere on the screen if you want to copy a particular color for your own needs, including creating palettes and color schemes.

In this regard, we would like to talk about 25 useful tools for Windows, Mac, Firefox, Chrome, iPhone and Android.

Now you don't have to remember the color: just “grab” it and get to work!

Windows Applications

Instant Eyedropper - free tool, which helps you find the HTML color codes of any pixel on your screen. With one click, the code will be copied to the clipboard, after which it can be pasted into the desired location.

An easy-to-use tool that attaches a screen magnifier to your cursor. Using it, you can enlarge a specific pixel on the screen. Eye Dropper 3.01 shows RGB, CMYK and HEX color values.

In addition to finding the color value of any pixel on your screen, Eyedropper allows you to measure the distance between pixels. For this purpose, you can use zoom so that the calculations are extremely accurate. The color value is automatically saved to the clipboard. Available formats include HEX, RGB and CMYK.

This tool perfect for monitors with high resolution. It includes a screen magnifier so you can examine the color you're interested in in more detail. Palettes can store up to 16 colors. You will also have 4 advanced color mixers at your disposal, significantly expanding your capabilities. Moreover, there are many updated functionality, such as blending and aligning colors, viewing a safe version of each color, and a resizable zoom area.

Quick HTML Color Picker is a free tool for getting color on any screen with the ability preview before making the final choice. Color will be presented in RGB formats and HTML and copied to the clipboard.

ColorPix selects the colors on your screen and displays them in RGB, HEX, HSB and CMYK formats. There is a built-in screen magnifier that allows for more detailed and thorough viewing. The values are automatically copied to the clipboard.

Just Color Picker is not just your average color picker - it shows colors in HTML, RGB, HSB/HSV and HSL formats. Just Color Picker uses a screen magnifier with three options, color schemes RGB and RYB to demonstrate triads and complementary colors, finding matching colors, color code conversions and more!

This is a very simple color selector representing colors in RGB, HEX, HTML and WinAPI formats. You can copy one or all of them to the clipboard. The tool can be minimized to an alert panel.

Color Cop may be a small tool, but it boasts richness available options. You can use the eyedropper to pick up a color anywhere on the screen, and use the screen magnifier to zoom in. Colors are available in formats such as HTML hex, Delphi hex, Powerbuilder, Visual Basic, Clarion, Visual C++, RGB float and RGB int. You can save up to seven colors in history, find additional and “web-safe” colors, position the application in the taskbar icon area, and much more.

ColorMania allows you to select a color anywhere on the screen. There is also a magnifying glass for more careful selection. Colors can be shown in RGB, HSV, HSL and CMYK values. Plus, you can save up to six colors in the palette.

Addons for Firefox

PixelZoomer is a great addon for “capturing” colors and converting them into HEX code. It differs from similar tools in that it represents the web page as a screenshot and zooms in pixels using a new CSS element.

The only difference between ColorZilla and a regular eyedropper tool is that it resides in your browser. With this Firefox addon, users can get the color of any pixel directly in their browser. The built-in palette allows you to select colors from specific color sets and save the most frequently used ones in a custom palette.

Rainbow Color Tools includes elements such as a resolver that extracts images and CSS from the current web page; a grabber that collects colors in RGB and HSV values; a control program that gets the color of any pixel in the browser; and finally, a library that sorts the stored colors by tags or page url, on which the color was found.

This is one of the most advanced tools from Nvu for Firefox. It is quite simple to use: you just click and get the color. Colors are presented by name and in HEX format. With Rainbowpicker you can change hue, saturation and brightness, which in turn allows you to create many color variations.

Mac apps

What makes ColourMod unique is that it is available in five different versions: Konfabulator, ColorMod V1.9, ColourMod V2.2, Unbranded and Personalized. Each version is designed to suit your needs. Konfabulator is a version for desktop computer, available for Mac and Windows. ColorMod V1.9 is a Mac dashboard widget. ColourMod V2.2 – plugin for web applications. Unbranded removes ColourMod's branding, while Personalized allows you to add your own logo to the app.

DigitalColor Meter is a tool for Mac OS X. If you drag your mouse across the screen, it will show the color value of any pixel. You can set the format in which the color will be shown (RGB, YUV or CIE).

Uncomplicated and very useful application. It describes itself as “the color tool the Mac has been missing.” It is located in the main menu until you call it hotkey. ColorSnapper uses a screen magnifier for greater accuracy in selection. Specified color is automatically copied to the clipboard and can be used again later. Moreover, you will have about 13 different formats at your disposal.

Hex Color Picker adds an additional tab to the system-wide color panel, and you can immediately see the hex code of any color. You also have the option to change the color using a set of shortcuts and use the preview option.

A very simple tool showing RGB and HEX values. If you wish, you can add restrictions so that the slider only shows safe colors. This tool is used in the color panel of most Cocoa and Carbon applications.

Everything is extremely simple and clear: Pipette gives you the opportunity to take any color and copy it in HEX format. The application will not take up much space on your device, and you should not have any difficulties using it.

Chrome Extensions

With colorPicker, you can grab colors from any web page, save them, and copy them to your clipboard. Colors are available in the following values: HSB, RGB and CMYK. Web developers will find a lot here for themselves additional functions, including the ability to check compatibility with WCAG 2, settings in the “eyedropper” area and the presence of DOM-Explorer for quick search elements and tags on the page.

This extension not only allows you to select colors on any web page, but also place rulers, pointers and a scale on it. Rulers, Guides, Eye Dropper & Color Picker has a wide range of options for rulers, pointers and scales, but the color selector works great on its own.

Eye Dropper is a great extension with an advanced color selector, providing HSV, RGB and HEX of the resulting color. Colors are stored in your history so you can use them later if needed or copy them to the clipboard.

Color Pick is an incredibly simple eyedropper tool with built-in magnifier. The extension will store the color you specify until you select a new one. Colors are available in RGB, HSL and HEX formats.

iPhone apps

If you're a developer and have an iPhone, Loupe can help you find inspiration wherever you are. With it, you can take colors from photos in your gallery or from pictures you've just taken. You can then create color cells, save color values, and add notes to help you remember important details.

This color selector is well suited for creating and then working with palettes on the iPhone. It converts formats within RGB, HSB and CMYK. You can take colors from your camera, photo gallery or Flickr. Palettes can be shared via Email, and, in addition, they are compatible with Adobe Illustrator, Adobe Photoshop and Microsoft Word.

Android Applications

This powerful color selection tool is indispensable for designers, programmers and artists. It supports 7 different modes with RGB, HSV, HSL and YUV color models. You can use both the palette and the slider. Colors are presented in decimal and HEX.

LifeDropper is an Android app that can tell you the colors of real objects using your device's camera. Colors are shown in RGB, CMYK and HEX values.

That's all!

Which of the 25 “pipettes” presented in our article did you like the most? Perhaps you use a tool that is not included in our list? If so, tell us about it!

One day a man taught a computer to determine color by code. It's simple - the code is equal to the color and the color is equal to the code. #FFFFFF = "white", "black" = #000000. And now the computer displays a color on the monitor and you need to find out the color code in order to use the same color in another program. How to find out the color code? To do this, you need a “pixel color detector” or, in other words, a “pipette program”. The ColorPic program is an instant determination of the color code at any point on the monitor screen. The utility recognizes the color and shows its code in hexadecimal and decimal format. The ColorPic utility is useful and will serve the designer and developer well.

Determine pixel color

The colors determined by the program can be stored in a separate palette of 16 colors for memorization. The user can always return to the compiled map of the colors found; the palette is available even after restarting the program. ColorPic captures a fragment of the screen around the mouse pointer and displays its enlarged image in its window, while the scaling factor of the captured image can be changed from 2 to 36. After launch, the program determines the color and its code designation of the pixel located under the mouse cursor anywhere on the screen. To add a color to the palette, ColorPic implements the Ctrl+G key combination.

HEX/HTML

HEX color is nothing but a hexadecimal representation of RGB.

Colors are presented in the form of three groups of hexadecimal digits, where each group is responsible for its own color: #112233, where 11 is red, 22 is green, 33 is blue. All values must be between 00 and FF.

Many applications allow a shortened form of hexadecimal color notation. If each of three groups contains the same characters, for example #112233, then they can be written as #123.

h1 ( color: #ff0000; ) /* red */
h2 ( color: #00ff00; ) /* green */
h3 ( color: #0000ff; ) /* blue */
h4 ( color: #00f; ) /* same blue, shorthand */

RGB

The RGB (Red, Green, Blue) color space consists of all possible colors that can be created by mixing red, green, and blue. This model is popular in photography, television, and computer graphics.

RGB values are specified as an integer from 0 to 255. For example, rgb(0,0,255) is displayed as blue because the blue parameter is set to its highest value (255) and the others are set to 0.

Some applications (particularly web browsers) support percentage recording of RGB values (from 0% to 100%).

h1 ( color: rgb(255, 0, 0); ) /* red */
h2 ( color: rgb(0, 255, 0); ) /* green */
h3 ( color: rgb(0, 0, 255); ) /* blue */
h4 ( color: rgb(0%, 0%, 100%); ) /* same blue, percentage entry */

RGB color values are supported in all major browsers.

RGBA

Recently modern browsers learned to work with the RGBA color model - an extension of RGB with support for an alpha channel, which determines the opacity of an object.

Meaning RGBA colors is specified in the form: rgba(red, green, blue, alpha). The alpha parameter is a number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).

h1 ( color: rgb(0, 0, 255); ) /* blue in regular RGB */
h2 ( color: rgba(0, 0, 255, 1); ) /* the same blue in RGBA, because opacity: 100% */
h3 ( color: rgba(0, 0, 255, 0.5); ) /* opacity: 50% */
h4 ( color: rgba(0, 0, 255, .155); ) /* opacity: 15.5% */
h5 ( color: rgba(0, 0, 255, 0); ) /* completely transparent */

RGBA is supported in IE9+, Firefox 3+, Chrome, Safari, and Opera 10+.

HSL

The HSL color model is a representation of the RGB model in a cylindrical coordinate system. HSL represents colors in a more intuitive and human-readable way than typical RGB. The model is often used in graphics applications, in color palettes, and for image analysis.

HSL stands for Hue (color/hue), Saturation (saturation), Lightness/Luminance (lightness/lightness/luminosity, not to be confused with brightness).

Hue specifies the position of the color on the color wheel (from 0 to 360). Saturation is the percentage value of the saturation (from 0% to 100%). Lightness is a percentage of lightness (from 0% to 100%).

h1 ( color: hsl(120, 100%, 50%); ) /* green */
h2 ( color: hsl(120, 100%, 75%); ) /* light green */
h3 ( color: hsl(120, 100%, 25%); ) /* dark green */
h4 ( color: hsl(120, 60%, 70%); ) /* pastel green */

HSL is supported in IE9+, Firefox, Chrome, Safari, and Opera 10+.

HSLA

Similar to RGB/RGBA, HSL has an HSLA mode that supports an alpha channel to indicate the opacity of an object.

The HSLA color value is specified as: hsla(hue, saturation, lightness, alpha). The alpha parameter is a number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).

h1 ( color: hsl(120, 100%, 50%); ) /* green in normal HSL */
h2 ( color: hsla(120, 100%, 50%, 1); ) /* the same green in HSLA, because opacity: 100% */
h3 ( color: hsla(120, 100%, 50%, 0.5); ) /* opacity: 50% */
h4 ( color: hsla(120, 100%, 50%, .155); ) /* opacity: 15.5% */
h5 ( color: hsla(120, 100%, 50%, 0); ) /* completely transparent */

CMYK

The CMYK color model is often associated with color printing and printing. CMYK (unlike RGB) is a subtractive model, meaning that higher values are associated with darker colors.

Colors are determined by the ratio of cyan (Cyan), magenta (Magenta), yellow (Yellow), with the addition of black (Key/blacK).

Each of the numbers that define a color in CMYK represents the percentage of ink of a given color that makes up the color combination, or more precisely, the size of the screen dot displayed on a phototypesetting machine on film of a given color (or directly on printed form in the case of CTP).

For example, to obtain the PANTONE 7526 color, you would mix 9 parts cyan, 83 parts magenta, 100 parts yellow, and 46 parts black. This can be denoted as follows: (9,83,100,46). Sometimes the following designations are used: C9M83Y100K46, or (9%, 83%, 100%, 46%), or (0.09/0.83/1.0/0.46).

HSB/HSV

HSB (also known as HSV) is similar to HSL, but they are two different color models. They are both based on cylindrical geometry, but HSB/HSV is based on the "hexcone" model, while HSL is based on the "bi-hexcone" model. Artists often prefer to use this model, it is generally accepted that the HSB/HSV device is closer to the natural perception of colors. In particular, the HSB color model is used in Adobe Photoshop.

HSB/HSV stands for Hue (color/hue), Saturation (saturation), Brightness/Value (brightness/value).

Hue specifies the position of the color on the color wheel (from 0 to 360). Saturation is the percentage value of the saturation (from 0% to 100%). Brightness is a percentage of brightness (from 0% to 100%).

XYZ

The XYZ color model (CIE 1931 XYZ) is a purely mathematical space. Unlike RGB, CMYK, and other models, in XYZ the principal components are “imaginary,” meaning you cannot associate X, Y, and Z with any set of colors to mix. XYZ is the master model for almost all other color models used in technical fields.

LAB

The LAB color model (CIELAB, “CIE 1976 L*a*b*”) is calculated from the CIE XYZ space. Lab's design goal was to create a color space in which color changes would be more linear in terms of human perception (compared to XYZ), that is, so that the same change in color coordinate values in different regions of the color space would produce the same sensation of color change.

This question has probably arisen more than once in a web designer, developer or simple user computer. Often there is a need to select the color used on some object, for example a website or just a point on a monitor screen.

There are several basic ways to represent colors, such as when each color or shade is designated HTML code and color palette RGB as #FF7700. This is represented in the form of three pairs of hexadecimal digits, in which each pair is responsible for its own color:
the first two digits are red, i.e. — R(red)
two in the middle - green - G (green)
last two digits - blue - B (blue)
Quite often they use a sneaky representation of the color in the form of three characters #F70, which would be equivalent to #FF7700.

By the way, on web resources colors are usually specified in CSS styles.

Let's move on to the answer to main question — How to find out the color of a pixel on a monitor screen or picture?

There are many ways...

Method 1. Find out the color in Photoshop

So, let’s take a “screenshot” by pressing a key on the keyboard - Print Screen(PrtSc), in the place where we want to find out our color code. When you press the key, the system will save the snapshot to the clipboard. You can simply copy the image, for example from a browser, without PrtSc. Now all that remains is to paste the image from the buffer into Photoshop.

Open Photoshop and insert an image (File - New, Editing - Insert). We look for “Pipette” on the toolbar (Key I), then left-click in the area in which we want to “remove” the color. All is ready! Now all that remains is to go to the palette and find out the color code.

Method 2. Find out the color in Paint

Go to Paint - insert a picture - use the "palette" tool - go to "change colors":

In our case, red is 252, green is 168, blue is 10, i.e. RGB(252,168,10) or in HEX format #FCA80A.

Method 3: View the element code in the browser

I will describe the method for Opera browser. Select an element on the site with the mouse and click on it right click mouse - “View element code” (Ctrl + Shift + C). A panel with html will open and css code, you will need to find something like "color".

Method 4. Using special tools or programs.

Exists a large number of special programs for color removal, I like a very simple program called "Pixie" with a weight of about 10-11 KB. The controls are very simple. You just need to point your mouse at desired point on the monitor screen and press the following keys - Ctrl + Alt + C, as a result color code will be copied to the clipboard.

The post will help you determine the color online using several sites, one is simply super, the rest have less functionality. The method will be useful for those who do not have the opportunity to use computer program, for example on a tablet.

Choice for sanstv.ru: will find the pixel code

Great, finally started doing it online services in Russian sanstv.ru, and here is the address, distinguishing feature splits the file down to the pixel. To start using it, please look at the screenshot.

You can insert a file for definition by pressing the PrtScr button, this will take a snapshot of the entire browser, but it will not be visible; to show it on the screen, press cntrl+f.
Or by simply dragging it from your computer into the editor window.
Can take photos from photos in good quality.
It’s convenient to find out the color on the website, I took a photo and pasted it.

After all the manipulations, you will see your illustration and a large increase. To determine the color code (name) you need to point at the required shade and see the combination.

We point at the required location on the screen, high magnification.
Number in two formations rgb and hex, both are used, but hex is more popular.

There are a lot of useful things here, for example, how to connect css as a layout designer. Created by an altruist, does not ask for money for use. Let's move on to other services.

Easily determine color online with imagecolorpicker.com

This site imagecolorpicker.com is easy to determine color online and works quickly. But simplicity comes with some limitations:

You cannot increase unless by pressing cntrl and +.
To determine the shade, you cannot use drag and drop and screenshots, only downloading.

The site is worthy of attention, the eyedropper is displayed by sight, don’t lose it.

Colorist imgonline.com.ua: will help you find out even your hair color

This site cannot indicate exactly what code is needed, it breaks it down into main components, here is the address. You will need a designer who cannot install a popular collage in an illustration. The report looks like this:

First, we write down the number of primary shades (namely, the pixels in the picture of which will be ordered in descending order). We set the compression, upload the image, and wait for processing. It may also be necessary for hairdressers, for example, to find out the hair color without poking, just upload an image of the hairstyle and the service will break it down into shade and name.

Stock getcolor.ru: does not work from the picture

I put getcolor.ru in the article because there are no contenders, a huge disadvantage: there is no search by image. Works on the basis of a simple tint circle and click selection. Move the slider in the desired direction and look at the rgb and hex parameters.

Although no, I found one plus, it can give a name to the color, look below, it gives out different ones every time. Usage: for example in catalogs and in html layout.

He told me about the most best resources, helping to determine color online without installing programs. Good luck.