Selection of colors

CSS Colors - Short Hex Codes

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 */ }

Predefined colors

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 */ }