Automatic color detection. App Store Colorimeter


As a rule, the tool for determining the color of pixels, or as it is also called the “eyedropper,” works without leaving the window graphic editor. To break the boundaries and be able to find out the color of any pixel on the screen, use the Just Color Picker eyedropper program. The program not only determines the color in any area of ​​the monitor screen, Just Color Picker is a color determiner that surpasses the capabilities of the standard graphic editor eyedropper and significantly expands functionality such a tool. This useful utility will help save time and become a good helper web master, designer, artist, developer and anyone else whose field of activity is related to artistic and digital creativity.

Eyedropper program with a history of selected colors

With the Just Color Picker program it is convenient to create a palette of colors for use in a design project. Key Feature An application that distinguishes the eyedropper program from related and similar eyedropper programs is that the utility maintains a history of the colors selected by the user, which can be saved to a file on disk. This allows you to create a color map and then select colors from it for text, background, fill and underline individual parts presentations, achieve and achieve harmony in the overall color scheme and in each separate element design implementation.

When Just Color Picker is launched, the application scans the area around the mouse pointer and displays it in its window. For more precise “targeting” of pixels in the program, you can set the magnification factor from 3 to 15 times. Just Color Picker detects color and can encode and present it to the user in HTML, RGB, RGB, HEX, HSB/HSV, HSL (255) and HSL (240) formats. Move your mouse to the color you need to find out, press Alt+X and the utility will immediately supplement the list of previously selected colors with a new one located under the mouse cursor and display its code designation. You can write a comment for each color present in the history journal. By selecting the additional “Text” tool from the program menu, you can preview how a heading or paragraph with the selected character color and font option will harmonize and combine with the background. Just Color Picker is equipped with simple and clear interface, takes up a small amount of memory, does not require installation and is absolutely free.

Screenshots of the Just Color Picker program

If you have your own website, then, willingly or unwillingly, you will have to master the tools and skills of various Internet professions. The designer's tools will have to be studied especially carefully, since the path to the reader's heart lies through a professional image. Beautiful and well-chosen pictures on your website increase the likelihood of reading information, that’s a fact! The fact that these pictures must be unique is also an irrefutable fact. In order to learn how to make pictures on our own, we must learn a lot of details, and one of them is determining the color of any element on an Internet page. Today we will talk about how to find out the background color on a page.

I know that there are a lot of other methods and tools, but I am sharing my practical experience in creating pictures. If you are not a professional designer, then this article will be very useful for you in your future work. You can recognize color on a page using a useful plugin ColorZilla for Mozilla Firefox and Google Chrome browsers.

When do we need this tool?

— If you are designing a website;
— If you create a new ad unit that matches color palette sites;
- If you are making color scheme styles for the site;
— If you are busy drawing elements of a virtual project;
— If you create any image;
— In all other cases when you need to determine the color of a pixel without running large-scale and resource-intensive programs such as PhotoShop or ColorDraw.

How to use ColorZilla?

Everything is very simple! Go to the website, click on the left icon and select the tab that you most need:

— Mozilla Firefox(browser tool);
— Google Chrome(browser tool);
— Gradient Generator (online tool).

Download required plugin for the browser, and after installation the extension icon will always be in your browser panel. Don't forget to activate the plugin, just click on the icon.

How to use the ColorZilla extension

I'll write in simple words about how I work with this extension. When creating or editing a picture in the Canva editor, which you can read more about if you follow this link, it may be necessary to add a background that is the same as the original image. In the picture you can see that on the right side there is a part white background, which could be colored to match the background color of the picture. Without such an extension at hand, it is very problematic to do this, perhaps using a selection method, which will not give 100% identity. By clicking on the eyedropper in the extension, and then left-clicking on any pixel in the image, a great tooltip appears at the top that gives me the color code in hexadecimal and RGB.

To work with the Canva editor, I only need hexadecimal format. I copy it, and then in the Canva editor I enter the value of this color, and I am very pleased with the result. So, in just a couple of movements I can select an identical color, thereby adding uniqueness to the original picture by changing its size.

I suggest you sit for a while and get acquainted with all the tools in this extension that are in the menu. You are sure to find a couple of them that you will use with particular pleasure. And you will master the rest over time. You know better than me that in a picture you can change not only the background, but also that there is a need to write something. Choosing the right font color is also not as simple as it seems at first glance. You might prefer a palette or gradient generator rather than an eyedropper. I am sure of one thing: with ColorZilla, all issues can be resolved very quickly.

As always, it’s better to see once than to read a hundred times! Therefore, I suggest watching a video in which you will learn how to install the ColirZilla extension and use it in your work. I wish you pleasant viewing and beautiful unique pictures!

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.

  1. h1 ( color: #ff0000; ) /* red */
  2. h2 ( color: #00ff00; ) /* green */
  3. h3 ( color: #0000ff; ) /* blue */
  4. 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%).

  1. h1 ( color: rgb(255, 0, 0); ) /* red */
  2. h2 ( color: rgb(0, 255, 0); ) /* green */
  3. h3 ( color: rgb(0, 0, 255); ) /* blue */
  4. 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).

  1. h1 ( color: rgb(0, 0, 255); ) /* blue in regular RGB */
  2. h2 ( color: rgba(0, 0, 255, 1); ) /* the same blue in RGBA, because opacity: 100% */
  3. h3 ( color: rgba(0, 0, 255, 0.5); ) /* opacity: 50% */
  4. h4 ( color: rgba(0, 0, 255, .155); ) /* opacity: 15.5% */
  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%).

  1. h1 ( color: hsl(120, 100%, 50%); ) /* green */
  2. h2 ( color: hsl(120, 100%, 75%); ) /* light green */
  3. h3 ( color: hsl(120, 100%, 25%); ) /* dark green */
  4. 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).

  1. h1 ( color: hsl(120, 100%, 50%); ) /* green in normal HSL */
  2. h2 ( color: hsla(120, 100%, 50%, 1); ) /* the same green in HSLA, because opacity: 100% */
  3. h3 ( color: hsla(120, 100%, 50%, 0.5); ) /* opacity: 50% */
  4. h4 ( color: hsla(120, 100%, 50%, .155); ) /* opacity: 15.5% */
  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.

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.

  1. We point at the required location on the screen, high magnification.
  2. 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.


2024 gtavrl.ru.