Hexadecimal Colors are a way to describe RGB colors in Web Design. With the latest improvements on browsers, it has other alternatives such as RGBA and 8-digit Hexadecimal Colors. But it is still the most used color system for CSS and most of the Painting or Modeling Software out there. In this post, I will show you how they work.

How Does 6-Digit Hexadecimal Colors Work

6-Digit Hexadecimal Colors define colors using the RGB (Red-Green-Blue) system. The first two characters are Red, the second two characters are Green, and the last two characters define Blue. Color levels are using Hexadecimal System, so they start from 00 and rise up to FF (0123456789ABCDEF - Hexadecimal System). FF means 256 in the decimal system. 0 is darker while 255 is a light version of that color. Here are some sample colors for you to understand this better:

  • White - #FFFFFF - R:255 G:255 B:255
  • Black - #000000 - R:0 G:0 B:0
  • Red - #FF0000 - R:255 G:0 B:0
  • Gray - #777777 - R:119 G:119 B:119

Using 6-Digit Colors in CSS

6-Digit colors can be used in CSS for defining any text color, background colors or border colors. Here are a few samples for their usage in CSS:

/* Background Color */
body{ background-color: #FFF; }

Please note that you can use 3-letter versions for shorter color definition. In this sample #FFF actually expands to #FFFFFF in modern browsers.

/* Text Color */
p{ color: #000099; /* Dark Blue */ }
/* Border Color */
a{ border-color: #DDEEFF; border-bottom: 2px solid; }

I hope you find this post useful. Follow me on @metinsaylan for more CSS tips like this! Enjoy.

Join The Discussion