How to use CSS colors?

Color can be applied in many different ways in CSS; predefined color names, rgb, rgba and using hexadecimal color values. The CSS below shows that using a predefined color name, the background color will be set to 'purple'.

background-color: Purple;

There are many predefined colors in CSS and you can apply the color using just the predefined name as written above. Below is a list of predefined colors, this is not all predefined colors. These names are not case-sensitive, so you can write them all in uppercase or lowercase.

Black, White, Gray (or Gray), Silver

Blue, Aqua, Cyan )

Crimsom (dark red), Red (red)

Green (green), DarkGreen (dark green), Lime (lime)

Gold (gold), Yellow (yellow)

Pink (pink), HotPink (hot pink), Magenta (magenta)

Brown (brown), Maroon (maroon)

Purple (purple) , Violet (violet)

Red (red), Green (green), Blue (blue) or rgb is another way to set colors in CSS. The rgb function receives three parameters, representing red, green, and blue respectively. The value of each color component can be any integer from 0 to 255, inclusive. 0 is the minimum value and means that the color is not applied. The blue component in the code below has a value of 0, so blue is not added to the color. We set the red component to its brightest value and the green component to half (125). This will set it to orange.

background-color: rgb(255, 125, 0);

Transparency is another thing that can be applied to colors in CSS. By using the rgba function you can add an extra parameter to set the transparency. alpha is what sets the level of transparency. Its value is a decimal number from 0 to 1, so 0.5 represents half transparency. The code below also sets the color to orange, but also sets the opacity to half, making it somewhat transparent.

background-color: rgba(255, 125, 0, 0.5);

The last way to set color in CSS is to use hexadecimal values. Hexadecimal values range from 0 to F and give each color component two parts, preceded by a thematic symbol '#'. The alphabetical parts of the hexadecimal system from A to F correspond to the digits 10 to 15. The CSS code below is for orange in hexadecimal. The red part is represented as 'FF', the green part as '76', and the blue component as '00'. The green component is not the number 76, it is the two parts of the number 7 and the number 6.

background-color: #FF7600;

Converting hexadecimal to commonly used decimal values is complicated because hexadecimal values are in base 16 and decimal values are in base 10. To convert hexadecimal colors to ordinary decimal numbers, we must multiply each number by a power of 16. The following shows how hexadecimal values are converted to ordinary decimal numbers.

FF = (15 16^0)^ (15 16^1)^ = 15 1 15 16 = 15 140 = 255

76 = ( 7 16^0)^ ( 6 16 ^1)^ = 7 1 6 16 = 7 96 = 103

00 = ( 0 16^0)^ ( 0 16^1)^ = 0 1 0 16 = 0 0 = 0

To simplify the calculation, we can just take the first number of a hex color and multiply the second number by 16. This is shown below, using the same numbers as above. This is because any number raised to the power of 0 is equal to the number 1, and 16 raised to the power of 1 is equal to the number 16.

FF = 15 (15 16) = 255

76 = 7 (6 16) = 103

00 = 0 (0 * 16) = 0

Recommended tutorial: "CSS Tutorial"

The above is the detailed content of How to use CSS colors?. For more information, please follow other related articles on the PHP Chinese website!