Colors

The W3.CSS framework simplifies color management by providing classes to set the foreground and background colors of elements. The default color scheme is based on the Material Design colors. The color classes w3-color and w3-text-color can be applied to any element. There are hover classes, w3-hover-color and w3-hover-text-color, which can be applied when a user moves the mouse over an element.

Basic CSS colors

The basic color set available in the W3 framework is shown in the following figure.

Figure 12: W3.CSS colors

You can apply colors simply by adding the class name to the list of classes on the element. For example, the following container will have white lettering on a blue background.

<div class="w3-container w3-blue w3-text-white">

</div>

You can apply colors to any HTML element, such as <div> or <table>.

Note: Colors should be used carefully when designing a site—in particular, check for 508 compliance. The Web Content Accessibility Guidelines require a 4.5-to-1 contrast ratio between colors, to increase readability. For larger text sizes, 14 pixels and bold, or 18 pixels and larger, a 3.0-to-1 ratio is required. You should use tools such as this website to check that color combinations meet these guidelines. People with low vision or color-blindness will appreciate the effort.

Color libraries

You can also download separate color libraries from the W3.CSS site. Table 3 lists the libraries that are available.

Table 3: Color libraries

Note that the colors in the libraries all have unique names, so you can use multiple color libraries, in addition to the standard material design colors in the framework. Each color will begin with the final portion of the name, such as _flat or _signal.

Color themes

Color themes are CSS classes that allow you to use variations of the same basic color. For example, if your site has a gray look about it, you can download the w3-theme-grey.css style sheet and include it in your style sheet references.

This will add 12 additional color classes for text, default theme color, and lighter/darker variations on theme.

Table 4: Color themes

The following figure shows a sample theme (blue-gray) to illustrate the appearance of themes.

Figure 13: Sample blue-gray theme

You can use the theme color names and change the website color by simply specifying a different CSS theme style sheet. Note that many of the theme colors will not have sufficient contrast to meet accessibility guidelines. Be aware of the people using your site to ensure that a theme doesn’t make the site more difficult for some users.

Available themes

Table 5 lists the predefined themes available from W3.CSS.

Table 5: W3.CSS themes