What is the HEX color system?
The HEX color system is a 24-bit color system also known as web colors. There are 16,777,216 (2^24) different HEX colors in total. A HEX color has 6 digits consisting of three-byte hexadecimal numbers representing red, green, and blue respectively. Each color has a range between 00 and FF in the hexadecimal number system, and all the three in RGB are combined to form a HEX color based on the intensity. For example, #ff0000 represents red, #00ff00 represents green, and #0000ff represents blue.
Below is the HEX color code format starting with # and followed by the RGB values in hexadecimal. Hex color codes are case-insensitive. Lowercase and uppercase don't matter as it will result in the same color.
#RRGGBB
What is a 3-digit HEX color code?
A 3-digit color code is a shorthand version of the normal 6-digit HEX color code. Only 4096 HEX colors out of over 16 millions can be written in shorthand. The two HEX digits of each color in RGB must be the same character so that a HEX color can be shorten to 3 digits. For example, #0000ff can be shorten to #00f and #cc9900 can be shorten to #c90 whereas #f279b9 cannot.
How to use a HEX color in CSS?
You can simply use a HEX color in CSS code as a background or font color of an HTML element by addding a HEX color after a CSS property like so. If a HEX color can be written in shorthand in 3 digits, it's recommended to use the 3-digit HEX color code in order to reduce the CSS file size to save the page load time of your website in production. For example, #ffffff can be reduced to #fff which will result in the same white color.
body {
background: #4b73cb;
color: #fff;
}
What is the RGB color system?
RGB stands for red, green, and blue. The RGB color system is an additive color system between the three colors: red, green, and blue. It's mainly used on computer screen to form different light colors from the three colors. If all the three colors are combined together to the fullest, it will result in white.
The following is the RGB color format.
rgb(red, green, blue)
How to use an RGB color in CSS?
Although using HEX colors is mostly preferred in CSS, you can use an RGB color in CSS code as well. CSS provides the built-in rgb function for applying an RGB color to a CSS property. The rgb function accepts three parameters between 0 to 255 representing the value of red, green, and blue in the RGB color system respectively: i.e. rgb(red, green, blue).
For example, rgb(245, 142, 33) which is the combination of red: 245, green: 142, and blue: 33 and results in an orange color. You can apply an RGB color in CSS code by adding the RGB color code in the rgb function as in the following.
div {
background: rgb(234, 15, 95);
}
Moreover, you can set the opacity of an RGB color using the rgba function in CSS. It's an extended function of the aforementioned rgb one. RGBA is an acronym standing for Red-Green-Blue-Alpha. While the first three parameters are the same as the rgb function, the alpha parameter has a value between 0.00 to 1.00 which defines the opacity of an RGB color where 0 means transparent and 1 means opaque.
For example, you can set the opacity of a DIV to 50% using the rgba function like so. The background of this DIV will be 50% opaque and the elements under this DIV by the z-index order can be seen if any.
div {
background: rgba(0, 0, 0, 0.5);
}
How to convert a HEX color to an RGB color in JavaScript
You can easily convert a HEX color to the corresponding RGB one in JavaScript using the popular color-convert library from npm.
npm install color-convert
Import the color-convert library into your script, and use the rgb method from the hex property to convert HEX to RGB. The result will be an array of 3 interger values representing red, green, and blue in the RGB color system respectively.
const convert = require('color-convert');
// HEX to RGB
convert.hex.rgb('#8bbd0e'); // [139, 189, 14]
How to convert an RGB color to a HEX color in JavaScript
Similar to converting from HEX to RGB, you can use the hex method from the rgb property to convert an RGB color to the corresponding HEX one by entering integer values between 0 to 255 in the three parameters, and it will return a string value of the HEX color as a result.
const convert = require('color-convert');
// RGB to HEX
convert.rgb.hex(179, 63, 228); // B33FE4
What is the HSL color system?
The HSL color system is a human-friendly color system as it doesn't define a color from either HEX or RGB. Instead, it forms a color from hue, saturation, and lightness. However, the con of the HSL color system is there are only 3.6 million colors in total which are a lot less than the HEX and RGB ones. The following is the HSL color code format.
hls(hue, saturation, lightness)
-
Hue - Hue has a range between 0 and 359 which represents the degree on the color wheel. Therefore, 0, 360, and 720 degree will result in the same spot on the color wheel where red is at 0 degree, green is at 120 degree, and blue is at 240 degree. We humans can guess which degree a color is at easily rather than the HEX and RGB color systems.
-
Saturation - Saturation has a range between 0% to 100% which represents the intensity of a color. The more the saturation is, the intense of a color will be. If set to 0%, it will result in a grayscale color.
-
Lightness - Lightness has a range between 0% to 100% (defaults to 50%). Increasing the lightness means adding white to a color whereas decreasing the lightness means adding black.
The example below is an HSL color that represents a yellow color.
hsl(55, 83%, 49%)
What are complementary colors?
Complementary colors are a pair of two opposite colors in a color palette. If the two colors are mixed together, it will result in a grayscale color just like when you mix black and white. In other words, when the two colors are placed near each other, they will form the strongest color contrast between them.
There are 3 pairs of complementary colors in the RGB color system: red-cyan, green-megenta, and blue-yellow.