Welcome to the vibrant 🎡 world of colors! The CSS color property is one of the most creative building blocks of web design. Whether you want to create a visually stunning user interface or simply add a touch of flair to your project, understanding the variation of colors will empower you to paint your digital canvas with endless possibilities. In this post, we’ll dive into CSS color methods and explore their syntax and formats. Let’s embark on this chromatic journey together! 🌈✨
Exploring CSS color methods
Most colors have a predefined name, allowing us to easily declare them by referencing their designated names. For instance, if we desire a blue color, we can do so by setting background-color: blue.
Apart from names, we can declare colors by setting the values HEX , RGB , and HSL.
HEX color method
A hexadecimal (HEX) color is stated with #RRGGBB where RR represents the red color, GG stands for the green color, and BB acts for the blue color. In the example below, we can see that the HEX value for pure blue is #0000FF , where the first two ’00’ represent no red and the second two ’00’ represent no green, while ‘FF’ indicates the maximum intensity of blue color. So, at this point, is the right time to say that ’00’ stands for zero and represents the absence or off state, while ‘FF’ stands for the highest value and represents full intensity or the presence of all components.
Hexadecimal syntax supports using from 3 to 6 letters in order to denote RGB color combinations. As you may have already guessed, using less letter syntax reduces our color combinations, that’s why it’s mostly common to see 6-digit hexadecimal system when working on projects. In our example, we could write #00F instead of #0000FF.
🔖 It is essential to note that hexadecimal color works only if we add the # in front of it.
RGB color method
The RGB color model is a way of defining colors using red (R), green (G), and blue (B) values. These values go from 0 to 255, or you can use percentages from 0% to 100%. This gives us loads of different shades to play with!
Each value determines how strong that color should be. When the values are at ‘0’ or ‘0%’, it means the color is completely off, like it’s not there at all. But when they’re set to ‘255’ or ‘100%’, the color is at its maximum power or indicates the highest achievable intensity level. Cool, right? 😎
By skillfully combining them, we open up a plethora of possibilities, allowing us to create captivating color combinations.
Below, we see an example of the RGB color model for the color blue. The intensity of red and green is set to 0, and the intensity of blue is set to its maximum value of 255, resulting in pure blue color. In terms of percentages, it would be rgb(0%, 0%, 100%).
🔖 This function allows us to add one more value, the alpha value a responsible for our color’s opacity (transparency). It counts from 0.0, which means fully transparent, to 1.0, which means full color.
HSL color method
The HSL is another cool way to define colors. It consists of three parts that work together. So, let’s break it down!
The first part is hue (H), which is a number on a color 🎨 wheel. It goes from 0 to 360, where red is 360, green is 120, and blue is 240. So, you can pick any hue you want, and it’ll give you a different color.
The second part is saturation (S). This one controls how vibrant the color is. When it’s at 0%, the color becomes grayish, but when it’s turned on at 100%, you get the boldest, brightest color!
And finally, we’ve got lightness (L). This guy decides how light or dark the color should be. At 0%, it’s dark as black; 50% is the regular normal color, and at 100%, it’s bright as white.
Combining all the parts we can effortlessly create a myriad of captivating color 🍭 combinations.
Above is an example of the HSL color model for the color blue. We begin with the hue value of 240 degrees corresponds to the blue color in the HSL color wheel. The saturation is set to 100%, meaning it is fully saturated and vivid. The lightness is set to 50%, which represents a mid-level brightness for the blue color.
🔖 This function also allows us to add one more component named alpha and controls opacity (transparency) with a number between 0.0, fully transparent, and 1.0 which gives a clear color.
You may also like 🎬
Defining colors in CSS
In CSS, colors can be defined in three primary ways, each serving a specific purpose.
- The first way is used to change the color of the text. This is achieved through the
colorproperty. - We continue with the second one, which focuses on adding color to the background by utilizing the
background-colorproperty. - Finally, the third way revolves around defining colors for element borders, providing them with a distinct and visually appealing appearance. This is accomplished by setting the
border-colorproperty. If you want to learn more, check out my post on creative ways for styling CSS borders.
Explore different color combinations and properties to create a user experience that matches your design vision. For now, check out a simple example that follows:
<div class="container">
<h1>Goodbye</h1>
<p>Hope to see you around again! 😀</p>
</div>body {
text-align: center;
background-color: #0000ff;
}
.container {
/* border-width border-style border-color */
border: 30px solid #00ff00;
}
h1,
p {
color: white;
}Not too cool 💫 for the eyes 😵💫 but still, it works for our example 😄
🌼 Hope you found my post interesting and helpful. Thanks for being here! 🌼
