The art of color
R: 98
G: 152
B: 213
H: 212
S: 58
L: 61
The short hexadecimal color code is a shorter form of the 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.
Color Hexadecimal color
White #FFF
Black #000
Red #F00
Lyme #0F0
Blue #00F
Yellow #FF0
Sea wave #0FF
Fuchsia #F0F
HSL and HSLA
The HSL (hue, saturation, 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.
HSLA, 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);
RGB color model
RGB color values ​​are supported in all major browsers and are specified in the following order: R (red), G (green), B (blue). To specify a value in the RGB system, you must use the following syntax:
selector { color : rgb(R,G,B); }
Each parameter specifies the intensity of the color and can be an integer from 0 to 255. For example, the value rgb(0,0,255); displayed as blue because blue is set to the maximum value (255) and red and green are set to (minimum):
p { color : rgb(0,0,255); /* set blue color for all paragraphs */ }
I want to draw your attention in advance to the fact that it is allowed to indicate RGB color values ​​in the form of percentages. We will take a closer look at what units of measurement exist and are used in CSS in the next article "CSS Units, Font Size". For example, to set the orange color for all second-level headings using the RGB system and percentage values, you would use the following parameter values:
h2 { color : rgb(100%,65%,0%); /* sets orange color for all second level headings */ }
In addition to the above methods of specifying colors, there are predefined colors that you can apply to elements. Previously, we have repeatedly considered examples with predefined colors, and you can always find a complete list of predefined colors in the HTML reference in the HTML colors section.
For example:
p.intro { color : grey; /* set gray color for all intro paragraphs */ } i { color : orange; /* set orange color for all <i> elements */ } h2:first-child { color : red; /* set the color to red for all <h2> elements that are the first children of their parent */ }