MyMenu

Color

Color
Color

Color

'Color' is all around us. It adds excitement and emotion to our lives. Everything from the clothes we wear, the pictures we paint, and the environment we live in revolve around color. Without color, the world would be a much less attractive place.

Color is defined as:
noun
1. the property possessed by an object produces different sensations within the human eye and brain system due to the way the thing reflects or emits light.
verb
2. Change (something) color by painting, dyeing, or shading it.


Color Characteristics

Includes the following.


Color as Hue

What is Hue?

'Hue' is one of the characteristics of color. It is the name of the color or 'hue family,' i.e., red, orange, yellow. For example, if the color of an apple is red, then the apple has a red 'hue.'

'Hue families' contain all variations of that particular 'hue' or color, but what are hue families, and where do they come from?

In 1666, due to an outbreak of the plague, the Cambridge university closed down temporarily, and one of its young and bright students, Sir Isaac Newton, was forced to spend that semester at his home in the country.

Newton's Publication

During this time, by accident, Newton discovered the visible spectrum of light from a prism in the window at the young age of 24. When the sun passed through it, he observed the beam of light separated into multiple colors, like a rainbow. He then studied this phenomenon carefully.

He later published his theories in "Opticks," which details the various phenomena. Newton called it the "inflection" of light and the 'color spectrum.'

Today we have a basic understanding that white light contains all of the colors of the rainbow, which is why we sometimes see a rainbow after it rains and the sun shines through a mist. Sunlight passes through droplets of rain that act as a prism and split the light into the visible spectrum of colors.

The spectrum appears to make smooth transitions from color to color, but Newton divided the resulting beam into seven distinct 'hue families.' He called out red, orange, yellow, green, blue, indigo, violet, or ROYGBIV.

Light Refraction

The eye, just like the ear, responds to wavelengths or forms of energy that travel through space & atmosphere. Sir Isaac Newton didn't realize it at the time, but he uncovered what we now know today as the Electromagnetic Spectrum; and it contains the visible spectrum of light, and each 'hue family' has a different wavelength. Most animals see some color, but red and green color blind. Some insects see ultraviolet wavelength, which we can't see.

The Electromagnetic Spectrum

Since light contains all of the 'hue families,' when it hits an object, the object absorbs all of the wavelengths except the unique hue that it reflects back to us. For example, an apple absorbs all of the hues and reflects the only red wavelength.

Newton's Color Wheels

Newton wrapped the color spectrum around a wheel and published the first color wheel in his publication "Opticks." Today physicists agree that there are only 6 distinct hue families based on their decreasing wavelengths. Indigo was something that Newton included to make the number of hue families equal seven. He chose the number seven, reflecting the Ancient Greek belief that seven is a mystical number.


The Color Wheel

Hue is the characteristic of color and can be used interchangeably with the name of the color. The human eye can distinguish around ~ 7 million different hues or colors, i.e., there are 7 million different wavelengths that we can see within the visible spectrum.



Color as Value

What is Value?

'Value' describes the lightness or darkness relative to its surroundings. It is a color characteristic and also depicts volume. It creates the illusion of a three-dimensional object on a two-dimensional surface.

Students learning to draw are taught to master the color characteristic of value first in charcoal or graphite. Drawing in achromatic or 'no color' simplifies the complexity into grey, black and white without addressing hue, intensity, or temperature.

A 'tone' is a single color or hue mixed with grey. Tones represent various colors observed in life without addressing the other characteristics of color or moving on to chromatics.

  • Achromatic - Having No Color
  • Monochromatic - Having One Color
  • Chromatic - Having Multiple Colors


Tints, Tones & Shades

A 'tone' is a single color swatch. Alone by itself, it has a unique combination of color characteristics, including hue, value, intensity, and temperature.

'Tone' is also sometimes defined as any color that has been mixed with grey.

A 'tint' is any tone mixed with white, and a 'shade' is any tone mixed with black.




Value in Shape & Form

Value also helps us visually determine one shape from another, regardless of its other hue, intensity, or temperature characteristics. The value defines shape & form. Underneath every great painting is a contrast of lights & darks. Without some contrast, objects blend together, making it harder for us to determine one shape from another.

Value contrast distinguishes one shape from another

For example, the painting on the left shows the original value relationships. Value contrast in the painting on the right has been dramatically reduced. Shapes appear to blur together, leaving little information for the viewer to distinguish one from another. It is harder to quickly comprehend what they are looking at.

“Color or hue gets the glory, but value does the work!” -- unknown


What is a Value Scale?

Since value is relative, a 'value scale' or measuring device is used to help to determine the lightness or darkness of a single tone. The human eye can distinguish many values, but it is generally only necessary to represent 9 of those values in visual art.

Value Scale or Gradation with 11 tones

Mixing colors with white may dull the color intensity. However, don't confuse brightness with lightness. Intensity is the brightness or dullness of a tone. Value is the lightness or darkness of a tone relative to its surroundings.




What is Natural Value?

