Color Schemes

Teaching Presentation CIT 230:10

Professor Thayne

Presented by Trevon Morris

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

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.

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.

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.com

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

How to Use Paletton.com?

Main Color PickersCan 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.

The Display Panel for Paletton.comThe 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 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.

Exporting your color schemeExporting 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