Code orange. HTML tutorial. RGB colors. Safe palette colors
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 set color properties, RGB code, hexadecimal code(HEX) and HSL code.
Table 1. Names of colors, their RGB, 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 gray
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.
RGB in CSS
MediumTurquoise
brown
crimson
blueviolet
rolivedrab
Here's how this code works:
Setting color using RGB
RGB is an additive color model. On Englishaddition- addition. RGB is an abbreviation of the English words: Red, Green, Blue - red, green, blue). From this it is clear that in the RGB model colors are synthesized by adding three colors(red, green, blue) in various 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:
RGB in CSS
rgb(255, 0, 0)
rgb(0, 255, 0)
rgb(0, 0, 255)
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
were displayed the right size: 240px by 40px. We assign the line-height property a value of 40px, that is, equal to the height of the block, this will allow you to display text in the block
at the vertical center. We center the text horizontally using the rule ( text-align : center ;).
Next, in the code we set the background color of the block
using the style attribute, using the background property, and assigning values to rgb(255, 0, 0) , rgb(0, 255, 0) , and rgb(0, 0, 255) . That is, we alternately make one channel as saturated as possible, and the remaining channels are not used for synthesis, since their value is zero.
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 threeRGB channels), and intermediate values like 0.4 or 0.6 - translucency to varying degrees.
Example code.
RGBA in CSS3
Here's how it will work:
This code is visually similar to the following, which uses the RGB model to specify a color value:
RGBA in CSS3
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 regular decimal digits from 0 to 9 are used and to denote numbers from 10 to 15, Latin letters from A to F are used, 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 V hexadecimal system FF notation is used.
The hexadecimal system is more understandable to the computer, and it processes values set by hexadecimal value faster.
To specify a color in hexadecimal, precede the numeric value with 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 RGB format(rgb(r, g, b)) - each hexadecimal digit in the HEX code indicates the color saturation in its channel of the RGB model.
HEX code in CSS
#FF0000
#00FF00
#0000FF
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
CSS3 has a new format for specifying colors.
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 it is given 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 the HSLA format, as in RGBA, an alpha channel is 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?
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%).
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% */
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%).
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% */
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 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 a phototypesetting machine on film of a given color (or directly on printed form in the case of CTP).
For example, to obtain 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
Color model XYZ(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. The design of Lab was designed 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 areas of the color space would produce the same sensation of color change.
Vlad Merzhevich
In HTML, color is specified in one of two ways: using hexadecimal code and by the name of certain colors. The method based on the hexadecimal number system is predominantly used, as it is the most universal.
Hexadecimal colors
HTML uses hexadecimal numbers 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 10 to 15 are replaced in Latin letters. In table 6.1 shows the correspondence between decimal and hexadecimal numbers.
Numbers greater than 15 in the hexadecimal system are formed by combining two numbers into one (Table 6.2). 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 The hash symbol # is used, for example #aa69cc. In this case, the case does not matter, so it is permissible to write #F0F0F0 or #f0f0f0.
A typical color used in HTML looks like this.
Here the background color of the web page is set to #FA8E47. The hash symbol # in front of a number means it is hexadecimal. The first two digits (FA) define the red component of the color, the third through fourth digits (8E) define the green component, and the last two digits (47) define the blue component. The end result will be this color.
F.A.
+
8E
+
47
=
FA8E47
Each of the three colors - red, green and blue - can take values from 00 to FF, resulting in a total of 256 shades. Thus, the total number of colors can be 256x256x256 = 16,777,216 combinations. A color model based on red, green and blue components is called RGB (red, green, blue). This model is additive (from add - add), in which the addition of all three components forms the color white.
To make it easier to navigate hexadecimal colors, take into account some rules.
If the values of the color components are the same (for example: #D6D6D6), then the result will be a gray tint. How larger number, the lighter the color, with values ranging from #000000 (black) to #FFFFFF (white).
A bright red color is formed if the red component is made maximum (FF) and the remaining components are set to zero. A color with a value of #FF0000 is the reddest possible shade of red. The situation is similar with green(#00FF00) and blue (#0000FF).
Yellow (#FFFF00) is made by mixing red and green. This is clearly visible on the color wheel (Fig. 6.1), which presents the primary colors (red, green, blue) and complementary or additional ones. These include yellow, cyan and violet (also called magenta). In general, any color can be obtained by mixing colors close to it. Thus, cyan (#00FFFF) is obtained by combining blue and green.
Rice. 6.1. Color wheel
Colors based on hexadecimal values do not have to be empirically selected. Suitable for this purpose graphic editor able to work with different color models, for example Adobe Photoshop. In Fig. Figure 6.2 shows the window for choosing a color in this program, the resulting line is circled hexadecimal value current color. You can copy and paste it into your code.
If you set the monitor's color rendering quality to 8 bits (256 colors), then the same color can be displayed in different browsers in my own way. This is due to the way graphics are displayed, when the browser works with its own palette and cannot show a color that is not in its palette. In this case, the color is replaced by a combination of pixels of other, close to it, colors that imitate the given one. To ensure that the color remains the same across different browsers, a palette of so-called web colors was introduced. Web colors are those colors for which each component - red, green and blue - is set to one of six values - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). The hexadecimal value of this component is indicated in brackets. The total number of colors from all possible combinations gives 6x6x6 - 216 colors. An example web color is #33FF66.
The main feature of web color is that it appears the same in all browsers. IN at the moment The relevance of web colors is very small due to the improvement in the quality of monitors and the expansion of their capabilities.
Colors by name
To avoid having to remember a set of numbers, you can use the names of commonly used colors instead. In table 6.3 shows the names of popular color names.
Table 6.3. Names of some colors
Color name
Color
Description
Hexadecimal value
black
Black
#000000
blue
Blue
#0000FF
fuchsia
Light purple
#FF00FF
gray
Dark gray
#808080
green
Green
#008000
lime
Light green
#00FF00
maroon
Dark red
#800000
navy
Dark blue
#000080
olive
Olive
#808000
purple
Dark purple
#800080
red
Red
#FF0000
silver
Light gray
#C0C0C0
teal
Blue-green
#008080
white
White
#FFFFFF
yellow
Yellow
#FFFF00
It doesn't matter whether you specify a color by its name or by using hexadecimal numbers. These methods are equal in their effect. Example 6.1 shows how to set the background and text colors of a web page.
Example 6.1. Background and text color
Colors
Example text
In this example, the background color is set using the bgcolor attribute of the tag
, and the text color through the text attribute. For variety, the text attribute is set to a hexadecimal number, and the bgcolor attribute is set to the reserved keyword teal .
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, a hash symbol # is placed before the hexadecimal number, 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.
Browsers support some colors by their name. In table 1 shows the names, hexadecimal code, RGB, HSL values and description.
Table 1. Names of colors
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 gray
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 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
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 element's transparency. 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
Internet Explorer
Chrome
Opera
Safari
Firefox
Android
iOS
9.0+
1.0+
9.6+
3.1+
3.0+
2.1+
2.0+
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
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.
Color values in RGBA formats, HSL and HSLA have been added to CSS3, so when using these formats, check your code for version validity.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Colors
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!