Coding with HTML & CSS: Pops of Color

, 0

This is part two of our HTML & CSS posts. I suggest reading the previous post about the basics of HTML and CSS before reading this one, although it is not required.

Ready to learn about adding color to your code? Today we will discuss the three top ways to create color on the screen. After this, you can combine the basics with the color code and create simple but vibrant web pages within your own text editors.

  1. RGB

    RGB stands for Red, Green, and Blue. To learn more about the color profile itself, you can visit my post about CMYK versus RGB. To use it, simply put color: rgb(x,x,x); within your CSS stylesheet under the selector you’d like to change the color of. The x’s represent the numbers in the system to create your specific color code. Numbers vary from 0 to 255, giving you freedom for your colorful imagination.

  2. RGBA

    RGBA includes the ability to change the alpha channel, which is the opacity of the color. You get to control how see-through this color appears. This code is the same as the previous, except with one addition. color: rgba(x,x,x,0.8); I currently set this to 80%, but the range is 1.0 (100%) to 0.0 (0%).

  3. HEX

    I typically use Hexadecimal—or HEX for short—for my colors, but there is nothing wrong with using the others. To use a HEX code, all you need is color: #123456; and voila! The six digits must contain any three sets of two between 00 and FF. Yes, I said three sets of two, and no we aren’t playing a card game. The first two numbers/letters represent the red shade, then the middle two are green, and the final two are blue.

    Zeroes are a representation of that shade being absent, and it increases until FF, showing it’s 100% that piece. (Note that F is the lowest letter you may choose, and 9 is the highest number possible individually.)

    There are two more ways to add color, but I’ve never seen any designer use them. Does someone have a sweet spot for these two creative coloring techniques? I’m sure. But, if you want to know the basics, you really only need these three.