Hue affects the value of a single tone. Pigments straight out of the tube before mixed with other colors are at their highest intensity or chroma and have a pre-existing value. It is called a 'natural value,' apparent when placed next to different colors.

For example, yellow is generally on the lighter side compared to other hues on the color wheel. There are only a few colors that can be mixed to make it lighter.

Purple or Violet is generally on the dark side compared to other colors. As shown below, Orange, green, red, and blue are usually somewhere in the middle.

Every hue already has a natural value.



Color as Intensity

What is Color Intensity?

'Intensity,' otherwise known as 'Chroma,' is a characteristic of color describing the brightness or dullness.

Brightness is the intensity or purity of a pigment or color. Don't confuse 'chroma' with 'saturation.' Saturation refers to the colors created by a computer monitor rather than pigments or paints.

Paint colors are at their most vigorous intensity when they are straight out of the tube.

In painting, this is referred to as 'mass tone or 'top tone.' Each color's mass tone may vary slightly from one paint manufacturer to another, depending on their proprietary recipe or the pigment concentration used.

Think uncontaminated color!

Straight out of the tube is the most intense a paint color will ever be before we dilute it with either a medium or mix it with another color.

Anything diluting the initial pigment concentration makes the color less intense.

Mass Tone


What Are Neutral Colors?

They are duller versions of any color by comparison. Intensity appears to be influenced by adjacent colors and may appear brighter in certain situations!

Color appears to intensify when their color complements are next to each other! Bright colors will also appear brighter when surrounded by neutrals. The impressionists used these color relationships to make their colors appear more vibrant! It creates an optical illusion called simultaneous contrast.

The Impressionists used a combination of intense colors combined with neutrals.

For example, if all of the colors in a painting are intense, nothing will appear that intense. This painting seems to be high chroma, but there are actually a lot of neutral colors used to surround the brighter colors, which create the illusion of bright color.

We create neutrals or "neutralize" a color by decreasing its intensity. There are several ways to do this. You can mix them with other colors or earth tones or use any following methods.

You can take any color and mix in or add white or black.

You can take any color and mix it in or add gray.

You can take any color and mix it in or add the color complement.


What is a Chroma Scale?

It is created with a gradation of two complementary hues from bright to dull to bright, with colors of full intensity at both ends of the scale and neutralized colors in between.

Chroma Scale created using color complements.

Creating a chroma scale will help you determine the intensity of your color mixtures using complements.

When creating the scale mixing colors with complements may darken your colors, making it hard to see how the complement affects the color. You may have to add some white to create the perfect chroma scale. However, don't confuse brightness with lightness; that's the following characteristic of color' value.'



Color as Temperature

What is Color Temperature?

Temperature is one of the color's many characteristics. It describes the warmness or coolness of a hue or color relative to another hue. In nature, fire and ice are incredibly contrasting polar opposites.

Color temperature was more than familiar to artists before the 19th century.

However, in 1813, English artist Charles Hayter published this diagram in his book, Introduction to Perspective, Practical Geometry, Drawing and Painting, New and Perfect Explanation of the Mixture of Colors.

Hayter's Warm/Cool Diagram

Temperature in Pigments

The warm and cool color diagram raised questions that caused multiple editions to be published.

Is every hue or color on the color wheel either warm or cool? Are some hues excluded as neither warm nor cool?

A warm or cool characteristic can be assigned to any hue or color when it is in the context of a color wheel. All hues or colors within the visible spectrum of light are present. In this context, red & orange are always warmer colors compared to blue & green.

We can split the color wheel into the polar opposites of nature's 'Fire and Ice.' Fire is close to orange, and ice is close to blue. Note that with all hues present in the color wheel, hues gradually get warmer as they approach orange (fire). Hues gradually get cooler as they approach blue (ice).

Color temperature in pigments or paint is always relative to its surroundings.

The confusion in Hayter's diagram comes when we take the hue or color off of the wheel and put it into another context. Color temperature is always relative to its surroundings.

Pink is cooler compared to red.

For example, when the temperature in our environment goes down to 32 degrees Fahrenheit, it feels really cold to us. However, 32 degrees Fahrenheit feels relatively warm after being in an environment of 11 degrees Fahrenheit for a day or two.

Warm vs. Cool

Color temperature in pigments or paint works the same way. It appears relatively warmer or cooler to the hues or colors around it. This optical illusion is even more apparent within a single hue family or color.

Pink is a great example. It is generally a warm color used during Valentine's Day in cards or on candy boxes. However, when pink is next to red, it becomes a relatively cool color hue or color compared to red, as shown.

If we zoom in to a single hue family on the color wheel, blue gets cooler as it approaches green and warmer as it approaches red. It is in context. This is what a painter refers to when they say, "a warm blue or a cool blue."

Don't confuse color temperature with color bias or undertones. That's a whole different topic.


Temperature in Light

One last thing to address is the temperature of the light. The French Impressionists were obsessed with it.

They could paint the same scene in the morning and afternoon with two entirely different color schemes based on lighting effects and the time of day.

