Purple html. Setting color using RGBA
Computer monitors, as well as screens mobile phones, smartphones and tablets, consist of thousands of small squares called pixels (if you look closely at the monitor, you can see them). When the screen is turned 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 we see when looking at the screen.
When we set a color for the frame of an element, background or text, we set the color specifically for the pixels of which they are composed. There are two general approaches for specifying colors in CSS: by name or by value. The simplest is to specify a name: red is red, blue is blue, and so on, but CSS doesn't provide many color names from which to choose. 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 several more options for defining color: RGBA, HSL and HSLA, they are less cross-browser friendly, but the most latest versions browsers already support them.
Flower 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 the early HTML versions(white, black, red, yellow, blue, green, orange, purple, gray, silver, aqua, fuchsia, lime, maroon, navy, olive and teal), and 130 additional ones that were added in CSS2. You can see the entire 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 amounts of red, green, and blue that are mixed together to produce any hue. The numbers can range from 0 to 255. Consider the RGB code for the color dark purple: rgb(204, 51, 255), for example it can be applied to CSS property responsible for the font color:
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 (completely opaque). A value of 0.5 makes the color semi-transparent, consider a semi-transparent version of dark purple, defined using 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 letter "A" in RGBA stands for alpha channel, which is a term from graphic design meaning transparency.
RGBA colors are useful for creating translucent elements that make the elements underneath them visible.
HSL and HSLA
The HSL (hue, saturation, lightness) system describes colors based on hue, saturation and lightness. Here's 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 color's position on the color wheel. The second number, saturation, defined as a percentage from 0% to 100%, indicates how saturated (bright) the color will be. The third number is lightness, it is defined as a percentage just like saturation, lightness indicates how light or dark the color will be.
The HSLA system, like RGBA, adds a fourth number ranging from 0 to 1 that determines how transparent the color should be. A value of 0.5 makes the color semi-transparent, consider the semi-transparent version of dark purple, defined using the HSLA system:
Color: hsla(285, 100%, 60%, 0.5);
Hexadecimal color values
The hexadecimal color code is the six characters following the # symbol:
Each set of two characters represents a number from 0 to 255. So the first two characters represent the color red, the next two represent green, and the last two represent blue. In this hexadecimal code is very similar to RGB with the difference that here each color is specified in hexadecimal system notation instead of decimal.
If each pair of digits consists of the same symbols, then the color value can be shortened. However, if the hexadecimal code looks like this, for example, #bbff10, then such an entry cannot be shortened.
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 uses the default value (it becomes completely transparent), and the text uses either the default value (black color) or a color inherited from the parent element.
For older versions of browsers, you should add an additional rule that determines the color in RGB format, hexadecimal value, or by name. This rule must appear before a rule specifying a color in RGBA, HSL, or HSLA format. This will provide a safety net for 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, it will use the first.
Color codes in CSS are used to specify colors. Typically, color codes or color values are used to set the color for either the foreground color of an element (e.g. text color, link color) or the background color of an element (background color, block color). They can also be used to change the color of a button, border, marker, hover, and other decorative effects.
You can set your color values in various formats. The following table lists all possible formats:
The listed formats are described in more detail below.
CSS Colors - Hex Codes
Hexadecimal color code is a six-digit representation of color. The first two digits (RR) represent the red value, the next two represent the green value (GG), and the last two represent the blue value (BB).
CSS Colors - Short Hex Codes
Short hex color code is a shorter form of six-character notation. In this format, each digit is repeated to produce an equivalent six-digit color value. For example: #0F0 becomes #00FF00.
Hexadecimal value can be taken from any graphic software, such as Adobe Photoshop, Core Draw, etc.
Each hexadecimal color code in CSS will be preceded by a hash sign "#". Below are examples of using hexadecimal notations.
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 is 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 using our service.
Browser Safe 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 hexadecimal code. They are safe to use because they ensure that all computers display color correctly when working with the 256 color palette.
| Table of "safe" colors in CSS | |||||
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
Color in CSS language can be specified in different ways:
- by name,
- by hexadecimal value,
- in RGB and RGBA formats,
- in HSL and HSLA formats.
Set color by name
Browsers support specifying some colors for elements by name. This table contains some keywords (English color names) used to specify color properties, RGB code, hexadecimal code (HEX) and HSL code.
| Name | Color | RGB | HEX | HSL | Description |
|---|---|---|---|---|---|
| white | rgb(255, 255, 255) | #ffffff or #fff | hsl(0, 0%, 100%) | White | |
| silver | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Grey | |
| gray | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Dark grey | |
| black | rgb(0, 0, 0) | #000000 or #000 | hsl(0, 0%, 0%) | Black | |
| maroon | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Dark red | |
| red | rgb(255, 0, 0) | #ff0000 or #f00 | hsl(0, 100%, 50%) | Red | |
| orange | rgb(255, 165, 0) | #ffa500 | hsl(38.8, 100%, 50%) | Orange | |
| yellow | rgb(255, 255, 0) | #ffff00 or #ff0 | hsl(60, 100%, 50%) | Yellow | |
| olive | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | Olive | |
| lime | rgb(0, 255, 0) | #00ff00 or #0f0 | hsl(120, 100%, 50%) | Light green | |
| green | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Green | |
| aqua | rgb(0, 255, 255) | #00ffff or #0ff | hsl(180, 100%, 50%) | Blue | |
| blue | rgb(0, 0, 255) | #0000ff or #00f | hsl(240, 100%, 50%) | Blue | |
| navy | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Dark blue | |
| teal | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Blue-green | |
| fuchsia | rgb(255, 0, 255) | #ff00ff or #f0f | hsl(300, 100%, 50%) | Pink | |
| purple | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | Violet |
This is an example of the use of color names, the color names are taken from the extended table.
Here's how this code works:
Setting color using RGB
RGB is an additive color model. On English language addition- addition. RGB is an abbreviation of the English words: Red, Green, Blue - red, green, blue). From this it is clear that in the model RGB colors synthesized by adding three colors (red, green, blue) in varying quantities.
By mixing red, green and blue colors you can get several million shades. All possible combinations are stored in computer memory.
Get to the point.
To set properties in this format, use the notation rgb(r, g, b) , where r, g, b are the three channels for each color (red, green, blue). Values for each channel are set in the range from 0 to 255.
Example code.
To make everything clear, here is a code example:
This is how this example should work:
Fig.1. Colors in RGB. Explanations for example.
At the beginning of the page we create the div.rgb class, it is needed for blocks created by the tag
Next, in the code we set background color block
Try editing this example and specifying your own values, for example rgb(100, 100, 100) .
Setting color using RGBA
Appeared in CSS3 new tool for working with color - RGBA format. It can be called an evolution of the RGB model, but with the addition of one new channel - the A or alpha channel. This channel sets the transparency of the color. Its values are set in the range from 0 to 1. A value of 0 corresponds to full transparency, 1 - full opacity (the color will be the same as it was specified in first three RGB channels), and intermediate values like 0.4 or 0.6 - translucency to varying degrees.
Example code.
Here's how it will work:
This code is visually similar to the following, which uses the RGB model to specify a color value:
Here is his result:
An alpha channel value of zero makes any color invisible - completely transparent, the value equal to one broadcasts color in RGB code without changes. The rgba(255,0,0,1.0) property shows the color red rgb(255, 0, 0) .
By hexadecimal value (HEX code)
In everyday life, we use the decimal counting system. Its origins are very simple - we have ten fingers on our hands, and counting on our fingers has been convenient in life. If in decimal system ten digits: from 0 to 9, and the number 10 is the next digit, then the hexadecimal number system has 16 digits, and the next digit will be the number 16.
To specify color codes as hexadecimal digits, use the usual decimal digits from 0 to 9 and to denote numbers from 10 to 15 use Latin letters from A to F, that is (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). For clarity, let's put this in a table:
To write hexadecimal numbers greater than F (15 in the decimal system), as in the decimal system, they also use the combination of two digits, but already hexadecimal, which is obvious. Yes, for the record decimal number 255 in hexadecimal notation is FF.
The hexadecimal system is more understandable to the computer, and it processes values set by hexadecimal value faster.
To specify a color in hexadecimal, before numerical value you need to put a “#” sign, example: #FFC0CB. The value #FFC0CB itself consists of three hexadecimal digits FF, C0 and CB. The meaning of this entry is the same as setting the color in the RGB format (rgb(r, g, b)) - each hexadecimal digit in the HEX code indicates the color saturation in its channel of the RGB model.
This code will display the following elements:
And here is a picture with the result from the section "Setting colors using RGB" on this page above.
Fig.1. Colors in RGB. We see that the colors are identical.
A shortened notation of the HEX color code is allowed: a 6-digit number can be written as a 3-digit number. This is only valid when two digits in the color value of one channel are repeated.
That is, the following abbreviation is acceptable:
For example, the color #ff22aa can be written as #f2a, or the color #44aa22 can be written as #4a2.
Setting Color Using HSL
Appeared in CSS3 new format to indicate color.
The HSL format is an abbreviation for the English words: Hue (hue), Saturate (saturation) and Lightness (lightness).
Hue in HSL is the value of a color on a special color wheel (Figure 2) and is specified in degrees. If we draw analogies with the RGB model, then 0° corresponds to red, 120° corresponds to green, and 240° corresponds to blue.
The hue value will change from 0 to 359.
Figure 2. HSL color wheel. The second value - saturation (Saturate) is set as a percentage. At 100% saturation, the color is as “juicy” as possible; as the saturation indicator moves towards 0%, the color becomes duller and fades into gray.
The third value, Lightness, is also set as a percentage. The higher the percentage, the brighter the color will be. The extreme values of 0% and 100% will indicate black (no light) and white (overexposed) colors, respectively, and it does not matter which color from the color wheel was selected in the first channel. The optimal color brightness value is 50%.
Setting Color Using HSLA
The HSLA format is related to HSL, just as RGB is to RGBA. IN HSLA format, as in RGBA, an alpha channel has been added, which is responsible for color transparency.
Color specified in HSL format is easier to read. We can say that it is intuitive. For example, the code hsl(120,60%,50%) can represent the final color if there is a picture of the HSL color wheel in memory. The same cannot be said about the RGB and HEX formats; the color code specified in these formats becomes clear only after it is visualized on the monitor.
New formats in CSS3 (HSL, HSLA and RGBA) work in browsers starting from versions: IE 9.0, Opera 10.0 Firefox 3.0. How can I make styles work on older browsers?
Somebloсk ( background-color: rgb(255,50,50); background-color: rgba(255,50,50,0.85) )
When using this code in older browsers, the background color for the .somebloсk class, although it will not use an alpha channel, will be displayed in RGB format.
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.
- h1 ( color: #ff0000; ) /* red */
- h2 ( color: #00ff00; ) /* green */
- h3 ( color: #0000ff; ) /* blue */
- 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%).
- h1 ( color: rgb(255, 0, 0); ) /* red */
- h2 ( color: rgb(0, 255, 0); ) /* green */
- h3 ( color: rgb(0, 0, 255); ) /* blue */
- 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).
- h1 ( color: rgb(0, 0, 255); ) /* blue in regular RGB */
- h2 ( color: rgba(0, 0, 255, 1); ) /* the same blue in RGBA, because opacity: 100% */
- h3 ( color: rgba(0, 0, 255, 0.5); ) /* opacity: 50% */
- h4 ( color: rgba(0, 0, 255, .155); ) /* opacity: 15.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%).
- h1 ( color: hsl(120, 100%, 50%); ) /* green */
- h2 ( color: hsl(120, 100%, 75%); ) /* light green */
- h3 ( color: hsl(120, 100%, 25%); ) /* dark green */
- 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).
- h1 ( color: hsl(120, 100%, 50%); ) /* green in normal HSL */
- h2 ( color: hsla(120, 100%, 50%, 1); ) /* the same green in HSLA, because opacity: 100% */
- h3 ( color: hsla(120, 100%, 50%, 0.5); ) /* opacity: 50% */
- h4 ( color: hsla(120, 100%, 50%, .155); ) /* opacity: 15.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 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.
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 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 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
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Browsers support some colors by their name. In table 1 shows the names, hexadecimal code, RGB, HSL values and description.
| Name | Color | Code | RGB | HSL | Description |
|---|---|---|---|---|---|
| white | #ffffff or #fff | rgb(255,255,255) | hsl(0.0%,100%) | White | |
| silver | #c0c0c0 | rgb(192,192,192) | hsl(0.0%,75%) | Grey | |
| gray | #808080 | rgb(128,128,128) | hsl(0.0%,50%) | Dark grey | |
| black | #000000 or #000 | rgb(0,0,0) | hsl(0.0%,0%) | Black | |
| maroon | #800000 | rgb(128,0,0) | hsl(0.100%,25%) | Dark red | |
| red | #ff0000 or #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Red | |
| orange | #ffa500 | rgb(255,165,0) | hsl(38.8,100%,50%) | Orange | |
| yellow | #ffff00 or #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Yellow | |
| olive | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Olive | |
| lime | #00ff00 or #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Light green | |
| green | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Green | |
| aqua | #00ffff or #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Blue | |
| blue | #0000ff or #00f | rgb(0,0,255) | hsl(240,100%,50%) | Blue | |
| navy | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Dark blue | |
| teal | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Blue-green | |
| fuchsia | #ff00ff or #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Pink | |
| purple | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Violet |
Using RGB
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
You can define 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
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
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 an intermediate value like 0.5 is semi-transparent.
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
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
The name of the HSL format is derived from the 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 it lighter; extreme values of 0% and 100% correspond to black and white.
HSLA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
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 are 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