I’ve been learning a lot in my WEB 206 AI Assisted Web Design course, and I wanted to share some cool stuff about HTML colors with you. When you’re making a website, there are a few different ways you can create colors, and each one is unique.
First are HEX colors. HEX is like a secret code for colors, using a # followed by six distinct characters: numbers 0-9 and letters A- F. For example, `#F28500` is a bright orange. The first two characters determine how much red is used in the color, the next two determine how much green is in the color, and the last two determine the amount of blue.
The actual formula on how to read these amounts is extremely interesting but very difficult to explain. HEX colors use the Base 16 counting system, whereas we use Base 10 in everyday life. Since I need to explain the other three ways to add colors in HTML, I’ll save this detailed explanation for a future website post.
Another way you can add colors to your site is by using RGB colors, which stands for Red, Green, Blue. RGB uses numbers to show how much of each color is in the mix. Although this is similar to HEX, it does not use a system with letters as quantity characters, so it is much easier for us humans to read and understand. For example, `rgb(242, 133, 0)` is a bright orange with 242 parts red, 133 parts green, and 0 parts blue. 255 is the maximum level of that color that can be achieved, and of course 0 is the minimum level. One interesting thing to keep in mind about RGB is that it is similar to mixing paint, but the color combinations are different. This is because RGB is based on combinations of light to create color, whereas mixing paint is based on reflected light. Because of this difference, yellow can be created by mixing yellow and green. This is why red, green, and blue are used instead of the known primary colors. Although RGB is easier than HEX to read and understand, it takes up more characters when coding, which can cost web developers a lot because they are charged per HTML character when distributing their website. This is why HEX is popular; it saves money by reducing the amount of characters used to achieve the same color.
A more intuitive and in-depth way you can reach a color is by using HSL, which stands for Hue, Saturation, and Lightness. Hue represents the actual color and can be a value between 0 and 360, saturation is how intense the color is and is represented as a percentage from 0% to 100%, and lightness is how light or dark the color is and is also represented with a percentage from 0% to 100%. For example, `hsl(34, 100%, 47%)` gives us the same bright orange as described in RGB before, with a hue of 14 degrees, full saturation, and medium lightness. HSL is used mostly by designers because of its ability to find colors that pair well with each other. Outside of graphic design, HSL doesn’t get much practical use.
The last way you can achieve colors on a webpage is the easiest, and that is through color names. HTML has 140 predefined color names that you can use instead of confusing codes or numbers. Although this is convenient, it limits you to only 140 options for colors, and you might have to do some research to find the color name for whatever color you are looking for.
Phew, that was a lot of information! I tried to keep it short and sweet, but there are just so many details that you must know if you want to code colors using HTML. There’s even so much more to learn that I left out of this post! Maybe I’ll expand on this later…