Color Basics

A color wheel is an illustrative model of color hues
around a circle.  It shows the relationships between the
primary, secondary, and intermediate/ tertiary colors
and helps demonstrate color temperature. Digital teams
communicate exact colors through the use of hex codes.

Understanding the Color Wheel

Many color wheels are shown using 12 colors.  Using this
color wheel as an example, it can be read as follows:

  • Color wheel with Three Primary Colors (Ps): Red, Yellow, Blue; Three Secondary Colors (S’): Orange, Green, Violet; and Six Tertiary Colors (Ts):  Red-Orange, Yellow-Orange, Yellow-Green, Blue-Green, Blue-Violet, Red-Violet, which are formed by mixing a primary with a secondaryThree
    Primary Colors (Ps)
    : Red, Yellow, Blue
  • Three Secondary Colors (S’):
    Orange, Green, Violet
  • Six Tertiary Colors (Ts):
     Red-Orange, Yellow-Orange, Yellow-Green,
    Blue-Green, Blue-Violet, Red-Violet, which are
    formed by mixing a primary with a secondary

It’s important to note that some people add more
intermediates, for 24 total named colors, and some color
wheels show interior points and circles, which represent
color mixtures.

Color Temperature

The colors on the red side of the wheel are warm; the
green side of the wheel has the cooler colors. These
color temperature designations are absolute. More subtle
color temperature relationships are relative, meaning
that each color on the warm side of the wheel can be
known as cool, and colors on the cools side of the wheel
can be known as warm depending on the relationship to
their neighboring color. Colors from the same hue, for
instance red, can also be warmer or cooler than one
another.

Color temperatures affect us both psychologically and
perceptually by helping us determine how objects appear
positioned.

Warm Colors Cool Colors

Warm color scale

  • Warm colors include red, orange, and
    yellow, and variations of those
    three colors.
  • Red and yellow are both primary
    colors, with orange falling in the
    middle.
  • Warm colors appear closer to the
    observer.

Cool color scale

  • Cool colors include green, blue, and
    purple, and variations of those
    three colors.
  • Blue is the only primary color
    within the cool spectrum.
  • Greens take on some of the
    attributes of yellow, and purple
    takes on some of the attributes of
    red.
  • They are often more subdued than
    warm colors.
  • Cool colors appear farther from the
    observer.

Neutrals

Neutral colorsNeutral
colors include black, white, gray, tans, and browns.
They’re commonly combined with brighter accent colors
but they can also be used on their own in designs. The
meanings and impressions of neutral colors depend more
so upon the colors around them.

Color Models: CMYK vs. RGB

There are two models for colors.  They have different
purposes and different attributes.  They are as follows:

  • CMYK Color Model / RGB Color ModelCMYK
    Color Models
    : Stands for cyan, magenta,
    and yellow. It applies to painting and printing. 
    The CMYK model is a subtractive model, meaning that
    colors are created through absorbing wavelengths of
    visible light. The wavelengths of light that don’t
    get absorbed are reflected, and that reflected light
    ends up being the color we see.
  • RGB Color Models: RGB stands for
    red, green, and blue. It applies to computers,
    televisions, and electronics. The RGB model is an
    additive model, meaning that colors are created
    through light waves that are added together in
    particular combinations in order to produce colors.

Hex Codes

To name colors in web design, teams use hexademal code.
All hexadermal codes:

  • Start with a hash mark (#)
  • SmashingMagazine’s hex code example showing the three pairs of characters sequenced together (totaling of six characters), with each pair controlling one of the primary additive colors (red, green, blue)Consist
    of three pairs of characters sequenced together
    (totaling of six characters), with each pair
    controlling one of the primary additive colors (red,
    green, blue)
  • Those six characters following the hash mark consist
    of ten numerals (0-9) and/ or six letters (a-f)

It is easy to identify patterns in the hex codes some
colors; see SmashingMagazine’s
great chart
Exit Disclaimer at the
right for this. Some things to know include:

  • 00 is a lack of primary
  • ff is the primary at full strength

To find additive colors, start with black and change each
pair to ff:

  • SmashingMagazine’s chart showing the hex codes of black, the three additive colors, white, and the three subtractive colors#000000 is
    black (no primaries)
  • #ff0000 is the brightest red
  • #00ff00 is the brightest green
  • #0000ff is the brightest blue

To find subtractive colors, start with white and change
each pair to 00:

  • #ffffff is white (all primaries
  • #00ffff is the brightest cyan
  • #ff00ff is the brightest magenta
  • #ffff00 is the brightest yellow

It is also possible to abbreviate some hex numbers.  For
instances #fae expands to #ffaaee and #09b expands to
#0099bb.

Additional Resources

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email

0

Scroll to Top