Define Colors in CSS – How to Use Color Codes
Colors are a key element in web design, playing a crucial role in the visual appearance and user experience of a website. They convey emotions, create visual hierarchies, and help to communicate a brand's identity.
When choosing colors in CSS, it is important to consider accessibility. Different users have varying levels of visual ability, and some people are color blind or have color vision deficiencies. Therefore, the contrast between text and background must be high enough to ensure readability.
CSS provides several ways to define colors, offering designers flexibility depending on the needs of a project. The most common methods include Color Hex Codes, RGB values, as well as predefined standard Color Names.
Define Color with Hex Code (Hexadecimal Color Codes)
Hexadecimal color codes (or short hex codes) are one of the most common and widely used methods of specifying colors in CSS. These codes consist of six characters, made up of the numbers 0 to 9 and the letters A to F. (resp. a to f). Two hex digits (00 to FF) represent the red, green, and blue parts of color in RGB colorspace. As an example, the hex code #FF5733 defines the color .
The 1st and 2nd digit represent the R part,
the 3rd and 4th digit represent the G part,
the 5th and 6th digit represent the B part.
A total of 16.7 million different colors can be defined.
Hex codes offer the developer precise control over the exact color mixture, making them the preferred method of color composition in web design. Similar to the use of RGB values, this method allows colors to be defined by specifying the exact parts of the three primary colors red, green and blue. However, the hex code is shorter than the corresponding RGB value. RGB values are rarely used for this reason.
Modern browsers also understand hex codes that contain a component for transparency. The transparency is determined by two further hex digits. 00 means 0% opacity, i.e. full transparency. FF means 100% opacity, i.e. no transparency at all. The hex value 80 means 50% transparency.
Define Colors Using RGB Values
RGB stands for Red, Green, and Blue, and refers to the three primary colors in the additive color system, which is used for digital color mixing (i.e. mixing of colored light). Mixing the three primary colors in the same ratio produces a shade of white or grey.
Mixing red, green and blue in different intensities creates the complete color palette. If all three primary colors are mixed with maximum intensity, the result is white.
A total of 16.7 million different colors can be defined.
In CSS, the RGB system is used with the rgb() function. An example of this is rgb(255, 87, 51). This RGB value produces the following color .
The decimal numbers from 0 to 255 represent the intensity of the corresponding color part, with 0 representing the lowest intensity and 255 the highest.
RGBA is an extension of RGB in which an alpha channel is also specified, which controls the transparency of the color. The rgba() function works in a similar way to rgb(), but the fourth value specifies the transparency of the color. A decimal value between 0 and 1 must be specified for the transparency. Where 0 means full transparency and 1 means full opacity.
Using Color Names
CSS also supports 140 different predefined standard color names. Some colors have two distinct names. For example, the colors Aqua and Cyan (hex code #00FFFF) are identical. All shades of Grey exist in both the Grey and Gray notations.
Our Color Table contains the shades of Grey only in the *Grey notation, e.g. DarkGrey, DarkSlateGrey or DimGrey.
Named colors offer a simple and convenient way to define commonly used colors without requiring specific color codes.