color schemes

Download Color schemes

If you can't read please download the document

Post on 20-Jan-2017




2 download

Embed Size (px)


Color Schemes

Color SchemesTeaching Presentation CIT 230:10Professor ThaynePresented by Trevon Morris

What is a Color Scheme?An arrangement of colorsA combination of colors ordered or unorderedTwo or more colors make up a color scheme

From Interior Design to WebOne 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.

From Nature to WebNature 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.

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.

Paletton.comA free project based website, that allows anyone with basic understanding of colors to create visually stunning color schemes.

How to Use

Main Color PickersCan be dragged to select main colorsChoose 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.

The Display Panel for

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.

Example Option of

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.

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: