Yellow color css. Setting Color for Text in CSS

Color codes in CSS are used to specify colors. Typically, color codes or color values ​​are used to set a color for either the foreground of an element (eg, text, link color) or the element's background (background, block color). They can also be used to change button color, borders, marker, hover and other decorative effects.

You can set your color values ​​in various formats. The following table lists all possible formats:

These formats are described in more detail below.

CSS Colors - Hex Codes

Hexadecimal color code is a six-digit color representation. The first two digits (RR) are the red value, the next two are the green value (GG) and the last two are the blue value (BB).

CSS Colors - Short Hex Codes

Short hexadecimal color code is a shorter form of six-character notation. In this format, each digit is repeated to produce the equivalent six-digit color value. For example: #0F0 becomes #00FF00.

The hexadecimal value can be taken from any graphics software such as Adobe Photoshop, Core Draw, etc.

Each hexadecimal color code in CSS will be preceded by a "#" hash sign. The following are examples of the use of hexadecimal notation.

CSS Colors - RGB Values

RGB value is a color code that is set using the rgb() property. This property takes three values: one each for red, green, and blue. The value can be an integer, from 0 to 255, or a percentage.

Note: Not all browsers support the rgb() color property, so it's not recommended to use it.

Below is an example showing multiple colors using RGB values.

Color code generator

You can create millions of color codes with our service.

Safe Browser Colors

Below is a table of 216 colors that are the most secure and computer independent. These colors in CSS range from 000000 to FFFFFF hex code. They are safe to use as they ensure that all computers will display color correctly when working with the 256 color palette.

Look closely at the drawing. The background of the dropdown box is made translucent. This is a fairly common design technique. Let's think about how this can be implemented.

A task

Make crossbrowser translucent color.

Solution

The first thought in this situation is to use a png24 image for the background with the translucency already set. But this picture is completely redundant. You can do just fine without it (and therefore without an extra request to the server). Let's try to find the best solution.

The second thought is to use . But in this case it is not very convenient. After all, then not only the background, but also the inscriptions will become translucent. Yes, actually, all the window at once.

Of course, you can try to add an additional container and apply opacity only to it, but this HTML element will be for decoration only and will obviously be superfluous. Is it possible to do without it?

Of course! If you use RGBA.

RGBA color description format

CSS3 allows color to be specified using the RGB and RGBA functions. At the same time, we must indicate the share of each color component, under which one byte is allocated (from 0 to 255, suddenly someone does not know).

The syntax for this case is very simple:

background: rgb(0, 255, 0); /* pure green color */

For RGBA, a fourth parameter is added - alpha transparency (from 0 to 1).

Background: rgba(255, 0, 0, 0.5); /* pure red with 50% opacity */

Here it is, the solution to our problem. It is enough to set the background color using rgba and everything will look as we need. No extra pictures and elements!

Where can I get these numbers?

You can look at the constituent colors using the eyedropper tool in Photoshop.

About cross-browser compatibility

Since the RGB function is much older than RGBA and has been around since the days of the CSS2 standard, you can use the following duplicate construction to protect against the most ancient browsers:

SomeBlock ( background: rgb(255, 0, 0); background: rgba(255, 0, 0, 0.5); )

With this approach, the great-grandfathers of modern browsers will not have translucency, but the color itself will remain correct.

Separately, you will have to take care of IE. Donkey-like ones up to the 8th version inclusive do not understand RGBA.

As always: land - to the peasants, factories - to the workers, and donkeys - a crutch! As .

Of course, in combat conditions, we take out this rule in a separate CSS, which we include .

SomeBlock ( background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )

The trick is to specify the same start and end colors (ff0000 - red) and take advantage of the fact that you can set the alpha channel for the gradient in this filter (in the example, the value is 80).

For reference: the filter uses a hexadecimal system and the code FF corresponds to a completely opaque color (in decimal it is 255). Accordingly, hexadecimal 80 is decimal 128, i.e. 50% transparency.

Verified in:

• IE 6-9
• Firefox 3+
• Opera 10+
• Safari 4
• Chrome

Computer monitors, like the screens of mobile phones, smartphones and tablets, are made up of thousands of small squares called pixels (if you look closely at the monitor, you can see them). When the screen is off, it is black because it does not emit light; when it is on, each pixel takes on a different color, which creates the image that we see when looking at the screen.

When we set a color for an element's frame, background, or text, we're setting the color for the pixels they are composed of. There are two general approaches to specifying colors in CSS: by name or by value. The simplest is by name: red is red, blue is blue, and so on, but CSS doesn't provide many color names to choose from. On the other hand, specifying a color value implies a much larger selection of shades. There are several ways to specify a color value, the two most common being RGB and hexadecimal values. They have been part of CSS since the very first version and every web browser supports them. CSS3 introduced a few more options for defining colors: RGBA, HSL and HSLA, they are less cross-browser, but the latest versions of browsers already support them.

Color names

The simplest and most obvious way to specify a color in CSS is to select a predefined color name from a set of keywords. A total of 147 keywords with color names are available: 17 names are standard colors that were introduced in early versions of HTML (white, black, red, yellow, blue, green, orange, purple, gray, silver, aqua, fuchsia, lime, maroon, navy, olive and teal), and 130 more that were added in CSS2. You can see the full list of available color names in the HTML section of our color table.

RGB and RGBA

The RGB system uses three numbers that describe the relative amount of red, green, and blue that are mixed together to produce any given hue. The numbers can range from 0 to 255. Consider the RGB code for a dark purple color: rgb(204, 51, 255), which can be applied to a CSS font color property, for example:

Color: rgb(205, 51, 255);

The RGBA system adds another number that describes the transparency of the color, the value can range from 0 (fully transparent) to 1 (fully opaque). A value of 0.5 makes the color translucent, consider the translucent version of the dark purple color given by the RGBA system:

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

You can see that the red, green and blue color values ​​are similar to the RGB system. The fourth number - 0.5 is the degree of transparency. The "A" in RGBA stands for alpha channel, which is a graphic design term for transparency.

RGBA colors are useful for creating semi-transparent elements that allow the elements below them to be visible.

HSL and HSLA

The HSL (h ue, s aturation, lightness) system describes colors based on hue, saturation, and lightness. Here is the same dark purple color specified in HSL format:

Color: hsl(285, 100%, 60%);

The first number is the hue, expressed in degrees from 0 to 360, which determines the position of the color on the color wheel. The second number is saturation, defined as a percentage from 0% to 100%, indicating how saturated (bright) the color will be. The third number is lightness, it is defined as a percentage in the same way as saturation, lightness indicates how light or dark the color will be.

The HSLA system, like RGBA, adds a fourth number between 0 and 1 that specifies how transparent the color should be. A value of 0.5 makes the color semi-transparent, consider the translucent version of the dark purple color given by the HSLA system:

Color: hsla(285, 100%, 60%, 0.5);

Hexadecimal color values

The hexadecimal color code is the six characters after the # symbol:

Each set of two characters represents a number from 0 to 255. So the first two characters represent red, the next two represent green, and the last two represent blue. In this hex code is very similar to RGB, with the difference that here each color is specified in hexadecimal notation instead of decimal.

If each pair of digits consists of the same characters, then the color value can be shortened. However, if the hexadecimal code looks like this, for example, #bbff10, then such an entry cannot be abbreviated.

Color: #f00; color: #ff0000;

Note: Browsers that do not support these color values ​​(rgba, hsl and hsla) do not associate any color with the background or font, ignoring the declaration entirely. In this case, the element's background is set to the default value (it becomes completely transparent), and the text is set to either the default value (black) or the color inherited from the parent element.

For older versions of browsers, an additional rule should be added that defines the color in RGB format, a hexadecimal value, or using a name. Such a rule must come before a rule specifying an RGBA, HSL, or HSLA color. This will provide insurance for the color, because in CSS, if there are two rules that set a value for the same property, the rule set below in the code always takes precedence. This means that if the browser supports RGBA, HSL, or HSLA formats, then it will use the second rule, and if it does not, the first one.

