Color in CSS

Colors are widely used in CSS. To set the color of the text, background or border, we need to specify a color.

For example, let’s define a red color for the background of a div element:

div{
    background-color: red;
}

There are several different properties in CSS that require a specific color as a value. For example, the color property is responsible for setting the color of the text , the background-color property for setting the background of an element , and the border-color property for setting the border color .

There are several different ways to define text color.

Hexadecimal value . It consists of separate parts that encode in hexadecimal the values ​​for red, green and blue.

For example, #1C4463 . Here, the first two characters 1Crepresent the value of the red component of the color, then 44the value of the green component of the color, and 63the value of the level of blue. The final color we see on the web page is created by mixing these values.

If each of the three two-digit numbers contains two identical characters, then they can be reduced to one. For example, #5522AAyou can shorten to #52A, or, for example, #eeeeeeyou can shorten to #eee. It is not so important in which case the characters will be.

RGB value . An RGB value also represents a sequential set of values ​​for red, green, and blue (Red – red, Green – green, Blue – blue). The value of each color is encoded with three numbers, which can either represent percentages (0-100%) or a number between 0 and 255.

For example

background-color: rgb(100%,100%,100%);

Every color matters here 100%. And as a result, when mixing these values, white will be created. And with values ​​​​of 0%, black will be generated:

background-color: rgb(0%, 0%, 0%);

Between 0 and 100% will be all other shades.

But, as a rule, values ​​from the range from 0 to 255 are more often used. For example,

background-color: rgb(28, 68, 99);

RGBA value . This is the same RGB value plus an alpha component. The transparency component has a value between 0 (fully transparent) and 1 (not transparent). For example:

background-color: rgba(28, 68, 99, .6);

HSL value . HSL is an abbreviation: Hue – tone, Saturation – saturation and Lightness – lightness. HSL defines three values. The first Hue value is the angle in the hue circle – a value in degrees from 0 to 360. For example, red is 0 (or 360 when the circle is rotated full circle). Each color occupies approximately 51°.

The second value – Saturation – represents saturation, it indicates how pure the color is. Saturation is defined as a percentage from 0 (no saturation at all) to 100% (bright, saturated color).

The third value – Lightness – determines the lightness and is specified as a percentage from 0 (completely black) to 100 (completely white). A value of 50% is used to obtain a pure color.

For example:

background-color: hsl(206, 56%, 25%);

This color is equivalent to the values #1C4463​​andrgb(28, 68, 99)

HSLA value . Similarly to RGBA, here a transparency component is added to HSL as a value from 0 (fully transparent) to 1 (not transparent). For example:

background-color: hsl(206, 56%, 25%, .6);

String values . There are a number of constant string values, such as red (for red) or green (for green). For example,

color: red;

is the equivalent

color: #ff0000;

A complete list of colors can be found at https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

In conclusion, there are many free online color generators where you can customize and view the color in the desired format. For example, the color generator on cdn .

Transparency

A number of color settings allow you to set a value for the alpha component, which is responsible for transparency. But there is also a special property in CSS that allows you to set the transparency of elements – the opacity property . It takes a number between 0 (fully transparent) and 1 (not transparent) as its value:

div{
    width: 100px;
    height: 100px;
     
    background-color: red;
    opacity: 0.4;
}