Sunlight Temperature

Lighting is essential in the perception of color. It transforms the vital visual information we receive from the object and affects your paint color. When comparing colors, use consistent lighting as you observe to get the same results.

Temperature is one of the color's many characteristics. It describes the warmness or coolness of a hue or color relative to another hue. In nature, fire and ice are incredibly contrasting polar opposites.




Color Theory

It is a set of guidelines that uses the element of color to create harmony, communicate ideas, or invoke an emotional response in the viewer. We call it "theory" because we use generalizations to create aesthetically pleasing results.


Traditional Color Wheel

Traditional Color Wheel

The traditional color wheel relies on using six colors or 'hue families' with three primary colors.

The wheel follows the visual spectrum of light "ROYGBV."

R - Red
O - Orange
Y - Yellow
G - Green
B - Blue
V - Violet

Most importantly, they are all in the same order around the wheel, as they rely on the visible spectrum of light to dictate the order.

These color families can be further broken into tertiary colors, making 12 color families or "hues" on the color wheel system.


What is the Munsell Color Wheel?

Albert Munsell created what is now called the Munsell color wheel.

There are 5 principal or primary hues: Red (R), Yellow (Y), Green (G), Blue (B), Purple (P) and 5 Intermediate hues: Yellow-Red (YR), Green-Yellow (GY), Blue-Green (BG), Purple-Blue (PB), Red-Purple (RP). When a color is void of hue it is called a Neutral, such as Neutral Gray or Neutral Black. On the Munsell Hue circle it is an axis in the middle (N).

Each of the 10 Hues (both principal + intermediate) are then further subdivided into 10. As you move clockwise around the circle the 5 of each Hue is the principal center of that color family, while the 10 of each Hue is considered the intermediate. Even finer distinctions can be made between similar Hues through the use of decimals. [1]

A Munsell Notation is always written in a specific order as a fraction.
For example:
5R 5/5
5R = Red HUE at step 5
5/ = a VALUE step of 5
/5 = a CHROMA step of 5

“Popular color names are incongruous, irrational, and often ludicrous.” – Albert Munsell

Links


References

Note 1: Munsell Hue Circle Poster by Munsell Color, Retrieved 2022


Primary Colors

Are YELLOW, RED, and BLUE. When mixing pigments (subtractive color method), secondary colors are created by combining these together. Note that these three on their own make a beautiful color scheme, later introduced as a "triad."

Primary Colors


Secondary Colors

Are ORANGE, GREEN, and VIOLET. They are created by mixing two primaries. For example: ORANGE = RED + YELLOW. They also create a "triad" color scheme.

Secondary Colors


Tertiary Colors

They are formed by mixing two secondary colors together. For example, they include YELLOW-GREEN, BLUE-GREEN, and YELLOW-ORANGE.

Tertiary Colors

Now that we have all of the twelve essential color families in order around the wheel, the following color schemes are all based on their relationships to each other as we go around the wheel.



Compliments

Are the colors directly opposite from each other on the color wheel. Compliments together are incredibly eye-catching and vibrant.


Red & Green Complements


Purple and Yellow Complements


Split Compliments

Split compliments are less vibrant than compliments. Complements with an additional split complement are also eye-catching but more varied than a simple complementary scheme.


Orange & Green Split Complements


Color Compliments with Split Complement


Triads

Are any three colors with a specific relationship on the wheel, with three colors between each. This combination creates a colorful yet balanced scheme.

Triads


Tetrads

Also known as a "square" combination, are any four colors with a specific relationship on the wheel that creates an "X" shape if connected by lines. It makes a colorful yet balanced scheme but is more complex.

Tetrads


Tetrads


Monochromatic

Is a single color with variations that change in lightness or darkness. "Tints" are created by adding white to a single color which lightens it. "Shades" are created by adding black to a single color which darkens it. 'Monochromatic' lack variety; however, they are quiet and soothing.

Monochromatic


Analogous

Are colors next to one another on the wheel feel calm and soothing but are more dramatic than a monochromatic scheme because it has more variety. This scheme is often found in nature because light reflects one object to another. For example, an apple may be red, but it may reveal orange and yellow colors depending on the lighting conditions on closer observation.

Analogous


Neutrals

Are colors that have been diminished or "neutralized" by adding gray, black, earth tones., or their own color complement. Most of the colors found in plants or nature are neutralized colors.

Neutrals or Low-Intensity Colors


Achromatic

Means no color or void of any color, also referred to as a "monotone achromatic." This scheme consists of black, white, and gray combinations only.

Achromatic


Clash of Polychrome

Of course, clashing colors will work if you do not want to create color harmony. Color on either side of its complement or a mixture of many contrasting colors will create a polychrome or color clash.

Clashing Colors


Let's recap these color combinations. Notice how they are all about relationships on the wheel...

Color Theory Relationships


The Psychology of Color

What is the Phychology of Color?

