applying color theory to digital media and visualization
TRANSCRIPT
Applying Color Theory to Digital Media and Visualization
Abstract
We examine the foundations of color theory & how these methods apply to building effective digital media. We define color harmony & demonstrate the application of color harmony to case studies. Case studies include historic & new infographics as well as time series animations. The Pantone Matching System, Munsell Color System and other hue systems are reviewed. The features of ColorBrewer, Adobe’s Capture CC app,& Josef Albers “Interaction of Color” app are examined. We also introduce “Gamut Mask” & Color Proportions of an Image analysis tools. Our course concludes with a hands on session that teaches how to use online and mobile apps to successfully capture, analyze and store color schemes for future use in visual analytics. This includes evaluations for
color deficiencies using Vizcheck & Coblis. These color suggestion tools are available online for your continued use in creating new digital media. Please bring small JPEG examples of your digital media content for performing color analyses during the hands on session.
Author Keywords Color Theory, Digital Media, Visualization
ACM Classification Keywords H.5.m. Information interfaces and presentation (e.g., HCI): Miscellaneous
Permission to make digital or hard copies of part or all of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for third-party components of this work must be honored. For all other uses, contact the Owner/Author. Copyright is held by the owner/author(s). CHI'17 Extended Abstracts, May 06-11, 2017, Denver, CO, USA ACM 978-1-4503-4656-6/17/05. http://dx.doi.org/10.1145/3027063.3076594
Theresa-Marie Rhyne Visualization Consultant Durham, North Carolina 27713, USA [email protected]
Course Summary CHI 2017, May 6–11, 2017, Denver, CO, USA
1264
Course Description We begin our course with a discussion of the historical to present day progression of color models, showing the integration of the additive Red, Green, Blue (RGB) displays model, the subtractive Cyan, Magenta, Yellow and Key Black (CMYK) printers model and the subtractive Red, Yellow, Blue (RYB) painters model. We demonstrate how the inter-relationships between color models influences the process of creating color schemes for visual analytics and visualization.
We then review color gamut, noting that a color gamut and color model combine to define a color space. We illustrate this with the International Commission on Illumination (CIE XYZ) color space and the Munsell Color System. We show how perceptual uniformity studies challenged principles of CIE XYZ and the Munsell Color System. We review the independent evolutions of the Pantone Color Matching System within the design community and Web Hex color specifications for Web page design. Additionally, we discuss the development of Hue, Saturation and Value (HSV) in the computer graphics community. We also examine the features of the online ColorBrewer tool and how to
apply these concepts in your visual analytics design work. We show how online and mobile color applications integrate between these various systems. The emergence of automated color suggestion and color proportion tools are also discussed. We complete this section with a review of color harmony principles and how to use these concepts effectively in applying color theory to visualization development. This includes a demonstration of the Color Gamut Mask tool. Case study examples and real time demonstrations are included through out the course. After presenting these concepts, our course converts to a hands on workshop session for gaining experience working with online and mobile color scheme tools. We go through the process of building and analyzing digital media color maps.We address building color blind safe color schemes with online tools like Coblis, Colorbrewer, Vischeck and Color Scheme Designer. We end our course with a wrap-up discussion and review additional reading for applying color theory to digital media and visualization.
Figure 1: Visual Overview of our Color Theory Course. Copyright by Theresa-Marie Rhyne, 2016.
Figure 2: Examples of Color Analyses Tools covered in course. Copyright by Theresa-Marie Rhyne, 2016.
Course Summary CHI 2017, May 6–11, 2017, Denver, CO, USA
1265
Outline of Course: Applying Color Theory to Digital Media & Visualization I. Introduction & Historical Progression of Color
Models (35 Minutes) a. Additive Color from Newton to Retina Displays:
Red, Green, Blue (RGB) Displays Color Model b. Subtractive Color from 19th Century to Digital:
Cyan, Magenta, Yellow and Key Black (CMYK) Printers Color Model
c. Painters Subtractive as viewed with Pigments: Red, Yellow, Blue (RYB) Painters Color Model
d. Brief Historical Overview with Visual Examples of how Color Theories Evolved - Impact of Color Science Writings on Artistic Methods (Examples: Newton, Harris, Goethe, Chevreul, Runge, Rood, Signac, Seurat and others)
e. Mobile Examples: Applying Color Theory Knowledge to Displays, Printing and Painting
(e.g. Color Companion on your Mobile Phone, Adobe Capture, ColorSnap from Sherwin Williams.)
II. Defining and Redefining Color Gamut, Color Spaces & Color Systems (35 minutes) a. Why does Color Gamut + Color Model = Color
Space? b. How Perceptual Uniformity challenges the
International Commission on Illumination Color Space (Original CIE XYZ and resulting CIELAB and CIELUV Color Spaces)
c. What is the Munsell Color System?: Munsell DG app
d. Forget Perception and Just Print, match color Pantone Color Matching! : myPantone App
e. What about Hue Saturation and Value (HSV) and Web Hex Triplets ?
f. What is Color Harmony and how to use it effectively? Yurmby Wheel, Gamut Masking Tool, ColorBrewer, Adobe Color.
g. Understanding Josef Alber's Interaction of Color concepts: Interaction of Color iPad app.
h. What about the emergence of Automated Color Suggestion and Color Proportion Systems?
BREAK (15 minutes)
III. Case Study Examples of Colorizing (30 minutes) a. Monochromatic, Complementary, & Analogous
Schemes: Historic Infographics & Maps and Current Visual Analytics (Color Companion, Colourlovers’ COPASO, Color Scheme Designer).
b. Applying ColorBrewer & Accented Analogous Color Schemes - Info Vis - Household Broadband Availability (ColorBrewer, Adobe Capture app).
c. Color Deficiency & Munsell Color Concepts: Correlation in Molecular Biological Data (Coblis for Color Deficiency Evaluation; Munsell Color System for Visual Layout of Data)
IV.Hands on: Analyzing & Modifying with Online and Mobile Color Tools (40 minutes) a. Color Design and Evaluation tools: Gamut Masking
Tool, Adobe Color, Tool, Colour Lovers web site, Color Scheme Designer.
b. Color Blindness Checks: Coblis, Color Scheme Designer, VisCheck.
c. Color Advice for Maps: ColorBrewer. d. Mobile Apps for Color Evaluations: Adobe Capture
app, Color Companion, myPantone and others.
V. Wrap-Up , Other Resources & Concluding Remarks (5 minutes) a. Applying Color Theory to Digital Media and
Visualization by Theresa-Marie Rhyne b. Interaction of Color by Josef Albers c. The Art of Color by Johannes Itten d. A Field Guide to Digital Color by Maureen Stone
Course Summary CHI 2017, May 6–11, 2017, Denver, CO, USA
1266
About the Instructor
Theresa-Marie Rhyne has over twenty-five years of experience in producing and colorizing visualization and visual analytics. She has consulted with the Stanford University Visualization Group on a Color Suggestion Prototype System, the Center for Visualization at the University of California at Davis and the Scientific Computing and Imaging Institute at the University of Utah on applying color theory to Ensemble Data Visualization. Prior to her consulting work, she founded two visualization centers: (a) the United States Environmental Protection Agency’s Scientific Visualization Center in the 1990s and (b) the Center for Visualization and Analytics at North Carolina State University in the 2000s. Presently, she has written a new book on this subject to be published by the Taylor & Francis Group / CRC Press in December2016. A video summary of this book is available online.
Length of Course: 160 minutes
Level & Intended Audience: Beginners and higher, all interested in creating effective and compelling digital media and visualizations.
Presentation Format: Lecture with hands on session for using online and mobile color tools. Working from attendees’ own laptop and/or mobile devices, attendees will be encouraged to conduct real time color analyses of JPEG or camera images.
Figure 3: Examples of Color Harmony covered in course. Copyright by Theresa-Marie Rhyne 2016.
Course Summary CHI 2017, May 6–11, 2017, Denver, CO, USA
1267