Dark yellow color html. Working with the RGBA color model

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 have learned to work with color RGBA model - RGB extension 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). 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

Color model HSL 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 color's position 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

Color CMYK model often associated with color printing and printing. CMYK (unlike RGB) is a subtractive model, which means that more high values 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 a percentage of paint of this color, making up the color combination, or more precisely, the size of the raster 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, color model HSB used in Adobe Photoshop.

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

Hue specifies the color's position on the color wheel (from 0 to 360). Saturation is the percentage value of the saturation (from 0% to 100%). Brightness is a percentage value 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. When developing Lab, the goal was to create color space, the color change in which will be more linear from the point of view of human perception (compared to XYZ), that is, so that the same change in color coordinate values ​​in different areas color space produced the same sensation of color change.

Hexadecimal numbers are used to specify colors. The hexadecimal system, unlike the decimal system, is based, as its name suggests, on the number 16. The numbers will be as follows: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Numbers from 10 to 15 are replaced in Latin letters. Numbers greater than 15 in hexadecimal system are formed by combining two numbers into one. For example, the number 255 in decimal system corresponds to the number FF in hexadecimal. To avoid confusion in determining the number system, before hexadecimal number put the hash symbol #, for example #666999. Each of the three colors - red, green and blue - can take values ​​from 00 to FF. Thus, the color symbol is divided into three components #rrggbb, where the first two symbols indicate the red component of the color, the middle two - green, and the last two - blue. It is allowed to use the abbreviated form #rgb, where each character should be doubled. Thus, the entry #fe0 should be regarded as #ffee00.

By name

Browsers support some colors by their name. In table 1 shows the names hexadecimal code, values ​​in RGB format, HSL and description.

Using RGB

You can define a color using the red, green, and blue values ​​in decimal terms. Each of the three color components takes a value from 0 to 255. It is also possible to set the color as a percentage, with 100% corresponding to the number 255. First, indicate keyword rgb , and then the color components are indicated in parentheses, separated by commas, for example rgb(255, 128, 128) or rgb(100%, 50%, 50%).

RGBA

The RGBA format is similar in syntax to RGB, but includes an alpha channel that specifies the transparency of the element. A value of 0 is fully transparent, 1 is opaque, and intermediate value like 0.5 - translucency.

RGBA was added to CSS3, so CSS code must be validated against this version. It should be noted that the CSS3 standard is still under development and some features may change. For example, a color in RGB format added to the background-color property is validated, but one added to the background property is no longer valid. At the same time, browsers quite correctly understand the color for both properties.

HSL

Name HSL format formed from a combination of the first letters Hue (hue), Saturate (saturation) and Lightness (lightness). Hue is the color value on the color wheel (Fig. 1) and is given in degrees. 0° corresponds to red, 120° to green, and 240° to blue. The hue value can vary from 0 to 359.

Rice. 1. Color wheel

Saturation is the intensity of a color and is measured as a percentage from 0% to 100%. A value of 0% indicates no color and a shade of gray, 100% maximum value saturation.

Lightness specifies how bright the color is and is specified as a percentage from 0% to 100%. Low values ​​make the color darker, and high values ​​make the color lighter; extreme values ​​of 0% and 100% correspond to black and white.

HSLA

The HSLA format is similar in syntax to HSL, but includes an alpha channel to specify the element's transparency. A value of 0 is fully transparent, 1 is opaque, and an intermediate value like 0.5 is semi-transparent.

RGBA, HSL, and HSLA color values ​​have been added to CSS3, so please check your code for version validity when using these formats.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Warning

All lion catching methods listed on the site are theoretical and based on computational methods. The authors do not guarantee your safety when using them and disclaim any responsibility for the results. Remember, a lion is a predator and a dangerous animal!

Result this example shown in Fig. 2.

Rice. 2. Colors on the web page

I express my indirect gratitude to Google for the idea and offer the baton to my colleagues: it is necessary to share with readers foreign resources on web development from their RSS feed, who write substantively and interestingly on this issue. To reduce idle talk, you need to follow a number of simple provisions:

1. On your blog, publish a translation (you can freely, with comments and additions) of an article from the presented resource.
2. Translations, like their sources, should not be repeated to ensure coverage and diversity of information.
3. It is important to mention the blogger from whom the good news was received and, if possible, pass the baton further.
4. The timing of the relay is not set; There will definitely be someone who will stop this bacchanalia.

