Find out html color online. Quickly determine color online: no problem and very easy

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 the presentation in the form of three pairs of hexadecimal digits, in which each pair represents a different 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. Simply move the mouse to the 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.

HEX/HTML

HEX color is nothing but a hexadecimal representation of RGB.

Colors are represented as three groups 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 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.

Type of software: Color detection
Developer/Publisher: Vlad Polyanskiy
Version: 1.0
iPhone + iPad: 33 rubles [Download from App Store]

There are so many important and interesting things in life! Color names are not one of them. Remember the differences of some ecru from camel needed only by some people of very specific professions. For everyone else, it’s enough to have on hand Colorimeter. This is an iPhone application that determines color from a photo, giving you maximum information on each shade.

Remember when you were looking for wallpaper of a certain color? Or a piece of clothing for a specific dress code? Or maybe you need an interior detail that would fit exactly into the colors of the furniture or add accents? A new one will help solve all these and other small household problems. domestic application Colorimeter for iPhone.

Every tenth man experiences color blindness - the inability to distinguish colors. Almost everyone else has trouble distinguishing between varieties of red. AND nobody none of us really know what color wallpaper is on the walls of our own home. The list of shades doesn't end with the typical crayon colors from childhood. Color table umber or wallpaper Grullo suit- not a slippery translation from another language, but the real names of the real colors of the objects that surround you.

Colorimeter It works simply. Launch the program, take a photo and move your finger over it. Virtual magnifying glass analyzes the color at the point of contact and gives its cultural name.

After running around the house with your iPhone and learning a lot of new words, you begin to realize the benefits of practical application applications. You can imitate the sound. It is also not difficult to describe the shape of objects in words. But it’s almost impossible to explain how the shade of gray you like differs from the one your interlocutor imagines. And this is where it comes in handy color base Colorimeter.

For example, you need to buy wallpaper of a certain color. Or even worse: someone another you have to buy wallpaper, and you are sitting in anticipation that in the evening a dozen rolls of wallpaper will be delivered to your home in a completely different shade than you dreamed of. By taking a photo of the item and choosing the shade closest to it, you will be sure that your partner or repair assistant knows exactly what color it is. What need to buy.

Sometimes even the slightest deviation in color can become critical. For example, when choosing paint. A title or image is no longer enough. We need standards and numbers. It’s good that Colorimeter has all this too. Clicking on a color name will open it detailed description . Here are the shade parameters in the most popular color models - RGB (digital image) And CMYK, for print.

If we're talking about not about liquid paints and colors, but about virtual ones, designers will appreciate both additional parameters – H.S.B.(hue, saturation and brightness) and HEX-color code for websites. In addition, the application shows the three most suitable colors in known system Pantone, knowing which, it will be much easier for you to conduct a dialogue with a manufacturer or seller of furniture and decor.

To the developers Colorimeter there are several suggestions for further development. reference Information by color should be copied to the clipboard or at least highlighted as text - this will help quickly exchange information with people via iMessage or email, and not send them a thick screenshot. And in the interface of the built-in camera, a switch for the flash would not hurt, because now it fires automatically, which is not always good.

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 for adjustments. color range 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 installation 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 required file with the image and click "Download". 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 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 of the pixel color.

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

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 the site exactly the same as the color blue sky On 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 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 selection 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.