por Color in CSS is a property that allows you to stylize your web page and create recognizable color palettes that represent your brand. In this post, we explain how color works in css so you can use it on your website.
Color system in CSS
Color in CSS can be expressed in different ways; We can insert them with their name, with their RGB, their hexadecimal or their HSL. Below, we explain how each one works.
Color name
A color in CSS can be represented with its English keyword, either in lowercase or uppercase. This keyword represents specific colors, that is, when we insert
RGB and hexadecimal
The acronym RGB represents colors from the intensity of the colors red, green and bluefrom which its English acronym comes (red, green, blue). The intensity of each color It is determined by a number from 0 to 255, with 0 being the absence of color and 255 being its most intense form. In the RGB model, color is represented using three numbers from 0 to 255, each defining the intensity of a color in RGB order.
In its hexadecimal code these numbers are represented with pairs of digits that use numbers from 0 to 9 and letters of the to to the F. The intensity starts at 0 and ends at f. In this way, the minimum of a color is 00 (RGB 0) and its maximum is ff (RGB 255). In the middle of these values there will be a combination of numbers and letters that represent an RGB number according to their order. In this way, the 0a pair represents 10 and the 0f pair represents 15.
Like colors in RGB, hexadecimals need values for each color. For this reason, its code is made up of three pairs of digits, six in total. There are also hexadecimal notations with only three digits, when the pairs are made up of the same number or letter. For example, the code #aa00ff is the same as #a0f.
Although they represent the same thing using different digits, RGB and hexadecimal are written differently in our CSS style sheet.
To write RGB, we must write the functional notation
We propose an example: if you want an intense red, you should put the code #ff0000 as hexadecimal, while RGB would be written RGB (255, 0, 0).
HSL
The HSL model is an acronym for the concepts of hue (tone), saturation (saturation) and lightness (glow). Like RGB, it is written in our CSS style sheet with its acronym HSL and its value is written in parentheses. This model allows us to create sets of colors in a more intuitive way, since we can simply change the saturation and brightness to have variations of the same color.
Color in CSS, represented with HSL, uses three values. The tone or hue It is determined with a number from 0 to 360, since colors are represented in a circular spectrum. There is no need to memorize these values, but we will give you some examples. Red is represented by 360, green by 120, and blue by 240. For their part, both saturation and brightness are represented with percentages. In brightness, 50% is normal brightness, 0% is black and 100% is white. In saturation, 0% represents a gray shade and 100% is fully saturated.
Alpha channel
In RGB and HSL representations there is the possibility of adding a fourth value that represents the alpha channel. The alpha channel refers to the transparency or opacity of a color and is defined with a number between 0 and 1, with 0 being the most transparent value and 1 being the most opaque value. This is written in our CSS style sheet as RGBA or HSLA and is a property that is inherited from the parent element to the child element.
If we wanted a green with 30% opacity we could write RGBA (0, 255, 0, 0.3). To write the same value in HSL we would write it as HSLA (120, 100, 50, 0.3).
Note that when we insert a color using its keyword or name, we will not get this alpha channel. Colors inserted from name are solid and do not have a changeable level of transparency or opacity.
What is the next step?
Now that you know the basics about color in CSS, the next step is to learn about its many other properties. For this, we recommend our intensive bootcamp Full Stack Web Development Bootcamp, where you will learn more about CSS and HTML, among other languages and tools that will allow you to become an expert developer in a few months. Don’t miss it and sign up now!