Web

Color
Theory

Prepared By: Ms. Sana Shafiq

Instructor Computer

GTTI(W), Dhoke Syedan,Rawalpindi.

Introduction to color wheel

– Color wheel or color circle is a visual representation of primary,

secondary, and tertiary colors according to their chromatic
relationship around a circle.
– In the illustrative model, primary colors are placed on the corner
of equilateral triangle on the color wheel, then create a bridge
between primaries using secondary and tertiary colors. Secondary
colors are the mixture of two primary colors eg. Orange is a
mixture of red and yellow, purple is a mixture of blue and red and
green is a mixture of yellow and blue.
Color Wheel

– A basic color wheel contains the 12 standard colors used to create color
schemes. Each slice of the pie represents a family of colors that can be achieved
with different saturations, hues, tints, shades, and mixes of neighbouring colors.
The combination colors (e.g., yellow-orange) result from mixing equal amounts
of the base hues (yellow and orange).
– Red, yellow, and blue are the primary colors. Violet, orange, and green are the
secondary colors. Everything else is a tertiary color, a mix of primary and
secondary colors.
– Designs use the color wheel to choose color schemes, which come in four
flavors.
Categories of color

– The color wheel contains three types of colors:

– Primary colors cannot be created by mixing other colors together.
– Secondary colors are formed by mixing two primary colors: blue and yellow
make green, red and yellow make orange.
– Tertiary colors are derived by combining primary and secondary colors: blue-
green or red-orange.
– Web designers use these types of colors to evoke feelings when designing a
blog.
Warm and Cool Colors

– Colors also have a “warmth,” and each can be classified as either a warm or a
cool color.
– Warm colors contain higher amounts of reds and yellows. They can invoke a
sense of warmth and passion in a design. They can also feel very aggressive and
bold, reminding us of the international stop sign. That’s why red is often used in
error messages.
– Cool colors contain higher amounts of blue, evoking chilly climates, ice, winter,
water, nighttime, death, and sadness. They can carry connotations of loneliness,
coldness, and fear. Cool colors also less aggressive and much more soothing.
Think of a blue sky, or crystal clear blue waters on a beach. Relaxed yet?
Temperature

– Increasing an image’s temperature means increasing its orange levels. It

generally makes an image look warmer and happier, similar to how the world
looks happier when the sun casts its orange glow upon it. In contrast, reducing
an image’s temperature makes it look colder and less inviting, like an overcast
day.
Tints and shades

– A tint results from adding white to a color—a shade when you add black. Tints
and shades let you create monochrome color schemes by adding varying levels
of white and black to a base color.
– For example, if your base color is #8dbdd8 (a lightish blue) as seen in the image
below, you can create a monochrome scheme by choosing two tints (two
brighter blues) and two shades (two darker blues).
Saturation, hue, and lightness

– Saturation describes the intensity of a color. Increasing saturation makes the

color richer and darker, while reducing saturation makes it look faded and
lighter. When we say “light blue” or “dark green,” we’re describing changes in
saturation.
– Hue defines the degree to which a color can be described as similar to or
different from red, orange, yellow, green, blue, indigo, and violet (the colors of
the rainbow). So when you describe a color as “greenish blue,” you’re defining it
in terms of two hues.
– Lightness, also known as value or tone, defines the perceived brightness of a
color compared to pure white.
The 4 kinds of color schemes
1. Monochrome

– A monochrome color
scheme consists of various
tints, shades, and
saturations of a single base
color. They’re very cohesive,
but run the risk of becoming
monotonous.
2. Complementary

– Complementary schemes
are based on two colors
from opposite sides of the
color wheel. Because the
two hues will be wildly
different, such schemes
can very impactful and
noticeable.
3. Analogous

– Analogous schemes feature

three colors that sit next to
each other on the color
wheel. Because of the tonal
similarities, these schemes
can create a very cohesive,
unified feel, without the
monotony of a
monochrome scheme.
4. Triadic

– To make a triadic color

scheme, draw an equilateral
triangle (a triangle where all
three sides are the same
length) on the color wheel,
and select the three colors
at the points of the triangle.
This creates a diverse, yet
balanced, scheme.
RGB(Red, Green, Blue)

– RGB color is most often used for web and computer monitor color.
– It has three channels (red, green, and blue) to create a wide assortment of colors on
screen.
– You are able to adjust the values for each channel to change the color of the image
from 0 to 255, independent of one another.
– If all channels are at 0, you will get a pure black color. Similarly, if all channels are at
255, you will get an all-white color.
– By adjusting the red, green, and blue channels, you can create any color in the
rainbow, along with grays, whites, and blacks.
– If the end destination of your design project is a digital screen, use the RGB color
mode. This would go for anything that involves computers, smartphones, tablets,
TVs, cameras, etc.
When to use RGB?

– Turn to RGB if your design project involves: – Social media

– Web & app design – images for posts
– icons – profile pictures
– buttons
– profile backgrounds
– graphics
– Branding
– Visual content
– online logos
– video
– online ads
– digital graphics
– infographics
– photographs for website, social media, or
apps
What are the best file formats
for RGB
– JPEGs are ideal for RGB files because they’re a nice middle-ground between file size and
quality, and they’re readable almost anywhere.
– PSD is the standard source file for RGB documents, assuming all team members are
working with Adobe Photoshop.
– PNGs support transparency and are better for graphics that need to be superimposed
over others. Consider this file type for interface elements like buttons, icons or banners.
– GIFs capture motion, so if you’re using an animated element, such as a moving logo or a
bouncing icon, this file type would be ideal.
– It’s best to avoid TIFF, EPS, PDF and BMP for RGB purposes. These formats are not
compatible with most software, not to mention they can be unnecessarily large in terms
of data
CMYK(Cyan, Magenta,Yellow,
Black)
– Stands for "Cyan Magenta Yellow Black." These are the four basic colors used for printing
color images.
– A printing machine creates images by combining CMYK colors to varying degrees with
physical ink.
– This is known as subtractive mixing.
– All colors start as blank white, and each layer of ink reduces the initial brightness to
create the preferred color.
– When all colors are mixed together, they create pure black.
– Use CMYK for any project design that will be physically printed, not viewed on a screen.
If you need to recreate your design with ink or paint, the CMYK color mode will give you
more accurate results.
When to use CMYK?

– Turn to CMYK if your project involves: – Advertising

– Branding – billboards
– business cards – posters
– stationary – flyers
– stickers – vehicle wraps
– signs & storefronts – brochures
– Essential materials – Merchandise
– product packaging – t-shirts, hats and other branded
clothing
– restaurant menus
– promotional swag (pens, mugs,
etc.)
What are the best file formats for
CMYK?
– PDFs are ideal for CMYK files, because they are compatible with most programs.
– AI is the standard source file for CMYK, assuming all team members are working
with Adobe Illustrator.
– EPS can be a great source file alternative to AI because it is compatible with
other vector programs.
– All things considered, it’s always best to consult your printer beforehand to find
out which file format they prefer.