Colors can stimulate, excite, depress, tranquilize, increase appetite and create a feeling of warmth or coolness. However, different colors affect us differently. Have you ever wondered why people wait in a "Green Room" before they appear as a guest on a talk show?

Scientists have found that actual physiological changes occur in human beings when exposed to specific colors.

The study of color is known as chromodynamics, and this type of research is extremely useful in marketing because colors affect our decisions.

'Color' is a visually subjective experience based on life experiences, gender, age, and culture. It visually communicates, each has literal or word associations, catchphrases, symbolizes, representing the seasons of the year or different environments, which will be covered in a later post on each color.

These interpretations vary from culture to culture worldwide and may change over time. Nevertheless, some general and universal reactions to color seem to be noted in most people.

Red

RED is the most vibrant, compelling color in the spectrum. It attracts immediate attention and causes the pituitary gland to spring into action. It brings a feeling of warmth and stimulates appetite. It is a bold color. Many revolutions may have been planned within a red room.


Orange

ORANGE is an energizing color associated with sunshine. It makes us feel warm and happy and gives us a feeling of enthusiasm. It is a citrus color, related to healthy food. People who wear orange appear friendly, outgoing, cheerful, and adventurous. It is a favorite of children, teens, and athletes because of its playful, active qualities.

Yellow

YELLOW is the happiest color in the spectrum because it is associated with optimism, joy, and warmth. Visually, it appears soft to the touch; however, it pops out at us, making it a striking color. It stimulates clear thinking and aids in memory retention.


Green

GREEN is the color of nature and the easiest color on our eyes. It is calming and has a neutral effect on the human nervous system. Green is also a favorite color in hospitals because it relaxes patients. "Green rooms" are designed for people to sit, wait and relax before appearing on a talk show or before an interview.

Blue

BLUE is strongly associated with the sky, a constant in our lives which gives us a feeling of trust and integrity and inspires confidence. It is also related to water which can be a tranquilizer.


Purple

PURPLE is a sensitive color that encourages us to daydream. It may also give us the feeling of nostalgia, mystery or inspire meditation. According to surveys, almost 75 percent of pre-adolescent children prefer purple to all other colors; however, purple can appear artificial to adults because it is rarely found in nature.

Pink

PINK is the most romantic color. Research suggests that pink makes people feel soft-hearted and calm. It is a tender and tranquilizing color. When rooms are painted pink, it reduces aggressive behavior.


Brown

BROWN is the color of earth and wood. It makes us feel stable, reliable, or sheltered. It communicates credibility, strength, and maturity and creates a neutral, comfortable and open atmosphere.


Black

BLACK is the absence of color and is the color of night, darkness, evil, or death. It may bring feelings of despair, loneliness, or fear because it is associated with black holes, haunted houses, or villains. Marketing gives us a sense of perspective and depth related to formality, sophistication, elegance, or any luxury item.

White

WHITE is the color of the clouds and feels lightweight. When all colors are present in perfect balance, we see white. White clothing reflects light and keeps us cool. It is also the color of snow and may create a cool refreshing feel; however, all-white walls create a sterile or stark feeling that lacks warmth in an interior.

Color affects individuals differently based on their childhood experiences, gender, age, and culture. A visual experience may subconsciously affect the person's functions, controlled by the brain or emotions affecting behavioral aspects.

From infancy, we begin to formulate feelings about colors that invariably carry over into adult life. 'Color' is a personal experience. Everyone has their own unique experiences with color. The color we see is influenced by what we feel.

The field of chromodynamics is still not well understood. Studies are complex because human emotions vary from person to person, their physical biology changes, and their past experiences in life may be unique.



The Contrast Effect

Value is relative to its surroundings and can be deceiving. A single tone induces lightness or darkness upon other adjacent tones and is mutually affected in return.

The horizontal strip of gray below is the same tone across the background of values.

It creates an optical illusion called the 'Contrast Effect.' Even though the middle strip of grey is one single tone, it appears lighter on the dark side and darker on the light side.

The Contrast Effect



Value & Shape

What does it all mean? Let's explore with a good understanding of 'value.'

Any 2D image, including drawings, paintings, or photographs, can be defined or described by shapes in various contrasting values. 'Value' is a characteristic of color. It refers to the lightness or darkness of any single color swatch.

Tonal relationships, especially with various values, help us understand what we see in the world around us. Our vision uses the contrast of value to determine one object from another, especially in a low lighting situation when we cannot see the 'hue' or color.

Underneath every great painting is a contrast of light & dark values. Otherwise, shapes blend together. In this example, the original painting has a full range of values. Values are reduced to a limited value scale in the second image, using only mid-tones.


Without a full range of values, shapes appear to blur together, leaving little information for the viewer to distinguish one from another. A more comprehensive range of values is needed to convey this particular scene on a bright sunny day.

'Value' defines shape & form, not the brightness or dullness of the color or the hue. It's the lightness or darkness. Value does all the work to distinguish shape & form, but hue gets all the credit!

Value does all the work but, hue gets all the credit!

