Building color palettes in your data visualization style guides

Abstract

Objectives

Data visualization style guides are standards for formatting and designing representations of information, like charts, graphs, tables, and diagrams. To assist researchers communicate their visual content in better and more effective ways, this article accomplishes two tasks. First, we take a detailed look at a data visualization style guide and its components—what it is and what it should include. Second, we create a detailed template for the color section of a data visualization style guide.

Target Audience

Creating a data visualization style guide as described here should help researchers across multiple disciplines create better and more consistent charts, graphs, and diagrams. Such style guides are useful for individuals and organizations in their efforts to be more efficient and consistent in their data communication products.

Scope

Data visualization style guides often include explaining the what (eg, types of charts), the why (eg, reasons for using specific colors), and the how (eg, tools or templates) of creating consistent and effective visuals that can also fit within an individual’s or organization’s larger design system. We use a variety of tools to create, test, and implement a data visualization color palette. We provide sample color palettes and provide step-by-step instructions on how to import those palettes into six popular data visualization tools: Microsoft Excel and PowerPoint, Tableau, PowerBI, and Adobe Illustrator and InDesign.

INTRODUCTION

Data visualization style guides are standards for formatting and designing representations of information, like charts, graphs, tables, and diagrams. These style guides often include explaining the what (eg, types of charts), the why (eg, reasons for using specific colors), and the how (eg, tools or templates) of creating consistent and effective visuals that can also fit within an organization’s larger design system and include how other guidelines, like brand standards or editorial guidelines, apply to data visualization. For example, they might specify how elements like a logo, brand colors, and language tone specifically apply to charts, tables, and diagrams.

To assist researchers—both individuals and those working in teams—communicate their data visualizations in better, more effective, and more efficient ways, this article sets out to accomplish two tasks. First, we take a detailed look at a data visualization style guide and its components—what it is, what it might and should include, and how it can be used. Second, we create a detailed template for the color section of a data visualization style guide. Here, we provide sample color palettes and demonstrate which tools researchers can use to build their own color palettes. We also provide step-by-step instructions on how to import those palettes into six popular data visualization and design tools: Microsoft Excel and PowerPoint, Tableau, PowerBI, and Adobe Illustrator and InDesign. This work should help researchers across multiple disciplines create better and more consistent charts, graphs, and diagrams.

WHAT IS A DATA VISUALIZATION STYLE GUIDE?

A data visualization style guide will help you and your team maintain a consistent style for your graphs, charts, and other visual elements by providing a unified set of styles, processes, templates, and tools.^1,2 It will also increase effectiveness and efficiency by reducing the number of decisions that need to be made for each visualization. For example, instead of having to choose colors for the bars in a bar chart or what font is going to be used for the text, a data visualization style guide sets specific guidelines for those elements and ultimately helps maintain consistency of your visual content. A data visualization style guide can help lower the barrier for other people in your teams or organizations to create better and more consistent charts and graphs. This consistency will also help your target audiences recognize your work and navigate the presentation of data and analysis.

While the contents of data visualization style guides vary from organization to organization depending on their needs, these style guides often expand on typography and color components to include design specifications for interaction, accessibility, responsiveness and even a chart library for building data visualizations. Data visualization style guides thus give concise direction specific to the organization’s needs and streamline data visualization development. It is also worth noting that data visualization style guides can be useful for individuals as well; laying out preferred color palettes, layouts, and templates can make an individual’s work look more consistent and identifiable, and in the long-run can reduce the amount of time necessary to create and format charts.

These design guidelines can be useful for all sorts of users ranging from government agencies,³ nonprofit organizations,⁴ and commercial companies,⁵ and especially useful in health care or hospital contexts. One example can be pulled from working with the rehabilitation department of a hospital system in Northern Virginia to assist them visualizing patient satisfaction scores. We used their satisfaction score data to create clear and effective charts to post in a visible area of the therapy department. Combined with templated colors and layouts, it became easier for their team to update and replicate the weekly charts and graphs. This department used the Microsoft Office suite of tools (eg, Excel and PowerPoint) and by developing consistent themes utilizing the features available in those tools (see the section below) the work to share the data was easier, faster, and more reliable.

