Custom Colors with Hexadecimal Color Codes

Hexadecimal color codes may seem complicated at first. Once you understand the concept, they're easy to write. It's extremely similar to mixing paints or pigments. Mixing red and blue together gives you purple. Try it out for yourself.

You've probably noticed in the StyleSheet, we've used predefined colors such as "white," "midnightblue," and "lightgreen." CSS isn't limited to solely predefined colors. It can be pretty easy to create and mix your own colors, but you'll need to understand how Hexadecimal numbers work.

Hexadecimal numbers are values ranging from the number "0" through "F." F is the greatest value, while the number "0" is the lowest value. A hexadecimal color value is determined as follows. The first two digits indicate the red value for the color. The second two digits indicate the green value for the color, and the last two digits indicate the blue value for the color.

Application Of Hexadecimal Color Codes

Instead of writing in "white" or "midnightblue" for color values you can now write in "#FFFFFF" or "#191970." These are the same colors converted to hexadecimal color codes. The CSS for the Body tag would look like the following:

Try it for yourself. Create different color values by changing the color values in your hexadecimal color codes. Most visual editors will tell you specific colors values in hex. You can then copy and paste these codes into your CSS to create unique designs that coordinate well with your pictures. Experiment and have fun!