When we first learn to draw, we ignore all of the other characteristics of color, except value. It helps us simplify the complex observation process, which allows us to focus on getting the shapes accurate before mastering color.



Achromatic

Achromatic literally means "no color" or "without color." Graphite or charcoal drawings are 'achromatic' or without color, i.e., grayscale in black and white.



Monochromatic

Monochromatic uses 'mono' or one hue or color only. White is mixed with lightening or 'tint' the color, and black is mixed with darkening or creating a 'shade' of the color.



A monochromatic color scheme uses only one hue or color but needs a variety of lightness and darkness to convey shape to the viewer. Monochromatic color schemes naturally create harmony. They are soothing, elegant, and easy on our eyes.


Monochromatic color scheme


Chromatic

Chromatic means having color or multiple hues relating to or produced by color. 'Chroma' is the purity or intensity of color. It refers to the brightness or dullness of any color.





Color Systems

Includes the following.


Color Created by Colored Lights

What are Color Systems?

Or sometimes called 'Color Models' are based on the physical process when mixing hues or colors. This includes a 'subtractive color model' and an 'additive color model,' each is specific to its medium or media.

Color is produced in many ways, such as painting, digital images displayed on your computer monitor or phone, or printed photographs.

Primary colors cannot be mixed from other colors but, they may be different depending on the color system.

Primary Colors & their Color Systems


What is Subtractive Color?

If you paint from your computer monitor in your studio or paint from an image that has been printed from your printer, the color may appear more or less vibrant in comparison.

If you are trying to replicate the exact chroma or color intensity, hue or value, you may want to lower your expectations. There are physical limitations to what your medium can do. There are different primary colors for each color model or system to further complicate matters.

Paint (including oil, pastels, or watercolors), pigments, and dyes are made from natural elements. They use the 'Subtractive Method' to make new colors. Why is it called 'Subtractive' if we add or mix pigments together?

Subtractive Color

Yes, it's pretty confusing but remember that white light contains all of the colors from the rainbow (the visible spectrum of light), such as red, orange, yellow, green, blue, and violet.

When the photons from white light hit an object, it absorbs all of the various color wavelengths except the one reflected back to us. This color is 'subtracted' from the visible spectrum or white light source.

The primary colors of this traditional system are red, blue, and yellow (RYB). However, according to modern physics, they are not true primary colors and are not effective when used in color image reproduction technology. The modern printers of the 20th centurty, known as dot matrix printers, created what we now know as the CMYK system.



CMYK

CMYK Colors

Printers use the "Subtractive Color Method" in conjunction with the modern primary color system.

The modern primary colors in the Subtractive Method were discovered in the 20th century when computer printer technology evolved. They are Cyan, Magenta, and Yellow.



Pantone Matching System

Pantone


The Pantone Matching System (PMS) is a standardized proprietary system of thousands of numbered swatches, also called "spot" colors. It is used to manufacture fabric, plastics, and house paint. It is used in branding for color consistency.

This system, unlike CMYK, allows you to take a specific color with a brand and number to any hardware store and have it come out the same each time mixed.

Colors are not custom mixed. You must choose a predetermined color from the set of color swatches.

The Pantone Color Institute declares a particular "Color of the Year" every year since 2000". These results are published in Pantone View. Fashion designers, florists, and many other consumer-oriented companies use this color to help guide their designs and planning for future products (Wikipedia, 2018).





Additive Color Systems

Computer monitors and televisions use the 'Additive Method' to produce new colors from colored lights. They do not use pigments.

Colored Lights

This physical process occurs when colored lights are combined or 'added.' Mixing all primary colored lights or 'adding' them together produces white light. The primary colors in this system are Red, Green, and Blue (RGB).



Additive Primary Colors

The additive primary colors are red, green, and blue, otherwise known as RBG.





Subtractive Color Systems

Includes the following.


  • Pigments Through the Ages - From prehistoric times, humans have left an imprint on their environment in the form of painted images, which both beautified their world and expressed their thoughts and feelings. 


Traditional Primary Colors

Red, Yellow, and Blue

The primary colors of this traditional system are red, blue, and yellow (RYB).

However, according to modern physics, they are not true primary colors and are not effective when used in color image reproduction technology.

The modern printers of the 20th centurty, known as dot matrix printers, created what we now know as the CMYK system.



CMYK Colors

Cyan, Magenta, Yellow, and Black

Printers use separate ink cartridges with Cyan, Magenta, Yellow, and Black, also known as CMYK.

These colors are mixed together in different percentages to achieve thousands of color variations.

They overlay each other in rows of small tiny dots at slightly different angles to reproduce color.

Image color may vary somewhat from one printer to another, depending on the hardware and software.




Additivie Color Systems

Include the following.


Red, Green, and Blue

The purpose of the RGB color system is to display a colored image within an electronic system, such as a television, computer, or any digital image, before print. It is a complex system. However, if you are a digital artist or web designer, it's good to know the basics.

Red, Green, and Blue (RGB) are added together in various ways to produce a broad array of colors in this additive color method.

