Web colors

Web colors are special choices of colors used to show pictures and text on websites. They help make the internet look bright, clear, and fun. You can pick a color in a few different ways. One common way is to use numbers called a hex triplet, like #FF5733. This tells a computer exactly how much red, green, and blue to mix to make the color.

Computers see colors by mixing three main colors: red, green, and blue. Each of these can be made brighter or dimmer using tiny units called bits. By using eight bits for each color, we can describe millions of different shades. This creates a huge palette of colors that websites can use.

Early web browsers like Mosaic and Netscape Navigator started with a list of color names from a system called X11. Today, web colors are defined using a standard called sRGB. This helps make sure colors look similar on most screens, even though each screen may show them a little differently. Some modern ways let us go beyond these standard colors, giving even more choices for designers.

Hex triplet

A hex triplet is a special six-digit (or eight-digit) number used to show colors on websites and in computer programs. It stands for the red, green, and blue parts of a color. Each part can range from 0 to 255, which is shown as a two-digit number in a special counting system called hexadecimal.

For example, a brown color might have red=123, green=58, and blue=30. In hexadecimal, these become 7B, 3A, and 1E. Putting them together gives the hex triplet 7B3A1E.

Sometimes, a shorter three-digit form is used, like 09C, which expands to 0099CC. This shorter way only gives 4,096 colors instead of the 16,777,216 colors possible with the full six-digit form.

HTML color names

HTML and XHTML allow colors to be used for text, backgrounds, and more. There are two types of color names: basic and extended.

The basic colors are 16 colors defined in the HTML 4.01 specification. These colors work well on most computers.

Extended colors come from combining rules from HTML, CSS, and SVG. Many web browsers recognize these colors. Some of these colors have different names but look the same, like "aqua" and "cyan," or "fuchsia" and "magenta."

CSS colors

The Cascading Style Sheets rules define colors that can be used on web pages. There are 16 basic color names that have been used since the early web, plus 124 more colors from a list made by Netscape. Together, these make 140 color names that older web browsers recognized.

Later versions of CSS, like CSS3, added new ways to describe colors. You can now use colors described with numbers, such as using a special code that starts with a # symbol. There are also ways to describe colors using models like HSL, which stands for Hue, Saturation, and Lightness. This gives more control over the exact shade of a color.

Web-safe colors

In the mid-1990s, many computer screens could only show 256 colors. When a color needed for a picture wasn't available, the computer had to pick a close color or mix colors together, a process called dithering.

To help with this, a group of 216 colors was created. This number was chosen because it left space for computer systems to use other colors, and it allowed six shades of red, green, and blue. These colors were picked because they worked well with early web browsers.

Even though these "web-safe" colors were meant to show clearly, they sometimes still had to mix colors on certain computers. As better screens with more colors became common in the 2000s, the idea of web-safe colors was used less.

Each of these colors can be described using numbers for red, green, and blue. These numbers help computers know exactly which color to show.

The list of web-safe colors includes some that are easier to see clearly on old screens. These are called the "really safe palette."

Accessibility

Some browsers and devices cannot show colors. For people who cannot see colors or for those who are colorblind, websites that only use colors can be hard or impossible to use.

To help everyone, it is best to either not use colors at all (so the browser uses its default colors) or to choose colors carefully. This means picking colors for both the background and all text and links so that they are easy to see and not the same color (like black text on a black background or white text on a white background).

The Web Content Accessibility Guidelines suggest that text should stand out clearly from the background. For normal-sized text, the difference should be at least 4.5 times brighter or darker than the background. For larger text, the difference should be at least 3 times. Some people with reading difficulties may find easier-to-read colors that are not as bright or dark as possible.