CSS Colors

Different colors can be used for elements such as fonts, borders, and backgrounds. The options are unlimited.

There are 3 different methods to use colors in CSS:

  1. Color Names
  2. Color RGB Code
  3. Color Hex Code

 

1. Color Names

Using color names is the most basic method of assigning colors.

There are a total of 147 colors that all browsers recognize.

Originally, HTML used to support these 16 colors:

  • Aqua
  • Black
  • Blue
  • Fuchsia
  • Gray
  • Green
  • Lime
  • Maroon
  • Navy
  • Olive
  • Purple
  • Red
  • Silver
  • Teal
  • White
  • Yellow

The declaration to specify a color would look like this:

h2 {color: blue
}

How do colors affect web design?
There are a lot of factors for web developers to consider when it comes to making an appealing website.

Colors are one of the most important of those elements.

For users, you want to provide a web page that is easy to read and move through.

While in the early days, we used to see websites with all sorts of background colors and contrasting colors, modern design principles are applied to web pages as well now and the result is most websites having color palettes that ensure the content is easy to consume.

 

2. Color RGB Codes

Using the RGB color coding system, you will be able to specify the red, blue, and green colors separately.

Each color component has a value ranging between 0 to 225.

You can multiply each shade together as a unit to get a total of 16,777,216 color options to choose from.

Using the RGB coding system used to be the preferred method however we believe hex (below) is the new standard.

To display a heading as blue, your color combo will look something like this:

Red component: 35
Green component: 61
Blue component: 255

This color scaling will give you a blueish color.

The declaration will look like this:

h2 {color:
rgb(35,61,255)
}

 

3. Color Hex Codes

Hex codes are another versatile way of specifying RGB colors.

The Hex codes are based on the hexadecimal numerical system, which is not as complicated as it sounds.

A Hex code provides a shorthand method of using RGB colors.

A Hex code begins with a # as a prefix, followed by a combination of 6 numbers and letters.

The color component is represented in the pair of letters that represent one color component.

The Hex code will look like:

h2
{color: #233DFF
}

It is quite apparent that a Hex code is short and more user friendly.

The only problem is that the code is obscure and does not specify what color the code will produce.

 

Adobe Photoshop Color PickerAdobe Photoshop Color Picker

 

How do I get the color codes?

Once you have decided what colors you want to specify and the way you want to define them RGB and HEX you need to figure out what code will produce what color.

If you’re using a program like Adobe Photoshop, both of these color codes are available in the palette as seen above.

The easiest way however it to probably use a tool such as Color Hex.

The Google SERP also now shows a built in color picker if you search something like ‘hex color code’.

The limitless color palette offered by both the RGB and HEX color codes is an attractive concept.

However, there used to be one major disadvantage to these color codes, especially on older monitor systems that can only display 256 colors.

When you enter a code for a specific color beside the 256 color palette, they approximate that color using a dithering technique.

The problem here, the result is a text with an extremely low readability score.

To eliminate the limitations, there is a selection of colors called the websafe colors that will display perfectly well on any type of monitor without undergoing dithering.

There is a total of 216 web-safe colors as of now that you can use without worrying about compatibility issues.

With the evolution of all digital systems, we can safely say that majority of the population are no longer using displays that are only capable of showing 256 colors.

So on that note, we suggest using whichever hex or RGB colors you desire!