Each color is described by the strength of the Red, Green, or Blue components. These values specify the intensity of the colors with three numerical values for each, from 0 (none) to 255 (full intensity).

Within RGB, possible decimal notations include: Red is equal to 255, 0, 0 (Red at full intensity, no Green or Blue); Green is equal to 0, 255, 0 (Green at full intensity, no Red or Blue); and Blue is equal to 0, 0, 255 (Blue at full intensity, no Red or Green).

Decoding RGB

When Red is equal to (255, 0, 0), this means Red at full intensity with no Green or Blue. Green is equal to (0, 255, 0). This means Green at full intensity with no Red or Blue, etc.

Creating Colors with RGB Values Red ValueGreen Value Blue Value
Red 255 0 0
Green 0 255 0
Blue 0 0 255
Maroon 153 0 0
Yellow 255 255 0
Gray 153 153 153


RGB Value 0 17 34 51 68 85 102 119 136 153 170 187 204 221 238 255
Red
Green
Blue


Converting RGB Numbers to Web Colors

Web colors are usually specified using hexadecimal notation, not RGB decimal notation. The hexadecimal system is an alphanumeric base-16 system. F is the highest value, and 0 is the lowest value. The whole counting range is 0 1 2 3 4 5 6 7 8 9 A B C D E F.

Hexadecimal Number System:
0 1 2 3 4 5 6 7 8 9 A B C D E F

Color is coded by the strength of its Red, Green, and Blue components within the RGB system. The HTML hex color value template is 'RRGGBB.' RR is the Red intensity, GG is the Green intensity, and BB is the Blue intensity. A combination of six hexadecimal digits displays the digital translation, where the hex values for each color can range from a high of FF to a low of 00.

For example, FF9900 is the hexadecimal code for orange (255, 153, 0) in RGB notation. The first two digits represent the amount of  Red. The following two digits represent Green. The last two digits represent Blue.

On a 256 color monitor, only the R of Red, the G of Green, and the B of Blue affect the color, except for pure colors and grays, where only 6 of the hex digits have any effect. Those digits are F, C, 9, 6, 3, and 0. The most practical two digits are FF, CC, 99, 66, 33, and 00. We could also use F0, C7, 95, 61, 3A, 0E instead of FF, CC, 99, 66, 33, 00 and get the same results on a 256 color monitor, but it might come out slightly different on higher resolution monitors.

There are millions of combinations of colors within these six alphanumeric digits, but only 216 of these colors can be safely displayed by every browser. The 216 web-safe colors are always a combination of the following values:

Hex00336699CCFF
RBG051102153204255

The Browser Safe Color Palette

Web-safe colors are the set of 216 colors common to most browsers. A palette created from such colors is often called a web-safe or browser-safe palette because it produces consistent results on different platforms and browsers. When an image is displayed in a 256-color screen mode, this set of colors is never dithered.

If a designated color is not included in the default palette, the browser will choose two colors to closely replicate it. This substitution of color is called "dithering." That is why specific images may look speckled or grainy. Text will not be "dithered," but it will be displayed in the palette using the following color closest to it.

The chart below contains the 216 "Non-Dithering" palette colors showing both the RGB and the hexadecimal codes.

