Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Understanding color theory

From: Interactive Data Visualization with Processing

Video: Understanding color theory

In this movie, I want to introduce you to some very basic concepts of Color Scheme management and introduce you also, to some resources for learning more about how you can work with and use color in your own sketches and your own visualizations. The first thing I want to do is introduce you to three different web-based tools, all of which have fabulous resources and you can try each one for different purposes. The first one that we've looked at before is Adobes Kuler and it's at kuler.adobe.com, and what you get here when you first click in, is you see a bunch of Color Schemes and in fact, you can just come and click on one and it fills up the entire page.

Understanding color theory

In this movie, I want to introduce you to some very basic concepts of Color Scheme management and introduce you also, to some resources for learning more about how you can work with and use color in your own sketches and your own visualizations. The first thing I want to do is introduce you to three different web-based tools, all of which have fabulous resources and you can try each one for different purposes. The first one that we've looked at before is Adobes Kuler and it's at kuler.adobe.com, and what you get here when you first click in, is you see a bunch of Color Schemes and in fact, you can just come and click on one and it fills up the entire page.

Click back and you see that you have a whole collection of palettes that you can try. What's more significant is that you can click on one of these and you can get all sorts of information you need, for instance; the Hex codes, the HSV, the RGB codes. But watch also what you can do. One of these is set as the base color. It's this color right here. And if you want to you can start playing around with Common Color schemes, for instance we have an Analogous color scheme. It's going to take all colors that are very close to each other. And truthfully these are very soothing.

You can often get a reasonable amount of differentiation with an Analogous color scheme without being too jarring. Or you can do a Monochromatic, you see on the color wheel they are all in one straight line. A Triad on the other hand is a temptation, but unfortunately Triads often have too much contrast in them, and it can make it feel disjointed when you're looking at a picture. Complementary has two different sides, and that can give you sort of a main color with small variations and highlight color. Compound starts to introduce a lot of colors and you want to be aware of the risks of that.

Again, you're trying to convey an impression of cohesion and of coherence and you don't want to have too many colors, just enough to highlight the things you need to do. And this one Shades, all shades are the same color. Again, there may even be enough contrast within this to be useful for what you want to do. But one of the most interesting things about Adobe's Kuler is this one right over here. If you come to Create and From an Image because what it can do is it, can take a picture and allow you to highlight parts of the picture and get the palette from that picture.

You have five little dots in here and you can move them around and you can see how the color changes as you go through. And you can go to Flickr and just choose all sorts of different pictures. So let's go a few pages in. So we've got a photo right here and you can just start identifying the palette in it or the things you would like to have in a palette. Even more importantly, you can upload your own photos by clicking on here, putting your own photos and identifying the colors in them.

It's a great way to just get the Hex codes or the RGB codes, but also for ways of looking how you could incorporate other colors into it. Plus you see here on the left we have the Select a Mood, and what that's going to do is it's going to take the colors that are in the picture and suggest color schemes that might go with that. So we have the colorful one, the bright one. This is a very monochrome picture. I am not getting much variation on these. In fact, I better go get a different picture. And so now what I do is we have the Colorful by default and we do have very bright colors down. The Bright, the Muted--you can that we're getting different parts of the same photo. The dots are moving around to show us what it's getting.

And so this is one of the really great things about the Adobe Kuler system. The next one I want to show you is the Color Scheme Designer. And this one also has some great color theory tools. You can for instance, specify the complementary scheme were we get a bright apple green in there. It's kind of overwhelming. The triad which is extremely overwhelming. The tetrad which is even more so. So, the analogic, those are very bright colors for an analogic, but we can rotate them around and maybe get something that's less overwhelming. So for instance maybe right there.

An accented analogic includes a bright contrast there, and so there may be situations which want to do that, but the really cool thing about the Color Scheme Designer is on the bottom right, where you get to pick the page examples. It'll show you a mockup web page with those color examples. You can also pick a dark page. For me the ability to see it in context is one of the great things about the Color Scheme Designer. Also, I should mention that you can check for Colorblind and then you can adjust appropriately or you can specify different Color spaces.

For instance using what are called web safe colors. The third tool I want to show you is Colorbrewer. This one was specifically developed for cartography. But what it really does that's neat, is it allows you to specify categories. How many different categories do you need to have? That's the number of classes on your map. It's on the top left. Right now we have 3, but let's say you need 5, and then what you can do is this says the nature of your data and this is trying to get a sequential more to less, and you'll notice it's not fading in from one color to another. It's using the same shade.

People are pretty good at reading the same shades. I am going to come down for just a moment. I am going to turn off the borders and so that's a sequential one and you can pick different colors for that if you want. But you also have the option of getting what's called a diverging. It's where it's like going into the positive and the negative only a little bit and strongly in both cases, and that's not too difficult to read, but the bottom part does get overwhelming. And the other one is qualitative where it's simply trying to create different distinctions, and I got to tell you, this one's kind of a disaster. It looks like Easter eggs and that's just too much going on for five groups.

