Web Safe Colors
- What are web safe colors?
- Web Safe Colors are an informal standard of 216 colors that are generally considered web safe. In the early days of personal computers, most displays only supported 256 colors. Out of these 256 colors, monitors/operating systems/browsers generally represented 216 colors in a relatively consistent manner. Hence, these 216 colors were deemed to be web safe. For more information, check out our Learn page
- Should I limit my palette to web safe colors?
- In most cases no. If you need to support very old computers, then it's advisable to limit your palette to web safe colors. Otherwise, nearly all modern computers, phones, and tablets support millions of colors. Most web developers today do not limit themselves to web safe colors.
- How do I use web safe colors?
- It's easy! Visit our color chart page and find a color you like. Then copy/paste the hex code or rgb code for that color into your CSS or HTML (HTML is really suppose to be semantic, and CSS is really meant for styling, so it's advisible to include the color code in your CSS, not HTML
Hex and RGB
- What is a hex color code?
A hex color code is a way of representing a color that is used with CSS.
Here's a couple hex color codes: #000000, #FFFFFF, #33cc33. #000000 is the hex color code for pure black, #FFFFFF is pure white, and #33cc66 is a light blueish green. Hex color codes in CSS (and HTML) are prefaced with a #. The two characters following the # represent the red value, the next two characters represent the green, and the final two characters represent blue. So in our #33cc66 example, 33 is the red value, cc is the green value, and 66 is the blue value. The maximum of each value (red, green and blue) is FF and the minimmum is 00. Each single character of each value can be one of 16 values (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, or F).
It's called a hex (or hexadecimal) color code because each character of the code can hold one of 16 possible values. This means that each two character pair (red, green or blue) supports 256 potential values (16^2), and the hex color code as a whole allows for 16.777216 million (256^3) possible colors. The web safe colors are a subset of these.
Hex color codes can be specified with 6 characters following the #, but they can also be specified with 3 characters following the #. Each 3 character hex code is equivalent to the six character hex code with the first, second, and third positions replicated. For example the 3 digit hex code #432 is equivalent to #443322.
- What is a rgb color code?
- An rgb color code is an another way of specifying a color code. Using rgb color codes gives you access to the same set of colors as using hex color codes - every rgb color code has a hex color code equivalent. Here are some example rgb codes: rgb(0, 0, 0), rgb(255, 255, 255), and rgb(51, 204, 102). rgb(0, 0, 0) is the rgb color code for pure black, rgb(255, 255, 255) is pure white, and rgb(51, 204, 102) is a light blueish green. The three numbers that make up an rgb color code correspond to (in order) the red, green, and blue color. So for rgb(51, 104, 102), 51 is the red value, 104 is the green value, and 102 is the blue value. These three numbers are in standard base 10 decimal and combine to form the actual color that is displayed on screen. The minimum value for number is 0 and the maxmium value is 255 (this allows for 256 possibile values for red, green, and blue). As with the hex color codes, rgb color codes allow for 256^3 colors or 16.777216 million colors.
- Should I use hex colors or rgb colors?
- It makes no difference! Nearly all modern browsers support both. Any color you can specify with a hex code, can also be specified with an rgb code (and visa versa).
Selecting a Color
- How should I pick a color to use on my webpage?
- There are many color pickers online. Just Google "color pickers" and you will see numerous options. Make sure that you select a palette of colors that work well together. Two colors may look nice independently but might not go well together. The best way to pick colors, is to try them out! Use the color picker to come up with ideas, and then try them on a webpage.
- Can you recommend color pickers?
- Just Google "color picker", "color wheel", or "color schemes" and you will see great options.
- What color combinations should I use?
- The best way to find colors that work together is to try them! You can also Google "color palettes" to see color palettes that other people have put together.
Setting a Color with HTML / CSS
- What is the difference between HTML and CSS? How are they used?
- HTML should be used for semantics and CSS should be used for design. In other words, HTML is used to define content while CSS allows you to specify how that content should be presented.
- Is there a difference between HTML colors and CSS colors?
- No. When the terms HTML colors and CSS colors are used they really refer to the same thing. That being said, it is best practice to specify colors in CSS (and use HTML only for semantics).
- Should I use CSS or HTML to set colors?
- CSS! Before CSS support became prevalent across browsers, colors were typically specified in the HTML page. This is no longer recomended practice. Although you can still specify colors in HTML doing so often requires the use of depreciated attributes (which may one day loose support). Colors are an aspect of design and presentation and should therfore be specified in CSS.
- How do I set text on my webpage to a particular color?
- In your CSS code, use the color property. The color property takes a hex color code, rgb color code, hsl color code, or named color as its value. For example to set the color of all text within p elements to #000033 (a dark blue) you can write "p { color: #000033; }".
- How do I set a background on my webpage to a particular color?
- In your CSS code, use the background-color property. Like the color property, background-color takes a hex color code, rgb color code, hsl color code, or named color as its value. For example to set the background-color of the element with id primaryContent to #ffffcc (a light yellow) you can write "#primaryContent { background-color: #ffffcc; }".