Creating Color Schemes and Palettes With Hsl

neymar44

If in the previous article we talked about the HSL color code, its meaning and differences with respect to HEX and RGB, and why it is more user-friendly to use it in our CSS code , today we will continue to see how to work directly with it to create color schemes and palettes. with our projects. We will do this without the help of any type of external tool , or by choosing a bit at random on the color wheel which are the colors that are going to make up our palette. As we saw in the other article, we know that HSL is made up of three values: hue, brightness, and saturation . And what we got by changing each of them. We are going to use this knowledge to put it into practice and, just by modifying some of these values, we will start creating fully functional color schemes and palettes. First of all, we will create color schemes by changing the values ​​of brightness and saturation, very important in certain elements of any web. Next we will continue with the color palettes, perhaps the most punctilious topic, and of which many, including myself, always have doubts about whether we are creating them correctly or not. Creating color schemes with HSL As we have mentioned, we are going to create these schemes simply by modifying the brightness or saturation values ​​from a base color . In this example, we're going to have three base colors: a green coded hsl(92, 50%, 50%) , a blue hsl(202, 50%, 50%) , and a pink hsl(327, 50%, 50 %) .

It is no coincidence that we have always chosen a brightness and saturation of 50%. We have done it so that, starting from a midpoint, we can create colors with more or less brightness, or with more or less saturation. This type of scheme is very recurrent in certain elements of a website. To give a specific example, when we start from the base color of a button, we can use a brightness or saturation change when hovering over it, and another brightness or saturation change when pressing them. Thanks to the use of HSL, we can know exactly the change of these colors and apply them exactly according to our needs. Modifying the saturation of the base color Saturation is the second value in our HSL color code. And to create this palette, we have made a color ladder, with a 15% difference image manipulation service in saturation between one color and another . You can see the result we have obtained below: color scheme with hsl modifying the saturation Our base colors are right in the middle, having on one side a version with the same hue but with more vivid colors, and on the other side more desaturated colors. Modifying the brightness of the base color We move on to modifying the brightness, which is the third value of our HSL. As we did with the saturation, we are going to modify our base color by adding or removing 15% brightness , leaving something like this: color scheme with hsl modifying brightness With the base colors in the center, on the left they tend to white, while on the right they tend to black. Before we have mentioned how we can use this type of scheme to build a button on our website . And this is how it would look: Example of idle, hover and pressed buttons modifying the brightness of the base color with hsl Creating color palettes with HSL Once we have seen how we can create color schemes starting from a base color in a simple way by simply modifying the brightness and saturation values, let's go into how to create color palettes by changing the other HSL variable that we are missing: the hue.


Before entering fully into this part of the text, it is highly recommended that you take a look at our article on color combinations with the help of the color wheel . In that text we saw some concepts of color combinations that we will mention later, and that are explained in more detail for those who may be interested. In the four combinations that we are going to see next, we always start with the same base color, a reddish tone with color code hsl(0, 68%, 65%) , from which we will assign the rest of the colors in the palette . That is, our base color shade is 0°, since we will see more clearly the values ​​to be added in our color code. Of course, you can take the base color you want , or the one you have in your project. complementary combination The complementary combination is perfect to mark a contrast , since we are going to have opposite hues on the color wheel. If our color wheel is 360°, the opposite hue is 180° more than our base color. So our palette will have two colors: hsl(0, 68%, 65%) / hsl(180, 68%, 65%) . complementary color combination with hsl Triadic Color Scheme This combination is made with three colors spread evenly across the color wheel. We will maintain the contrast, but with a certain harmony. Since the separation is always the same, the hue changes from one color to another 120°. So the colors would be hsl(0, 68%, 65%) / hsl(120, 68%, 65%) / hsl(240, 68%, 65%). triadic color combinations with hsl