On the web, each color is defined using this 3 colors (in this order: RGB): Red, Green and Blue.
Even black or white are a combination between Red, Green and Blue.
To assign a color to an element, you can use:
- hexadecimal values (values between 0 - F: see base16 allowed values) (each color can be expressed using 1 or 2 letters. You use 1 letter when the second letter from the group is the same)
Example1: #FF0033 can be symplified to #F03
Example2: #FF0144 can't be symplified to #F04 because second group does't use same value for both positions (0 != 1)
- RGB values (values between 0-255 for each color)
Example1: - for green color: rgb(0, 255, 0)
Example2: - for gold color: rgb(255,215,0)
- RGBA values (same as RGB above, but with an aditional alpha value. This value can be between 0 and 1 and represents the opacity)
Example1: - for green color with 85% opacity: rgba(0, 255, 0, 0.85)
Example2: - for gold color with 8% opacity: rgba(255,215,0, 0.08)
- HSL values
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue.
Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.
Lightness is also a percentage; 0% is black, 100% is white.
Example: - light-blue color: hsl(180, 50%, 50%)
- HSLA value (same as HSL with additional opacity value)
Example: red color with 80% opacity: hsl(0, 100%, 50%, 0.8)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Doc</title>
<style>
/* use an external file instead, and a <link> tag */
/* example for HEXADECIMAL value. Must start with "#" */
h1 {
color: #f00; /* for RED color. You can use also: #ff0000 */
background-color: rgb(128,128,128); /* gray color */
}
.blue-bkg {
background-color: rgba(0,0,255, 0.9); /* blue background */
}
.white-text {
color: hsl(0, 0%, 100%);
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p class="blue-bkg white-text">My first paragraph.</p>
</body>
</html>
Notice:
Hexadecimal values are the most popular, followed by RGB/RGBa.
I've never used HSL/HSLa so far and I don't intend to use them anytime soon, nor do I know people using them.
More info here: W3Schools.com (https://www.w3schools.com/colors/default.asp)
On the web, each color is defined using this 3 colors (in this order: RGB): Red, Green and Blue.
Even black or white are a combination between Red, Green and Blue.
To assign a color to an element, you can use:
- hexadecimal values (values between 0 - F: see base16 allowed values) (each color can be expressed using 1 or 2 letters. You use 1 letter when the second letter from the group is the same)
Example1: #FF0033 can be symplified to #F03
Example2: #FF0144 can't be symplified to #F04 because second group does't use same value for both positions (0 != 1)
- RGB values (values between 0-255 for each color)
Example1: - for green color: rgb(0, 255, 0)
Example2: - for gold color: rgb(255,215,0)
- RGBA values (same as RGB above, but with an aditional alpha value. This value can be between 0 and 1 and represents the opacity)
Example1: - for green color with 85% opacity: rgba(0, 255, 0, 0.85)
Example2: - for gold color with 8% opacity: rgba(255,215,0, 0.08)
- HSL values
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue.
Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.
Lightness is also a percentage; 0% is black, 100% is white.
Example: - light-blue color: hsl(180, 50%, 50%)
- HSLA value (same as HSL with additional opacity value)
Example: red color with 80% opacity: hsl(0, 100%, 50%, 0.8)
Notice:
Hexadecimal values are the most popular, followed by RGB/RGBa.
I've never used HSL/HSLa so far and I don't intend to use them anytime soon, nor do I know people using them.
More info here: W3Schools.com (https://www.w3schools.com/colors/default.asp)