PARTS OF A DATA VISUALIZATION STYLE GUIDE

There are many aspects of data and design that could be included in a data visualization style guide. Indeed, a more general “design system” might include aspects of an organization’s data output including website design (eg, size, layout, and how buttons will appear and work⁶) processes and development standards, dashboard design,^7–9 content strategy, and other design assets.¹⁰ But a data visualization style guide is likely to be more contained and directed than a full design system and focus on features specific to charts, graphs, and diagrams. What an individual or organization decides to include in their data visualization style will depend on their exact needs, workflow, and types of data they commonly use. Investing the time up front in setting these standards will lower the barrier for everyone in the organization to create better-looking and, ultimately, more effective data visualizations.

The range of styles, colors, fonts, and other considerations in the data visualization creation process is limitless. But to provide a starting point for data visualization designers and analysts to develop their own style guides, we have compiled a list of publicly available guides and accompanying resources at our project website (https://www.datavizstyleguide.com/). In our work collecting, examining, and assessing more than 40 data visualization style guides, we have concluded that eight primary sections that should be included in a data visualization style guide.¹¹

1. Color. Every one of the style guides we have examined establish a set of colors for different graph types and uses. Color palettes that will work across different graph types and use cases can be difficult and are often best handled by professional designers. We explore this section in more detail in the next section.

2. Typography. Most of the style guides we have collected define what font or fonts will be used, for what purpose, and in what context.¹² It is useful to define the font, size, case, color, and other aspects for different parts of a chart such as the title, subtitle, and labels.

3. Chart size and dimensions. Understanding the size, proportions, and overall dimensions of graphs and charts will make the guidelines more useful. Charts may be sized differently for different purposes—an academic report in PDF format, a PNG image file on a blog, or a JPEG image for a social media post. Some of the guides in our collection set specific sizes for different uses while others appear to rely on the defaults in the primary data visualization software tool.

4. Content. Writing plays an important role in communicating data.¹³ From plain language to active titles to useful labels and annotation, clear text can help make visualizations easier to read and more effective. We find that few of the available data visualization style guides include guidance on writing or editorial conventions, though some likely include such guides in separate toolkits. For data visualization especially, research suggests that people read titles,¹⁴ so the best current advice is to make chart titles active; that is, to describe what the reader should take away from the graph rather than just describing the data in the graph.

5. Chart parts. It can be helpful to define the different parts of a chart, especially if team members are relatively new to making graphs and charts. A simple line chart may seem like just a line in a graph, but there is a lot the user can control and style, including gridlines, text, placement, and more. The example from the Urban Institute style guide⁴ in Figure 1 is a good example of how to define the different parts of a chart and simultaneously integrate style guidelines.

6. Visualization types. Some data visualization style guides (see collection) include a limited set of graph types; others contain a longer list.¹¹ What is included will depend on the expertise and experience of the team. Start simply—include the charts most regularly used by your team, which is likely line charts, bar charts, pie/donut charts, scatterplots, maps, and tables—and then expand to other charts as the graphic literacy of the team expands.

7. Accessibility. Creating content accessible to a wide range of users is important, especially in the healthcare context where there is likely to be more users who have certain vision, intellectual, or other physical impairments.¹⁵ Color palettes should be made accessible for people with certain color vision deficiencies (often called “color blindness”).¹⁶ There are no strict rules for how to create accessible data visualization content but starting with guidelines for creating “alternative text” (alt text) for people who use screen readers is a good first step.¹⁷ The Web Content Accessibility Guidelines, published by the World Wide Web Consortium, an international group working together to develop standards for the web, are crucial in assessing whether colors, color combinations, fonts and font sizes, and other aspects of online content can be used by people with disabilities (https://www.w3.org/). From an organizational perspective, encouraging your colleagues to consider and prioritize the needs of people with disabilities in their data visualization creation process will result in better products available to more people.¹⁷ Furthermore, by incorporating those considerations early in the process rather than waiting to layer on “fixes” at the end will result in better products created more efficiently.¹⁸

8. Tools and resources. It might also be useful to include a list of data and data visualization tools and resources in the style guide. Some of the guides in our collection include specific code snippets, links to Github repositories or other code-hosting sites, templates and downloads, and other resources. Depending on the team, specific references that support and enforce other guidelines may be important—especially for researchers who often want to see scientific support for certain claims. This section might also include tools and platforms that are not necessarily data visualization tools, but collaboration, design, and color tools.

Figure 1.

Data visualization style guide example from the Urban Institute. Source: Annotated image from the Urban Institute data visualization style guide, available at http://urbaninstitute.github.io/graphics-styleguide/.

How detailed these sections are and whether they include step-by-step tutorials, code, or other downloadable materials will depend on the makeup of the team, organizational structure, and other factors. But laying out detailed styles can help chart creators be more efficient and more consistent and ultimately result in better final products.

COLOR MODELS AND PALETTES

In this section, we explore a few key elements of what a color section of a data visualization style guide might entail. We then demonstrate with a few, select color palettes and provide specific instructions on how to implement these palettes into six common data visualization tools: Microsoft Excel and PowerPoint, Tableau, PowerBI, and Adobe Illustrator and InDesign.

We do not explore the field of color theory in depth here. Numerous principles of effective color palette design have been proposed over the years^19,20 with past work recommending strategies to balance color harmony,²¹ preference,²² affect,²³ and separability.²⁴ For most data visualization creators, however, understanding the details of color theory are not necessary. Here, we hope that you will see that the current suite of digital tools (both free and for purchase) will enable you to create and implement color palettes into your style guide with relative ease and without needing to wade through the existing literature. At its core, a color palette is a collection of colors that work together.

We focus on the color section of a style guide for two primary reasons. First, it is one of the more important aspects of data visualization design because it is one of the first elements we perceive when looking at a data visualization.^25–27 In fact, color is preattentively perceived by the human visual system, which makes it a very effective encoding for categorical data when the number of categories is not too large.^25,28 Color theorist Maureen Stone once wrote that “color used well can enhance and clarify a presentation. Color used poorly will obscure, muddle and confuse.”²⁸ At the outset of viewing a visualization, readers and users will therefore immediately be drawn to different colors. Second, while it can certainly be challenging to create a color palette,^29–32 the color section of most data visualization style guides is fairly formulaic: a guide needs specific colors, models, and examples. We encourage the interested reader to explore the large collection of data visualization style guides at our project website (https://www.datavizstyleguide.com/).

The first thing to understand are the three primary codes to input color into our visualization tools.^16,33,34

1. RGB. The RGB (red-green-blue) color model is used in virtually every digital application. There are three components to the RGB model, each a number bound between 0 and 255. The dark blue color in the flag of the United States, for example, is 10, 49, 97.

2. HEX. The Hexadecimal (“HEX”) color model is also a color model for digital content and is a transformation of the RGB model into a six letter/number code. The hexadecimal system is in units of 16: 0–9 and A–F. The same blue color in the US flag is represented by the HEX code #0A3161.

3. CMYK. The CMYK (cyan-magenta-yellow-black) color model is used for print products. If you look inside your home printer, you will see four cartridges, corresponding to each color code. The blue in the US flag is represented by 100, 68, 0, 54 in the CMYK model.

Color codes can be transformed between each of these different models, generally without loss of information. There are any number of free online tools that will enable the user to simply convert one set of color codes to another (eg, https://www.rgbtohex.net/). Which one(s) are important to include in a style guide will depend on the needs of the organization, but most that we have seen (primarily because print products are no longer a primary output) focus on RGB and HEX codes.

The second component important to define when developing a color guide are the three primary color palettes used in visualizing data.

1. Categorical ( Figure 2 ). This is the simplest color palette, though maybe the most difficult to create. The goal of a categorical color palette is to distinguish one category from another, say, countries, industries, or employment status. The colors in a categorical palette should be separate and distinct so that the reader does not have to struggle to see which color is assigned to which category. Categorical colors should also be “value-neutral”; that is, the color for category A should not look “better” or “more than” the color for category B. This can be achieved by keeping the “lightness” of the colors close to one another; in other words, you do not want to have a very dark blue for one category and a pale green for another color. Finally, when possible, colors should align—though not necessarily be the same—as the organization’s branding or aesthetic. This can help keep the organization’s data visualizations and data products aligned with its overall branding and aesthetic.

   Most categorical palettes include around 5 or 6 colors, though that may be a common practice rather than a number rooted in science.³⁵ There are entire literatures related to how many objects humans can hold in our short-term memory. Some research suggests a minimum number of objects^36–38 while other (older) research suggests short-term memory can hold roughly between 5 and 7 objects at any one time.³⁹ Another line of research has examined the importance of how language and culture impacts our understanding and perception of color.^40,41 In recent research measuring perception, Tseng et al²⁷ report that scatterplots start to feel more difficult to read when there are around six categories, but people are still accurate (namely assessing means) with up to about 10 categories.

   You can see the six colors and their HEX codes in the set of boxes below and then how those colors appear in eight sample data visualizations. For purposes of this article, we modified the colors in the 2016 Eurostat Style Guide.⁴² Admittedly, because we are not starting from scratch, this makes the process of creating the initial categorical color palette easier. If you are working in small teams, in an organization without a strong visual identity, or do not have access to an expert in color or graphic design, you can always modify an existing color palette. As an example, while working to develop and modify graphs for a client’s reports and website, the client lacked an existing color palette for their visualizations, but they did have a company logo that consisted of two colors. We used the logo as a starting point to build out a palette with six colors. By providing multiple options and demonstrating how they would look in different graphs, we were able to create a usable color palette that they still use today.

2. Sequential ( Figure 3 ). Sometimes referred to as a color ramp or color gradient, the sequential palette uses a single hue (eg, green) that ranges from a light color for small numbers to a dark color for large numbers. Sequential colors should change uniformly—that is, the difference between 1 and 2 should be the same as the difference between 9 and 10 (unless, of course, using a log scale or some other transformation). In this example, we created a sequential color palette by placing the first color from the categorical color palette (#41afaa) at the center of the sequential palette.

3. Diverging ( Figure 4 ). Similar to sequential palettes, diverging palettes show the distance/difference from a center point, such as at zero or the mean or median; whatever the midpoint, it should be well defined.^43,44 The sequences of each side of the diverging palette should match in their saturation so that, for example, the darkest colors at each end of the scales are balanced. The colors on either side of the midpoint should also be distinguishable—your reader should not have to struggle to see the difference between the largest negative value and the largest positive value. We based this diverging palette on the original categorical palette from the Eurostat style guide, starting at white in the center (#ffffff) and then extending to the original colors at the ends (#d7642c at the left/negative and #466eb4 on the right/positive). We used the Coolors color palette generator (https://coolors.co/) to fill in the other pairs of red and blue gradients in the palette.

Figure 2.

Demonstrating the categorical color palette in several charts. Source: Authors’ creation using the Viz Palette (https://projects.susielu.com/viz-palette) tool.

Figure 3.

Demonstrating the sequential color palette in several charts. Source: Authors’ creation using the Viz Palette (https://projects.susielu.com/viz-palette) tool.

Figure 4.

Demonstrating the diverging color palette in several charts. Source: Authors’ creation using the Viz Palette (https://projects.susielu.com/viz-palette) tool.

Considerations for accessibility and culture

We would be remiss if we did not mention three of the major considerations (there are more, of course) when it comes to developing a color palette.

1. Accessibility. One of the major themes in data visualization accessibility is creating accessible colors. About 1 in 12 men and 1 in 200 women have some form of color vision deficiency—or “color blindness” in the modern parlance—which means they have difficulties discerning between similar shades of different colors.⁴⁵ The most common form is deuteranopia, which makes it difficult to tell the difference between similar shades of red and green. Other color vision impairments exist however, and it is worth conducting some basic tests around pairs of colors. While the color palette we create here consists of six colors, many graphs will probably only use the first 3 or 4 colors, which means those colors especially should be made accessible for as wide a range of users as possible. The WebAIM Contrast Checker (https://webaim.org/resources/contrastchecker/) is a useful tool to calculate the contrast between pairs of colors.

2. Semantics. For one reason or another, colors have meaning. In western cultures, red is often used to show errors or negative values while, in eastern cultures, red is often used to represent prosperity and good luck. Since the mid-twentieth century, the baby blue-baby pink color pair is instantly identifiable for men and women (in western cultures)—but is also rooted in sexism because pink is associated with softness and nurturing while blue is associated with reliability and stabilities. But it does not have to be this way and perhaps other color pairs are worth considering.^41,46

3. Brand colors. As much as it is valuable to match colors used in data visualizations with the organization’s branded colors, logo colors do not always work for data visualization. Take a very simple example: The logo for Coca-Cola is instantly recognizable as script text pairing red and white. Those two colors would be insufficient for a data visualization style guide, both in terms of number of distinct colors and the fact that white text/visual elements will not appear on a white background. If you are designated to turn your organization’s branded colors into data visualization colors, implement your colors into as many graphs and charts as possible to test how they will work in practice.

CREATING COLOR PALETTES

We pull the lessons together from the previous section to create a consistent color palette for an organization and include categorical, sequential, and diverging color palettes. The Supplementary Material lists a series of color tools that can be especially useful for creating and testing these palettes.

Inputting color palettes into data visualization tools

In this final section, we take our color palette and demonstrate how to import it into six of the most popular data visualization tools: Microsoft Excel and PowerPoint, Tableau, PowerBI, and Adobe Illustrator and InDesign. By incorporating considerations of color contrast, accessibility, and data uses, these color palettes can be shared and transferred between tools. If you wish to share your color palettes outside your organization, you can do so by publishing your full style guide or just the color codes on a site like Github, or even utilizing some of the color palette sharing tools such as those available at Adobe Color (https://color.adobe.com/) and ColourLovers (https://www.colourlovers.com/), for example. You can also visit our online companion site (https://www.datavizstyleguide.com/) where we provide videos on how to implement these color palettes for each tool in more detail.

• Microsoft Excel and PowerPoint. Creating custom color palettes in the Microsoft Office suite is straightforward (see Figure 5). Once a palette is created in one Microsoft product, it is available in each tool, which helps create custom content across the toolset. In Excel, at the bottom of the Colors dropdown menu in the Page Layout tab is a “Customize Colors…” button (on Mac computers, this process takes place in PowerPoint and the same Colors button can be found in the Design tab). Selecting this button enables us to input up to 12 different colors for text, backgrounds, data, and links. Once the colors are saved, Excel (or PowerPoint) automatically generates a .xml file with the name of the palette, which can be shared. You can also work in the .xml file directly and edit the code—we demonstrate this kind of approach in the next section for Tableau.

  The location of that file will depend on the exact operating system but, on Windows computers, can typically be found here: C:\Users\USERNAME\AppData\Roaming\Microsoft\Templates\Document Themes\Theme Colors.^47,48 This file is available to all of the Microsoft tools, so you now have a custom color palette available in Microsoft Excel, PowerPoint, and Word.

• Tableau. Custom color palettes in Tableau can be created by simply modifying the Preferences.tps file available in your Tableau Repository, which is typically located in the Documents folder on your computer. You can edit the Preferences.tps file by using a text editing tool like Notepad or Visual Studio Code and typing the detailed HEX codes for each color (in bold below). Once the file is saved and Tableau refreshed, the color palette will be available for use. You can then share the file or the codes separately with members of your team or with external audiences. For the sample palette used here, for example, the code would look like:

  <?xml version=‘1.0’?>

  <workbook>

    <preferences>

      <color-palette name=“New Color Palette” type=“regular” >

      <color>#41afaa</color>

      <color>#466eb4</color>

      <color>#00a0e1</color>

      <color>#e6a532</color>

      <color>#d7642c</color>

      <color>#af4b91</color>

      </color-palette>

    </preferences>

  </workbook>

  It should be noted that, to date, built-in color palettes in Tableau start at six colors but increase up from there to a default of 20 distinguishable colors.²⁵

• PowerBI. Like Excel and PowerPoint, you can modify color palettes in PowerBI either through the tool itself or by modifying the underlying .json files. Using the existing windows and menus, select a theme that is close to your new palette, and select the Customize current theme option in the menu. In the resulting dialog—which looks fairly similar to the dialog in Excel/PowerPoint—you can make changes to the colors, rename, and save.

  The underlying .json files will look similar to what you see in Tableau. For the built-in “St Patrick's Day.json” color theme, you would see the following:

  {

    “name”: “St Patrick’s Day”,

    “dataColors”: [“#568410”, “#3A6108”, “#70A322”, “#915203”, “#D79A12”, “#bb7711”, “#114400”, “#aacc66”],

    “background”:“#FFFFFF”,

    “foreground”: “#3A6108”,

    “tableAccent”: “#568410”

  }

  Again, you can simply modify the color (HEX) codes in the JSON file, rename, and save (see Ref. 20 for more details).

• Adobe Illustrator and InDesign. Integrating color palettes into Adobe projects is consistent across the different software tools (eg, Illustrator and InDesign) and shareable via your account libraries. Although there are multiple ways to accomplish this task within each program, the easiest method is taking advantage of the fact that Adobe products are now delivered through the cloud, so you can create and use your palette directly through Adobe’s online Color tool (https://color.adobe.com/).

  You can create your palette in Adobe Color (Figure 6) by entering your color codes or even extracting colors from an image you can upload to the tool (we do not recommend the latter option if you have exact color codes you want to extract, as the color extractor might not interpret the image’s colors precisely). After you are finished building the palette, select Save and you will be able to view your color palette in the Libraries tab in the top navigator. When you are ready to incorporate your palette(s) into your Adobe tools, access your shared library which will be either located on your right-side panel or under in the Window > CC Libraries menu. Your color palettes (and any other design assets) will appear directly in the Adobe tool. To add the palette to your current project, simply right click and choose Add theme to swatches and the palette will be accessible in the Swatches tab.

Figure 5.

Creating custom color palettes in Excel is a matter of simply clicking and selecting. Source: Authors’ images.

Figure 6.

Creating custom color palettes in Adobe tools is a relatively straightforward five-step process. Source: Author’s images.

DISCUSSION

The color palette we created in this paper is a modified version of the existing palette from Eurostat, the primary statistical office of the European Union. Consistent with our past experiences, building a color palette from an existing logo or design element can make this process much faster and easier. Choosing tints and shades of different colors is often easier than coming up with the original colors themselves. Utilizing the color tools we have mentioned here (and others in the Supplementary Material) can simplify this task for even the novice researcher.

Creating standardized color palettes within a larger data visualization style guide—or within an even larger overall design system^49,50—can help analysts and researchers at all levels create better and more consistent data visualizations. With colors (and color models) chosen and defined, the analyst will be better positioned to focus their attention on the best way to present the information rather than developing colors separately for each and every project. The up-front time investment in developing these colors—as well as the other elements of a style guide such as fonts, size specifications, and language—will surely pay off later.

CONCLUSION

Creating a data visualization style guide is an important step to creating effective and consistent graphs, charts, and diagrams. There are many steps to creating a useful style guide and to encouraging its use within organizations, but by building slowly, letting it evolve and change over time, and getting buy-in from different stakeholders, a style guide can be an important part of any data communicators toolkit.

When it comes to creating color palettes and implementing them into your style guide, take special considerations for aligning the colors with your organization’s brand colors (should they exist), be useful for a broad set of use cases (eg, categorical, diverging), and be accessible for people with color vision impairments. Creating a useful, functional, and beautiful color palette does not an impossible task but one that needs to be approached with care and caution.

FUNDING

This research received no specific grant from any funding agency in the public, commercial, or not-for-profit sectors.

AUTHOR CONTRIBUTIONS

Both authors jointly contributed to the analysis in this paper and to the writing of the manuscript.

SUPPLEMENTARY MATERIAL

Supplementary material is available at Journal of the American Medical Informatics Association online.

CONFLICT OF INTEREST STATEMENT

None declared.

DATA AVAILABILITY

No data were analyzed for this article.