Three you might be able to manage, but that's the neat thing about this one. Colorbrewer is also able to specify colorblind safe palettes. I like this one, the photocopy-able palettes, because sometimes things get totally destroyed in photocopies or even just a printer friendly ones and it gives more information about each one. So those are some of the things you can do with the Colorbrewer tool. I encourage you to take a look at each one of these as you try to figure out color schemes that it would work for your own visualizations. And with that, I want to refer you to three different courses that are also offered by lynda.com.

The first one is Working with Color which is produced by Bruce Heavin, and this one is a wonderful background of the general principles of color. We talk about the relative value, the relationships, and so on. The second one is Color Management Essential Training where you learn about the workflow in various programs, as well as the different versions of what is called color space. I like color management in Mac OS X, working with Adobe, and so on, and then the last one is a short course by Mordy Golding on using Kuler, which I showed you just a moment ago, and so this one is great.

It's only 47 minutes total and teach you everything you need to know about using Kuler to it's full power and designing your own sketches and your own online data visualizations, and between those I think you should have an excellent start and working with your own judgment and your own experience, I think you'll be able to produce some spectacular illustrations that are both attractive and informative to your audience.

Show transcript

This video is part of

Image for Interactive Data Visualization with Processing
Interactive Data Visualization with Processing

72 video lessons · 12120 viewers

Barton Poulson
Author

 
Expand all | Collapse all
  1. 3m 16s
    1. Welcome
      58s
    2. What you should know
      1m 22s
    3. Using the exercise files
      56s
  2. 11m 51s
    1. Overview of data visualization
      11m 51s
  3. 11m 53s
    1. Installing Processing
      3m 38s
    2. Overview of Processing
      4m 5s
    3. Exploring libraries
      4m 10s
  4. 1h 1m
    1. Basic setup
      7m 31s
    2. Drawing points
      4m 37s
    3. Drawing lines
      5m 6s
    4. Drawing ellipses and circles
      5m 24s
    5. Drawing arcs
      6m 54s
    6. Drawing rectangles and squares
      4m 58s
    7. Drawing quadrangles
      3m 25s
    8. Drawing triangles
      2m 55s
    9. Drawing polygons
      3m 37s
    10. Drawing simple curves
      4m 54s
    11. Drawing complex curves
      6m 46s
    12. Drawing Bézier curves
      5m 38s
  5. 54m 3s
    1. Introduction to variables
      10m 44s
    2. Understanding variable scope
      6m 53s
    3. Modifying variables
      9m 8s
    4. Creating arrays
      9m 53s
    5. Modifying arrays
      6m 37s
    6. Creating strings
      7m 3s
    7. Modifying strings
      3m 45s
  6. 1h 2m
    1. Incorporating randomness
      7m 59s
    2. Using Perlin noise
      4m 24s
    3. Shuffling with Java
      3m 30s
    4. Specifying line attributes
      8m 2s
    5. Changing placement modes
      5m 45s
    6. Understanding color attributes and functions
      4m 16s
    7. Exploring color spaces
      7m 44s
    8. Using color palettes
      7m 5s
    9. Transforming the grid
      8m 38s
    10. Exploring the attribute matrix
      5m 33s
  7. 52m 7s
    1. Building code blocks
      5m 57s
    2. Writing a while loop
      3m 52s
    3. Using for loops
      5m 35s
    4. Creating conditionals
      14m 50s
    5. Working with easing
      10m 51s
    6. Creating spirals
      11m 2s
  8. 18m 55s
    1. Mouse tracking
      3m 54s
    2. Hovering and clicking
      11m 16s
    3. Understanding keyboard interaction
      3m 45s
  9. 27m 32s
    1. Specifying fonts
      6m 43s
    2. Using images
      5m 51s
    3. Playing a video loop
      6m 20s
    4. Exporting video
      3m 47s
    5. Adding sound
      4m 51s
  10. 20m 49s
    1. Creating functions
      11m 48s
    2. Creating classes and objects
      9m 1s
  11. 31m 10s
    1. Using embedded data
      5m 26s
    2. Working with appended text data
      6m 4s
    3. Working with appended tabular data
      10m 26s
    4. Reading XML data
      9m 14s
  12. 48m 17s
    1. Generating dot plots
      11m 11s
    2. Building scatter plots
      10m 0s
    3. Making line plots
      9m 55s
    4. Creating bar charts
      9m 12s
    5. Checking out examples of maps, hierarchies, and networks
      7m 59s
  13. 20m 57s
    1. Introducing some principles of 2D design
      13m 44s
    2. Understanding color theory
      7m 13s
  14. 24m 46s
    1. Interacting with zooming, rotating, and sliding
      6m 26s
    2. Implementing slicing
      6m 47s
    3. Using rollovers
      5m 58s
    4. Introducing the GUI libraries
      5m 35s
  15. 10m 35s
    1. Sharing via OpenProcessing and other sites
      3m 19s
    2. Saving as a desktop application
      2m 42s
    3. Saving as JavaScript
      1m 47s
    4. Saving as an Android application
      2m 47s
  16. 2m 38s
    1. Where to go from here
      2m 38s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Interactive Data Visualization with Processing.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.