CSS Color Formats
CSS offers you a variety of ways to specify the color you want for an element, such as: font color, borders, backgrounds etc. Plus with CSS3 you can also specify an opacity level for your colors, when using the RGBA or HSLA color format, more on this later.
Color values can be written in the following formats:
1. Hexadecimal
2. RGB or RGBA
3. HSL or HSLA
4. Color Name
Lets have a look at the color formats more closely now. In all of the examples that I provide below, I will be using the same color which will be ‘yellow’, so all of the different color formats will give you the same color.
Hexadecimal
Hexadecimal colors begin with the number sign (#) and usually have 6 hexadecimal characters following (#RRGGBB), with certain colors you may also be able to shorten the 6 digits to 3 (#RGB).
p { background: #FFFF00; }
p { background: #FF0; }The above example will give you the same color background of yellow on all paragraphs.
RGB or RGBA
RGB stands for Red, Green and Blue. Instead of using hexadecimal characters to define the colors, we use three integer values ranging between 0 to 255 or three percentage values between 0% and 100%. The ‘A’ value in RGBA stands for alpha, this was introduced in CSS3 to include opacity for the specified color. The range for the alpha value is between 0.1 and 1.
p { background: rgb(255, 255, 0); }
p { background: rgba(255, 255, 0, 1); }
p { background: rgb(100%, 100%, 0%); }
p { background: rgba(100%, 100%, 0%, 1); }All of the above will give you a color background of yellow.
HSL or HSLA
HSL stands for Hue, Saturation and Lightness. Hue is represented as an angle of the color circle ranging between 0 and 360 degrees, this value is represented by a number (no degrees symbol). Saturation and lightness are represented as percentages. 100% is full saturation, and 0% is a shade of gray. 0% lightness is black, 100% lightness is white, and 50% lightness is ‘normal’. The ‘A’ value in RGBA stands for alpha, this was introduced in CSS3 to include opacity for the specified color. The range for the alpha value is between 0.1 and 1.
p { background: hsl(60, 100%, 50%); }
p { background: hsla(60, 100%, 50%, 1); }The above colors still represent the color yellow.
Color Name
Lastly we come to color name, with this format we can only specify 147 colors, Represented by 17 basic colors, with 130 other shades, these colors are referred to as X11 colors.
p { background: yellow; }Conclusion
As can be seen, there are a variety of ways to get a color value, my personal favourite is hexadecimal values. We have also put together some pages to see different aspects for CSS colors.
1. CSS Color Names – List all CSS color names with hexadecimal and RGB color values.
2. CSS Color Converter – Convert colors between different formats.
3. RGBA Opacity Generator – View how the opacity looks with different colors.