The original source of this post was one of Drew McLellan’s posts on the collective calendar blog 24ways. Let's go!

What is RGBA color?

I won’t reveal a secret if I say that it’s necessary color shade created in CSS way mixing red green and blue in the required proportions. There is, however, one nuance - no matter what color we choose, it will always be solid and opaque.

CSS3 offers a couple of new ways to specify color, one of which is using the RGBA color model. The "A" in the acronym stands for "Alpha"; its value is responsible for the transparency of the color. Using this model, we can establish not only the required combination of red, green and blue, but also determine how much the color “shines through.” Something similar can be observed when working with layers in Photoshop.

What is the opacity property for then?

The thing is that the definition of transparency for a color is different from the transparency setting for an element, set using css- opacity properties. Let's look at an example.

We have an h1 header with specific colors for text and background, located on a page with a background image.

H1 ( color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); )

By setting the opacity property, you can apply transparency to the entire element:

H1 ( color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); opacity: 0.5; )

The RGBA model provides us with a more flexible opportunity - to control only the color transparency, and not the entire element. For example, you can set transparency for just the background color:

H1 ( color: rgb(0, 0, 0); background-color: rgba(255, 255, 255, 0.5); )

Or leave the background unchanged and assign transparency only to the text:

H1 ( color: rgba(0, 0, 0, 0.5); background-color: rgb(255, 255, 255); )

It's probably less common to use rgb() syntax to specify a color than hexadecimal notation (like #fff), however, in in this case This is an absolute necessity because it is impossible to write an RGBA value in hexadecimal notation. Therefore, we set rgba() exactly like this:

Color: rgba(255, 255, 255, 0.5);

Just like in rgb(), the first three values ​​are responsible for the combination of red, green and blue. They can take both integer values ​​in the range 0–255 and percentages in the range from 0 to 100%. The fourth value determines the degree of transparency, ranging from 0 (completely transparent) to 1 (completely opaque).

You can safely use this method anywhere you normally set colors in CSS: background and text colors, borders, outlines, etc.

Browser support

Majority modern browsers(Firefox, Safari, Opera, Google Chrome) support RGBA colors, but not Internet Explorer.

There is nothing left to do but specify RGBA colors for browsers that support them, and come up with your own “crutches” for the rest.

CSS parsing works in browsers in such a way that if any unknown value is encountered when parsing the rules, it will be ignored. Let’s use this knowledge to render a normal opaque color for “non-understanding” browsers. To do this, it is enough to indicate the color in the format as the first ad. RGB, and the second set the color shade in the format RGBA— for browsers that support this color model.

H1 ( color: rgb(127, 127, 127); color: rgba(0, 0, 0, 0.5); )

In cases where you want to apply transparency to the background-color property, you can resort to using a PNG image with an alpha channel to achieve the exact same effect. Of course, this is a more expensive method, in contrast to “pure” CSS, since you will have to create your own PNG for each transparency level, but no fish, no fish.

We use the same principle as in the previous example: first we set the background for all browsers, and then we rewrite the line taking into account RGBA.

H1 ( background: transparent url(black50.png); background: rgba(0, 0, 0, 0.5) none; )

It should be noted that this design works because we use the shorthand form of background , which allows us to simultaneously set and background color And background image. Browsers encountering an unknown rgba() value will ignore the second line entirely and process the first declaration.

Something else

The main advantage of RGBA is the ability to create various design solutions without using drawings. The benefit here is not only lighter (and therefore faster) pages, but also time savings: sites using the mentioned technology are easier to create and maintain. Under the influence of Javascript or in response to user actions, values ​​in CSS can easily change. In our case, drawings can make such transformations difficult.

Div ( color: rgba(255, 255, 255, 0.8); background-color: rgba(142, 213, 87, 0.3); ) div:hover ( color: rgba(255, 255, 255, 1); background- color: rgba(142, 213, 87, 0.6 )

Judicious use of transparency for border colors will help some elements on the page look more organic:

Div ( color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); border: 10px solid rgba(255, 255, 255, 0.3); )

In conclusion

As is often the case, cutting-edge CSS innovations are supported by leading browsers. Let's hope that the guys from Redmond realize something in life and join the majority.