Non Dithering Color Chart
RGB
(0,0,0)
Hex (000000)
RGB
(0,0,51)
Hex (000033)
RGB
(0,0,102)
Hex (000066)
RGB
(0,0,153)
Hex (000099)
RGB
(0,0,204)
Hex (0000CC)
RGB
(0,0,255)
Hex (0000FF)
RGB
(51,0,0)
Hex (330000)
RGB
(51,0,51)
Hex (330033)
RGB
(51,0,102)
Hex (330066)
RGB
(51,0,153)
Hex (330099)
RGB
(51,0,204)
Hex (3300CC)
RGB
(51,0,255)
Hex (3300FF)
RGB
(102,0,0)
Hex (660000)
RGB
(102,0,51)
Hex (660033)
RGB
(102,0,102)
Hex (660066)
RGB
(102,0,153)
Hex (660099)
RGB
(102,0,204)
Hex (6600CC)
RGB
(102,0,255)
Hex (6600FF)
RGB
(153,0,0)
Hex (990000)
RGB
(153,0,51)
Hex (990033)
RGB
(153,0,102)
Hex (990066)
RGB
(153,0,153)
Hex (990099)
RGB
(153,0,204)
Hex (9900CC)
RGB
(153,0,255)
Hex (9900FF)
RGB
(204,0,0)
Hex (CC0000)
RGB
(204,0,51)
Hex (CC0033)
RGB
(204,0,102)
Hex (CC0066)
RGB
(204,0,153)
Hex (CC0099)
RGB
(204,0,204)
Hex (CC00CC)
RGB
(204,0,255)
Hex (CC00FF)
RGB
(255,0,0)
Hex (FF0000)
RGB
(255,0,51)
Hex (FF0033)
RGB
(255,0,102)
Hex (FF0066)
RGB
(255,0,153)
Hex (FF0099)
RGB
(255,0,204)
Hex (FF00CC)
RGB
(255,0,255)
Hex (FF00FF)
RGB
(0,51,0)
Hex (003300)
RGB
(0,51,51)
Hex (003333)
RGB
(0,51,102)
Hex (003366)
RGB
(0,51,153)
Hex (003399)
RGB
(0,51,204)
Hex (0033CC)
RGB
(0,51,255)
Hex (0033FF)
RGB
(51,51,0)
Hex (333300)
RGB
(51,51,51)
Hex (333333)
RGB
(51,51,102)
Hex (333366)
RGB
(51,51,153)
Hex (333399)
RGB
(51,51,204)
Hex (3333CC)
RGB
(51,51,255)
Hex (3333FF)
RGB
(102,51,0)
Hex (663300)
RGB
(102,51,51)
Hex (663333)
RGB
(102,51,102)
Hex (663366)
RGB
(102,51,153)
Hex (663399)
RGB
(102,51,204)
Hex (6633CC)
RGB
(102,51,255)
Hex (6633FF)
RGB
(153,51,0)
Hex (993300)
RGB
(153,51,51)
Hex (993333)
RGB
(153,51,102)
Hex (993366)
RGB
(153,51,153)
Hex (993399)
RGB
(153,51,204)
Hex (9933CC)
RGB
(153,51,255)
Hex (9933FF)
RGB
(204,51,0)
Hex (CC3300)
RGB
(204,51,51)
Hex (CC3333)
RGB
(204,51,102)
Hex (CC3366)
RGB
(204,51,153)
Hex (CC3399)
RGB
(204,51,204)
Hex (CC33CC)
RGB
(204,51,255)
Hex (CC33FF)
RGB
(255,51,0)
Hex (FF3300)
RGB
(255,51,51)
Hex (FF3333)
RGB
(255,51,102)
Hex (FF3366)
RGB
(255,51,153)
Hex (FF3399)
RGB
(255,51,204)
Hex (FF33CC)
RGB
(255,51,255)
Hex (FF33FF)
RGB
(0,102,0)
Hex (006600)
RGB
(0,102,51)
Hex (006633)
RGB
(0,102,102)
Hex (006666)
RGB
(0,102,153)
Hex (006699)
RGB
(0,102,204)
Hex (0066CC)
RGB
(0,102,255)
Hex (0066FF)
RGB
(51,102,0)
Hex (336600)
RGB
(51,102,51)
Hex (336633)
RGB
(51,102,102)
Hex (336666)
RG
B (51,102,153)
Hex (336699)
RGB
(51,102,204)
Hex (3366CC)
RGB
(51,102,255)
Hex (3366FF)
RGB
(102,102,0)
Hex (666600)
RGB
(102,102,51)
Hex (666633)
RGB
(102,102,102)
Hex (666666)
RGB
(102,102,153)
Hex (666699)
RGB
(102,102,204)
Hex (6666CC)
RGB
(102,102,255)
Hex (6666FF)
RGB
(153,102,0)
Hex (996600)
RGB
(153,102,51)
Hex (996633)
RGB
(153,102,102)
Hex (996666)
RGB
(153,102,153)
Hex (996699)
RGB
(153,102,204)
Hex (9966CC)
RGB
(153,102,255)
Hex (9966FF)
RGB
(204,102,0)
Hex (CC6600)
RGB
(204,102,51)
Hex (CC6633)
RGB
(204,102,102)
Hex (CC6666)
RGB
(204,102,153)
Hex (CC6699)
RGB
(204,102,204)
Hex (CC66CC)
RGB
(204,102,255)
Hex (CC66FF)
RGB
(255,102,0)
Hex (FF6600)
RGB
(255,102,51)
Hex (FF6633)
RGB
(255,102,102)
Hex (FF6666)
RGB
(255,102,153)
Hex (FF6699)
RGB
(255,102,204)
Hex (FF66CC)
RGB
(255,102,255)
Hex (FF66FF)
RGB
(0,153,0)
Hex (009900)
RGB
(0,153,51)
Hex (009933)
RGB
(0,153,102)
Hex (009966)
RGB
(0,153,153)
Hex (009999)
RGB
(0,153,204)
Hex (0099CC)
RGB
(0,153,255)
Hex (0099FF)
RGB
(51,153,0)
Hex (339900)
RGB
(51,153,51)
Hex (339933)
RGB
(51,153,102)
Hex (339966)
RGB
(51,153,153)
Hex (339999)
RGB
(51,153,204)
Hex (3399CC)
RGB
(51,153,255)
Hex (3399FF)
RGB
(102,153,0)
Hex (669900)
RGB
(102,153,51)
Hex (669933)
RGB
(102,153,102)
Hex (669966)
RGB
(102,153,153)
Hex (669999)
RGB
(102,153,204)
Hex (6699CC)
RGB
(102,153,255)
Hex (6699FF)
RGB
(153,153,0)
Hex (999900)
RGB
(153,152,51)
Hex (999933)
RGB
(153,153,102)
Hex (999966)
RGB
(153,153,153)
Hex (999999)
RGB
(153,153,204)
Hex (9999CC)
RGB
(153,153,255)
Hex (9999FF)
RGB
(204,153,0)
Hex (CC9900)
RGB
(204,153,51)
Hex (CC9933)
RGB
(204,153,102)
Hex (CC9966)
RGB
(204,153,153)
Hex (CC9999)
RGB
(204,153,204)
Hex (CC99CC)
RGB
(204,153,255)
Hex (CC99FF)
RGB
(255,153,0)
Hex (FF9900)
RGB
(255,153,51)
Hex (FF9933)
RGB
(255,153,102)
Hex (FF9966)
RGB
(255,153,153)
Hex (FF9999)
RGB
(255,153,204)
Hex (FF99CC)
RGB
(255,153,255)
Hex (FF99FF)
RGB
(0,204,0)
Hex (00CC00)
RGB
(0,204,51)
Hex (009933)
RGB
(0,204,102)
Hex (00CC66)
RGB
(0,204,153)
Hex (00CC99)
RGB
(0,204,204)
Hex (00CCCC)
RGB
(0,204,255)
Hex (00CCFF)
RGB
(51,204,0)
Hex (33CC00)
RGB
(51,204,51)
Hex (33CC33)
RGB
(51,204,102)
Hex (33CC66)
RGB
(51,204,153)
Hex (33CC99)
RGB
(51,204,204)
Hex (33CCCC)
RGB
(51,204,255)
Hex (33CCFF)
RGB
(102,204,0)
Hex (66CC00)
RGB
(102,204,51)
Hex (66CC33)
RGB
(102,204,102)
Hex (66CC66)
RGB
(102,204,153)
Hex (66CC99)
RGB
(102,204,204)
Hex (66CCCC)
RGB
(102,204,255)
Hex (66CCFF)
RGB
(153,204,0)
Hex (99CC00)
RGB
(153,204,51)
Hex (99CC33)
RGB
(153,204,102)
Hex (99CC66)
RGB
(153,204,153)
Hex (99CC99)
RGB
(153,204,204)
Hex (99CCCC)
RGB
(153,204,255)
Hex (99CCFF)
RGB
(204,204,0)
Hex (CCCC00)
RGB
(204,204,51)
Hex (CCCC33)
RGB
(204,204,102)
Hex (CCCC66)
RGB
(204,204,153)
Hex (CCCC99)
RGB
(204,204,204)
Hex (CCCCCC)
RGB
(204,204,255)
Hex (CCCCFF)
RGB
(255,204,0)
Hex (FFCC00)
RGB
(255,204,51)
Hex (FFCC33)
RGB
(255,204,102)
Hex (FFCC66)
RGB
(255,204,153)
Hex (FFCC99)
RGB
(255,204,204)
Hex (FFCCCC)
RGB
(255,204,255)
Hex (FFCCFF)
RGB
(0,255,0)
Hex (00FF00)
RGB
(0,255,51)
Hex (00FF33)
RGB
(0,255,102)
Hex (00FF66)
RGB
(0,255,153)
Hex (00FF99)
RGB
(0,255,204)
Hex (00FFCC)
RGB
(0,255,255)
Hex (00FFFF)
RGB
(51,255,0)
Hex (33FF00)
RGB
(51,255,51)
Hex (33FF33)
RGB
(51,255,102)
Hex (33FF66)
RGB
(51,255,153)
Hex (33FF99)
RGB
(51,255,204)
Hex (33FFCC)
RGB
(51,255,255)
Hex (33FFFF)
RGB
(102,255,0)
Hex (66FF00)
RGB
(102,255,51)
Hex (66FF33)
RGB
(102,255,102)
Hex (66FF66)
RGB
(102,255,153)
Hex (66FF99)
RGB
(102,255,204)
Hex (66FFCC)
RGB
(102,255,255)
Hex (66FFFF)
RGB
(153,255,0)
Hex (99FF00)
RGB
(153,255,51)
Hex (99FF33)
RGB
(153,255,102)
Hex (99FF66)
RGB
(153,255,153)
Hex (99FF99)
RGB
(153,255,204)
Hex (99FFCC)
RGB
(153,255,255)
Hex (99FFFF)
RGB
(204,255,0)
Hex (CCFF00)
RGB
(204,255,51)
Hex (CCFF33)
RGB
(204,255,102)
Hex (CCFF66)
RGB
(204,255,153)
Hex (CCFF99)
RGB
(204,255,204)
Hex (CCFFCC)
RGB
(204,255,255)
Hex (CCFFFF)
RGB
(255,255,0)
Hex (FFFF00)
RGB
(255,255,51)
Hex (FFFF33)
RGB
(255,255,102)
Hex (FFFF66)
RGB
(255,255,153)
Hex (FFFF99)
RGB
(255,255,204)
Hex (FFFFCC)
RGB
(255,255,255)
Hex (FFFFFF)