Pipette program for determining color. App Store Colorimeter

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 design;
— If you create a new advertising unit that matches the color palette of the site;
— If you are creating a color scheme of 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 the required browser plugin, 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 will 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 of the white background that 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!

Probably one of the first utilities of this kind, but, nevertheless, it does not lose its popularity among webmasters.
The program shows the HTML code of the selected color and, conversely, indicates the color by code.

To determine the color on the monitor, click on the Screen button, point the pointer at the desired point, and click once on this place. The HTML Code field will display the color in HTML Code. All that remains is to copy this code to the clipboard and paste it into the desired location.
Advantages: the program weighs very little and is extremely simple

Color Picker program

The advantage of this program is that it displays colors in RGB or HSL code, and of course, in HTML.

To determine the color, you need to click on the "Select Color with Mouse" button, the mouse cursor will take the shape of an eyedropper, all you have to do is move the cursor to the desired location and click on it. The program is compatible with versions of Windows XP and higher.
Requires installation on a computer.

Just Color Picker

I think she's my favorite. Specifically, what helps me a lot is that after capturing a color, a bar appears in the interface with variable tonality and brightness of that color. Those. I can move the mouse over the strip and grab a few more similar colors, for example, slightly brighter, for later selection of the optimal one.

  • When you first start it prompts you to select a language, Russian is present.
  • Just Color Picker's interface includes a screen magnifier.
  • Allows you to save multiple colors.
  • Takes readings not with a mouse click, but with the hot keys Alt+X (by default), which allows you to more accurately determine the color
  • After defining a color, the program will automatically determine additional colors that will be in harmony with the selected one and which can be used in the design.
  • Does not require installation, runs in the background.

The program is compatible with versions of Windows XP and higher.

Also worth noting is the free program ColorPic 4.1. Its only drawback is that it requires installation on a computer, i.e. cannot run in the background.

But it has more than enough advantages. The program is not entirely simple, so a description and instructions for working with it are provided on this site in a separate article

Very often, when working with websites and images, you need determine the color any point on your monitor screen.

For example, you want to make the background color on your website exactly the same as the color of the blue sky in the photo. Or make the heading font the same color as sea green. Or vice versa, use the font color as the background to create a banner. In short, there are many options. Careful selection of colors means a lot both in web design and in the work of a webmaster.

Determining a color means finding its code. Then the code, depending on your goals, can be used both in various graphic editors and directly in the html code.

Most often it is used, in which the code can be represented in decimal and hexadecimal systems.

It is very convenient to use a pipette to determine color. But, besides this program, there are others with which you can do this.

Adobe Photoshop Eyedropper

I think few users of this program know that using it you can determine the color not only any point in the picture opened in the editor, but also any point on your monitor screen.

This is done very simply. Open, create an image in it, and, without releasing the left mouse button, move the eyedropper cursor to where the point you selected is located. This can be any point outside the program window. As you move the cursor, you will see how the drawing color changes in the color palette. After selecting the desired point, release the mouse button. Click on the drawing color box on the color palette and see the code for your color.

This method of determining color is convenient because it does not require the installation of any additional programs except Photoshop, which most users already have installed.

HEX/HTML

HEX color is nothing but a hexadecimal representation of RGB.

Colors are represented as 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 the 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 have 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.

The RGBA color value is specified as: 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, color palettes, and 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 that color that makes up the color combination, or more precisely, the size of the screen dot that is output on the phototypesetting machine on film of that color (or directly on the printing plate 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.

When working with images, you often need to accurately determine the color of a pixel. This is needed for image correction or in design work to adjust the color scheme of the background, panels or buttons of your Internet page or website.

This service will allow you to find out the color of a dot online without downloading and installing additional programs. Working in our online eyedropper service, you can quickly and easily find out the color of any part of the image.

To do this, you need to upload a picture to the site. To download the file, click the "Browse" button. Select the desired image file and click "Upload". As soon as the image loads, you will see it on the screen. Then you need to move the cursor over the pixel whose color you want to determine. In a separate window, you will be able to see the pixel color, and the Current Value field will display the corresponding pixel number in the HTML and RGB color of the pixel.

The service provides for saving the color code in HTML and RGB color format. To do this, you need to move the cursor over the desired pixel and click the left mouse button. In the “Saved Values” field in a separate window, you can see the pixel color, as well as the saved pixel code values ​​in HTML and RGB color format.

Reviews

Yes it seems good, thanks
Normal
masterpiece
weight
We helped you a lot loys
mob_info