Color Theory, Palettes & Hexadecimal Format
The following two infographics illustrate color palettes and hexadecimal colors for Web design. Read about color for the Web, below. Tap the images for free color tutorials.
Infographics are graphic visual representations of information, data or knowledge intended to present information quickly and clearly. They can improve cognition by utilizing graphics to enhance the human visual system's ability to see patterns and trends. (Quote from Wikipedia)
Color for the Web
Hexadecimal infographic illustrates hexadecimal numbers around the color wheel.
Each hexadecimal number is colored according to the color that number represents.
Additionally the color each number represents
aligns closely with the color adjacent to it, on the color wheel.
fd5308, should appear very similar to a deep orange red color,
when applied to a Web element, as follows.
Hexadecimal colors are represented by digits and letters, similar to decimal digits,
however letters represent additional numbers.
The set of decimal digits, which we normally use, equals
The set of hexadecimal digits equals
Digit A equals ten. Digit B equals eleven. Digit C equals twelve. Digit D equals thirteen.
Digit E equals fourteen and digit F equals fifteen.
Colors for the Web may be expressed with two hexadecimal digits for each color channel.
A channel is one unique hue. For example, with digital color, channels include red, green, blue and optionally alpha.
The first two hexadecimal digits, from the left, represent red. The second two hexadecimal digits
represent green and the third two hexadecimal digits represent blue.
FF0000 represents pure red.
00FF00 represents pure green.
0000FF represents pure blue.
Combine hues, such as green and blue, to create more subtle colors such as aqua with
The color wheel, with the hexadecimal digits infographic, helps you understand color palettes as well. The color palette infographic juxtaposes hues in six boxes. The top three boxes place analogs next to each other. The bottom three boxes place complimentary colors next to each other.
Analogs, in the top boxes are near each other on the color wheel. Complimentary colors, in the bottom boxes are opposite each other on the color wheel. For example orange and blue are on opposite sides of the color wheel, therefore they're complements. However yellow and orange are near each other on the color wheel, therefore they're analogues.
Analogues placed near each other often comfort or sooth the senses. The warmth or coolness of the set of analogues can strongly set a mood. However complimentary colors next to each can jar the senses or draw attention. It's often helpful to use only a small amount of a complimentary color for contrast.