Hexadecimal numbers are used to specify colors. The hexadecimal system, unlike the decimal system, is based, as its name implies, on the number 16. The numbers will be the following: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Numbers from 10 to 15 are replaced by Latin letters. Numbers greater than 15 in the hexadecimal system are formed by combining two numbers into one. For example, the number 255 in decimal corresponds to the number FF in hexadecimal. To avoid confusion in the definition of the number system, the hexadecimal number is preceded by the hash symbol #, for example #666999. Each of the three colors - red, green and blue - can take values ​​from 00 to FF. Thus, the designation of the color is divided into three components #rrggbb, where the first two characters mark the red component of the color, the two middle ones mark green, and the last two mark 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 name. In table. 1 shows the names, hex code, values ​​in RGB, HSL format and description.

With 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 acceptable to set the color as a percentage, while 100% will correspond to the number 255. First, the rgb keyword is specified, and then the color components are specified in brackets, 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 sets the element's transparency. A value of 0 is fully transparent, 1 is opaque, and an intermediate value like 0.5 is translucent.

RGBA is added to CSS3, so validation of CSS code should be carried out according to this version. It should be noted that the CSS3 standard is still under development and some of its features may change. For example, an RGB color added to the background-color property passes validation, but one added to the background property does not. At the same time, browsers quite correctly understand the color for both properties.

HSL

The name of the HSL format is 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 specified in degrees. 0° is red, 120° is green, and 240° is blue. Hue value can vary from 0 to 359.

Rice. 1. Color wheel

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

Lightness sets how bright the color is and is specified as a percentage from 0% to 100%. Small values ​​make the color darker, while high values ​​make it 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 that sets the element's transparency. A value of 0 is fully transparent, 1 is opaque, and an intermediate value like 0.5 is translucent.

Color values ​​in RGBA, HSL, and HSLA formats are added to CSS3, so when using these formats, check the code for validity against the version.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

A warning

All methods of catching a lion 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 result. Remember, the lion is a predator and a dangerous animal!

The result of this example is shown in Fig. 2.

Rice. 2. Colors on the web page

I express my indirect gratitude to Google for the idea and offer my colleagues a baton: you need to share with readers foreign resources on web development from your RSS feed, which write in a substantive and interesting way on this issue. To reduce idle talk, you need to follow a number of simple provisions:

1. On your blog, publish a translation (free, with comments and additions) of an article from the resource being presented.
2. Translations, like their sources, should not be repeated to ensure coverage and diversity of information.
3. It is a good idea to mention the blogger from whom the good news was received and, if possible, to pass the baton on.
4. Relay dates are not set; there will definitely be someone who will stop this bacchanalia.

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

What is an RGBA color?

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

CSS3 offers a couple of new ways to specify colors, one of which is using the RGBA color model. The "A" in the acronym stands for "Alpha"; its value is responsible for the amount of transparency of the color. With the help of this model, we can determine 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 the css-property opacity . Let's look at an example.

We have an h1 heading with specific colors for text and background 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 as a whole:

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

The RGBA model gives us a more flexible option - to control only the color transparency, and not the entire element. For example, you can set transparency to 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 to the text only:

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

It's probably less common to use the rgb() syntax to specify a color than hexadecimal notation (like #fff), but in this case it's an ironclad necessity since it's not possible 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 everywhere you usually set colors in CSS: for background and text colors, for borders, outlines, and so on.

Browser Support

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

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

CSS parsing works in browsers in such a way that if any unknown value is encountered during the parsing of the rules, it will be ignored. Let's use this knowledge to give non-understanding browsers the usual opaque color. To do this, it is enough to indicate the color in the first declaration in the format RGB, and the second set the color tint 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 exactly the same effect. Of course, this is a more expensive method, unlike “pure” CSS, since you will have to create your own PNG for each level of transparency, but there is a fish for fishlessness and cancer.

We use the same principle as in the previous example: first we set the background for all browsers, and then we rewrite the string with RGBA in mind.

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

It should be noted that this construction works because we are using a shorthand notation for background , which allows us to set both the background color and the background image at the same time. 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 the use of drawings. The benefit here is not only in lighter (as a result, faster) pages, but also in 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. Drawings in our case 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); )

Sensible 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); )

Finally

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