Hexadecimal Colors

Web Design with JavaScript and CSS3

Color Wheel with HTML Color Codes: Hexadecimal

Introduction Advantages Hexadecimal Format Prepare Colors Assign a Color in CSS Assign a Color in JavaScript Summary

Introduction

Learn to apply and calculate hexadecimal colors with CSS3 and JavaScript. This tutorial covers easy methods to prepare hexadecimal colors individually or as a gradient series. This article also explains how to convert between decimal and hexadecimal number systems. The ability to convert between number systems can help you prepare color for game and Web design.

The Color Wheel

The traditional color wheel graphic above includes corresponding hexadecimal color values. The color wheel provides a great visual to understand how colors work together. Apply color wheel principles to select colors for effective Web and game design. The best color palettes are designed with color principles in mind. Colors can jar the senses, sooth emotions, draw attention, and set a mood.

Hexadecimal Advantages

Web colors are represented in HTML and CSS in multiple ways. The easiest method uses available names for colors such as blue, red, black, and green. For example the CSS rule-set p { color:black; }, assigns the color black to the foreground text of paragraph elements. However hexadecimal format provides a wider range of colors. Both JavaScript and CSS accept colors in hexadecimal format.

Web designs, games, and other online projects become more expressive and unique when designers have a large choice of colors. However, the best designs are often limited to three colors. Choose hues and values to present your goals effectively.

Many graphics applications such as Photoshop and Illustrator provide hexadecimal values for selected colors. Designers can modify colors by sight, then use the hexadecimal value.

Hexadecimal Format

Most HTML background and foreground elements accept hexadecimal RRGGBB format. HTML5 and CSS3 accept RRGGBB format, as well as RRGGBBAA format. AA represents the alpha transparency level of a color. This tutorial doesn't cover alpha transparency.

The most common base ten system uses digits in decimal format. Digits range between 0 and 9. The decimal set of digits follows.

{
0,1,2,3,4,
5,6,7,8,9
}

The hexadecimal system means that each digit represents numbers in the range of 0 to 15. The hexadecimal set of digits follows.

{
0,1,2,3,4,
5,6,7,8,9,
A,B,C,D,E,F
}

The hexadecimal set of digits, represents the decimal numbers 0 through 15. A in hexadecimal represents 10 in decimal format. B represents 11. C represents 12. D represents 13. E represents 14, and F represents 15.

Conversion

The maximum value for one hexadecimal digit is F, which equals 15 in decimal format. The maximum value for two hexadecimal digits is FF in hexadecimal and 255 in decimal. With hexadecimal color notation two hexadecimal digits represent one color channel. For example FF0000 represents pure red, 00FF00 represents pure green, and 0000FF represents pure blue.

The first F in the left column equals 15 times 16. The second F in the right column equals 15. Calculate 255 from FF with the following formula.

(15 * 16) + 15 = 255

Just as each column in decimal format represents a power of ten, each column in hexadecimal format represents a power of 16. For example 41 in decimal equals 4 * 10¹ + 1 * 10⁰ or 40 + 1. However 41 in hexadecimal equals 4 * 16¹ + 1 * 16⁰ or 64 + 1. Therefore 41 in hexadecimal equals 65 in decimal.

The subscript notation ₁₀ means a number is represented in base 10 decimal format with 10 values. We normally use base 10 decimal format. The subscript notation ₁₆ means a number is represented in hexadecimal format with 16 values. F₁₆ = 15₁₀ means the value F in base 16 equals the value 15 in base 10.

Color Notation

RRGGBB is a common way to indicate that two hexadecimal digits represent each component or channel of a color. The red R, green G, and blue B, channels of any color use two hexadecimal digits each. The maximum value for the red portion of a color is 255 in decimal or FF in hexadecimal. The maximum blue portion is 255 or FF. The maximum green portion is 255 or FF.

For example pure red is FF0000, because the two digits representing red are at their maximum value of FF. Yet the digits representing blue and green together are 0000. Pure green is 00FF00. Pure blue is 0000FF. Graphics programs often offer the ability to mix colors by eye, then select the color in hexadecimal format. Graphics applications make it easier to use mixed colors with varying levels of red, green, and blue.

Assign a Color in CSS

CSS accepts base 16 numbers prefixed with #. For example p { color:#fd5308; } assigns the top orange-red color, on the color wheel above, to the foreground color of the paragraph element.

Assign a Color in JavaScript

JavaScript accepts base 16 numbers prefixed with # also. eText.style.color = "#3d01a4" assigns the bottom left blue-violet color, on the color wheel above, to the foreground color style of the HTML element referenced as eText.

Prepare Colors

Artists can use graphics programs, such as Photoshop or Illustrator, to convert what they see to hexadecimal format. View each color before applying the color to JavaScript or CSS. Most graphics applications allow designers and developers to select hexadecimal colors visually.

For example, Photoshop's Color Picker dialog box includes a text box with the color expressed in hexadecimal format. View the colors, modify them as needed, then copy the value from the text box in Photoshop. Paste the color into a JavaScript or CSS file.

Some graphics applications save gradients to the SVG file format. For example Adobe Illustrator can save to SVG. Save the SVG file in editable text format. Open the file in a text editor. Copy and paste the gradient values to your JavaScript or CSS file.

Summary

This article explained how to apply and calculate hexadecimal colors with CSS3 and JavaScript. This tutorial covered easy methods to prepare hexadecimal colors individually or as a gradient series. This article also explained how to convert between decimal and hexadecimal number systems. The ability to convert between number systems can help you prepare color for game and Web design.

Web Development Company

Seven Thunder Software's Web programming skills include HTML5, CSS3, JavaScript, WebGL, GLSL and some PHP with MySQL and Python 3. Web design skills include Web graphics with Photoshop, animation with After Effects and 3ds Max.