2. What is a Color Scheme?
– An arrangement of colors
– A combination of colors ordered or unordered
– Two or more colors make up a color scheme
3. From Interior Design to Web
– One inspiration of color schemes came from the interior
design concepts of the real world.
– Websites were rather basic ‘Achromatic’ color schemes,
using only white background and black text.
– Over time the need for visually stunning websites was
born.
– Interior design was one of the closest basis to derive
colors from next to nature and art.
4. From Nature to Web
– Nature is one of the other defining
evolution of web color schemes.
– The natural backdrops of the world
create awe inspiring colors.
– As such ideas of gradients were born,
and first adopted into graphic design.
– Eventually web design found ways to
implement these concepts with CSS.
5. A Working Example
This was designed
using a few colors
from the interior
design image on
slide 3. For details
on how to
develop
something similar
see the next five
slides.
6. Paletton.com
– A free project based website, that allows anyone with basic understanding of
colors to create visually stunning color schemes.
7. How to Use Paletton.com?
Main Color Pickers
Can be dragged to
select main colors
Choose how many
colors you want to
use. Too much can
get messy.
Main color modifiers
are able to change the
intensity/ hue of the
colors. Adjust to your
liking.
8. The Display Panel for Paletton.com
The display section allows you to preview, and also variate
the layout of the area.
Clicking the ‘Preview’ button
will give this option, and you
will now be able to see your
color scheme in different ways.
This can help you to make a
better choices toward your
end product.
Tinker with everything you can
always go back to default.
9. Example Option of Paletton.com
Clicking the ‘Example’ button at the
bottom of the display window, will
give this window for more preview
options. You are able to change your
color scheme from white pages to
dark, positive, and negative designs.
You are also able to view artwork
and see cool animation effects with
your colors.
10. Exporting your color scheme
Exporting your color scheme is easy and
flexible to fit your needs. You are able to
export your scheme as:
• HTML
• CSS (Global format for web)
• LESS (Mainly Linux Users)
• SASS (A variable type CSS extender)
• XML (A simple but powerful web format)
• And TEXT
Choose the one that best fits your needs,
for this course you will most likely
appreciate the CSS or TEXT file. Then apply
it to your own Stylesheets.
Send Questions to: mor15083@byui.edu
