{"componentChunkName":"component---src-pages-data-visualization-color-palettes-index-mdx","path":"/data-visualization/color-palettes/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Color palettes","description":"The color palette for data visualization is a select subset of the IBM Design Language color palette."},"relativePagePath":"/data-visualization/color-palettes/index.mdx","titleType":"prepend","MdxNode":{"id":"d0381570-b99f-55d2-8aa1-d3a09d79c4af","children":[],"parent":"afcb34ec-6d62-5672-8876-2f63f858e2e4","internal":{"content":"---\ntitle: Color palettes\ndescription: The color palette for data visualization is a select subset of the IBM Design Language color palette.\n---\n\n<PageDescription>\n\nThe color palette for data visualizations is a select subset of the IBM Design Language color palette. It is designed to maximize accessibility and harmony within a page.\n\n</PageDescription>\n\n<InlineNotification>\n\n**Note:** This guidance is a work in progress. To see our roadmap, make feature requests, or contribute, please go to carbon-charts [GitHub repository](https://github.com/carbon-design-system/carbon-charts).\n\n</InlineNotification>\n\n<AnchorLinks>\n\n<AnchorLink>Categorical palettes</AnchorLink>\n<AnchorLink>Sequential palettes</AnchorLink>\n<AnchorLink>Alert palette</AnchorLink>\n<AnchorLink>Gradient use</AnchorLink>\n\n</AnchorLinks>\n\n## Resources\n\n<Row className=\"resource-card-group\">\n  <Column colLg={4} colMd={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Data visualization color palettes (IBM internal link)\"\n      href=\"https://ibm.box.com/s/3mt8fshtgy70r7rhxjhfo3gbdt0n3x5y\"\n      actionIcon=\"download\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n## Categorical palettes\n\nCategorical (or qualitative) palettes are best when you want to distinguish discrete categories of data that do not have an inherent correlation.\n\nThe colors of this palette should be applied in sequence strictly as described below. The sequence is carefully curated to maximize contrast between neighboring colors to help with visual differentiation.\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/palettes-14catsm.png)\n![1 category option 1](images/palettes-14cat.png)\n![1 category option 1](images/palettes-14cat.png)\n\n</ArtDirection>\n<Caption>\n\nComplete default categorical palette in light and dark themes\n\n</Caption>\n\n</Column>\n</Row>\n\nYou can override the categorical sequence with one of the following palettes if the exact number of data categories is predictable.\n\n### Light theme alternatives\n\n**1-Color**\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-light-1sm.png)\n![1 category option 1](images/alts-light-1.png)\n![1 category option 1](images/alts-light-1.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n**2-Color**\n\n<Row>\n<Column  colLg={12} colMd={8} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-light-2sm.png)\n![1 category option 1](images/alts-light-2.png)\n![1 category option 1](images/alts-light-2.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n**3-Color**\n\n<Row>\n<Column  colLg={12} colMd={8} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-light-3sm.png)\n![1 category option 1](images/alts-light-3.png)\n![1 category option 1](images/alts-light-3.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n**4-Color**\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-light-4sm.png)\n![1 category option 1](images/alts-light-4.png)\n![1 category option 1](images/alts-light-4.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n**5-Color**\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-light-5sm.png)\n![1 category option 1](images/alts-light-5.png)\n![1 category option 1](images/alts-light-5.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n### Dark theme alternatives\n\n**1-Color**\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-dark-1sm.png)\n![1 category option 1](images/alts-dark-1.png)\n![1 category option 1](images/alts-dark-1.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n**2-Color**\n\n<Row>\n<Column  colLg={12} colMd={8} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-dark-2sm.png)\n![1 category option 1](images/alts-dark-2.png)\n![1 category option 1](images/alts-dark-2.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n**3-Color**\n\n<Row>\n<Column  colLg={12} colMd={8} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-dark-3sm.png)\n![1 category option 1](images/alts-dark-3.png)\n![1 category option 1](images/alts-dark-3.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n**4-Color**\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-dark-4sm.png)\n![1 category option 1](images/alts-dark-4.png)\n![1 category option 1](images/alts-dark-4.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n**5-Color**\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-dark-5sm.png)\n![1 category option 1](images/alts-dark-5.png)\n![1 category option 1](images/alts-dark-5.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n## Sequential palettes\n\n### Monochromatic\n\nThe monochromatic palettes are good for relationship charts and trend charts. In light themes, the darkest color denotes the largest values. In dark themes, the lightest color denotes the largest values.\n\n**Palette 1**\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![Monochromatic palette 1](images/palettes-mono-1sm.png)\n![Monochromatic palette 1](images/palettes-mono-1.png)\n![Monochromatic palette 1](images/palettes-mono-1.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n**Palette 2**\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![Monochromatic palette 2](images/palettes-mono-2sm.png)\n![Monochromatic palette 2](images/palettes-mono-2.png)\n![Monochromatic palette 2](images/palettes-mono-2.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n### Diverging palettes\n\nPlease note that diverging palettes do not differentiate between light and dark themes.\n\n#### Palette 1\n\nThe red-cyan palette has a natural association with temperature. Use this palette for data representing hot-vs-cold.\n\n<Row>\n<Column colLg={12} colMd={6} colSm={4}>\n<ArtDirection>\n\n![Diverging palette 1](images/palettes-div1sm.png)\n![Diverging palette 1](images/palettes-div1.png)\n![Diverging palette 1](images/palettes-div1.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n#### Palette 2\n\nThe purple-teal palette is good for data with no temperature associations, such as performance, sales, and rates of change.\n\n<Row>\n<Column colLg={12} colMd={6} colSm={4}>\n<ArtDirection>\n\n![Diverging palette 2](images/palettes-div2sm.png)\n![Diverging palette 2](images/palettes-div2.png)\n![Diverging palette 2](images/palettes-div2.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n## Alert palette\n\nAlert colors are used to reflect status. Typically, red represents danger or error; orange represents a serious warning; yellow represents a regular warning, and green represents normal or success.\n\n<Row>\n<Column colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![Alert palette](images/palettes-alert-sm.png)\n![Alert palette](images/palettes-alert.png)\n![Alert palette](images/palettes-alert.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n## Gradient use\n\n<InlineNotification>\n\n**Note:** Gradients are not yet supported in Carbon Charts. This exploration is subject to change.\n\n</InlineNotification>\n\nGradients are good for highlighting extremes in a range of values. Use a gradient on single category visualizations only if needed. Multiple gradients are often inaccessible and are discouraged in our system. Gradients should not be used to represent any meaningful progression or divergence. Never use a gradient in place of a sequential palette.\n\nFor the full list of approved gradient options, see the IBM Design Language [Color page](https://www.ibm.com/design/language/elements/color#gradients).\n\n<Row>\n<Column colLg={8} colMd={6} colSm={4}>\n\n![Gradient palette](images/gradient.png)\n\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"7ce603c3c569087e9bd95e9cfa0921f2","counter":1420,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Color palettes","description":"The color palette for data visualization is a select subset of the IBM Design Language color palette."},"exports":{},"rawBody":"---\ntitle: Color palettes\ndescription: The color palette for data visualization is a select subset of the IBM Design Language color palette.\n---\n\n<PageDescription>\n\nThe color palette for data visualizations is a select subset of the IBM Design Language color palette. It is designed to maximize accessibility and harmony within a page.\n\n</PageDescription>\n\n<InlineNotification>\n\n**Note:** This guidance is a work in progress. To see our roadmap, make feature requests, or contribute, please go to carbon-charts [GitHub repository](https://github.com/carbon-design-system/carbon-charts).\n\n</InlineNotification>\n\n<AnchorLinks>\n\n<AnchorLink>Categorical palettes</AnchorLink>\n<AnchorLink>Sequential palettes</AnchorLink>\n<AnchorLink>Alert palette</AnchorLink>\n<AnchorLink>Gradient use</AnchorLink>\n\n</AnchorLinks>\n\n## Resources\n\n<Row className=\"resource-card-group\">\n  <Column colLg={4} colMd={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Data visualization color palettes (IBM internal link)\"\n      href=\"https://ibm.box.com/s/3mt8fshtgy70r7rhxjhfo3gbdt0n3x5y\"\n      actionIcon=\"download\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n## Categorical palettes\n\nCategorical (or qualitative) palettes are best when you want to distinguish discrete categories of data that do not have an inherent correlation.\n\nThe colors of this palette should be applied in sequence strictly as described below. The sequence is carefully curated to maximize contrast between neighboring colors to help with visual differentiation.\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/palettes-14catsm.png)\n![1 category option 1](images/palettes-14cat.png)\n![1 category option 1](images/palettes-14cat.png)\n\n</ArtDirection>\n<Caption>\n\nComplete default categorical palette in light and dark themes\n\n</Caption>\n\n</Column>\n</Row>\n\nYou can override the categorical sequence with one of the following palettes if the exact number of data categories is predictable.\n\n### Light theme alternatives\n\n**1-Color**\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-light-1sm.png)\n![1 category option 1](images/alts-light-1.png)\n![1 category option 1](images/alts-light-1.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n**2-Color**\n\n<Row>\n<Column  colLg={12} colMd={8} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-light-2sm.png)\n![1 category option 1](images/alts-light-2.png)\n![1 category option 1](images/alts-light-2.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n**3-Color**\n\n<Row>\n<Column  colLg={12} colMd={8} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-light-3sm.png)\n![1 category option 1](images/alts-light-3.png)\n![1 category option 1](images/alts-light-3.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n**4-Color**\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-light-4sm.png)\n![1 category option 1](images/alts-light-4.png)\n![1 category option 1](images/alts-light-4.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n**5-Color**\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-light-5sm.png)\n![1 category option 1](images/alts-light-5.png)\n![1 category option 1](images/alts-light-5.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n### Dark theme alternatives\n\n**1-Color**\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-dark-1sm.png)\n![1 category option 1](images/alts-dark-1.png)\n![1 category option 1](images/alts-dark-1.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n**2-Color**\n\n<Row>\n<Column  colLg={12} colMd={8} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-dark-2sm.png)\n![1 category option 1](images/alts-dark-2.png)\n![1 category option 1](images/alts-dark-2.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n**3-Color**\n\n<Row>\n<Column  colLg={12} colMd={8} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-dark-3sm.png)\n![1 category option 1](images/alts-dark-3.png)\n![1 category option 1](images/alts-dark-3.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n**4-Color**\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-dark-4sm.png)\n![1 category option 1](images/alts-dark-4.png)\n![1 category option 1](images/alts-dark-4.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n**5-Color**\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![1 category option 1](images/alts-dark-5sm.png)\n![1 category option 1](images/alts-dark-5.png)\n![1 category option 1](images/alts-dark-5.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n## Sequential palettes\n\n### Monochromatic\n\nThe monochromatic palettes are good for relationship charts and trend charts. In light themes, the darkest color denotes the largest values. In dark themes, the lightest color denotes the largest values.\n\n**Palette 1**\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![Monochromatic palette 1](images/palettes-mono-1sm.png)\n![Monochromatic palette 1](images/palettes-mono-1.png)\n![Monochromatic palette 1](images/palettes-mono-1.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n**Palette 2**\n\n<Row>\n<Column  colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![Monochromatic palette 2](images/palettes-mono-2sm.png)\n![Monochromatic palette 2](images/palettes-mono-2.png)\n![Monochromatic palette 2](images/palettes-mono-2.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n### Diverging palettes\n\nPlease note that diverging palettes do not differentiate between light and dark themes.\n\n#### Palette 1\n\nThe red-cyan palette has a natural association with temperature. Use this palette for data representing hot-vs-cold.\n\n<Row>\n<Column colLg={12} colMd={6} colSm={4}>\n<ArtDirection>\n\n![Diverging palette 1](images/palettes-div1sm.png)\n![Diverging palette 1](images/palettes-div1.png)\n![Diverging palette 1](images/palettes-div1.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n#### Palette 2\n\nThe purple-teal palette is good for data with no temperature associations, such as performance, sales, and rates of change.\n\n<Row>\n<Column colLg={12} colMd={6} colSm={4}>\n<ArtDirection>\n\n![Diverging palette 2](images/palettes-div2sm.png)\n![Diverging palette 2](images/palettes-div2.png)\n![Diverging palette 2](images/palettes-div2.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n## Alert palette\n\nAlert colors are used to reflect status. Typically, red represents danger or error; orange represents a serious warning; yellow represents a regular warning, and green represents normal or success.\n\n<Row>\n<Column colLg={8} colMd={6} colSm={4}>\n<ArtDirection>\n\n![Alert palette](images/palettes-alert-sm.png)\n![Alert palette](images/palettes-alert.png)\n![Alert palette](images/palettes-alert.png)\n\n</ArtDirection>\n</Column>\n</Row>\n\n## Gradient use\n\n<InlineNotification>\n\n**Note:** Gradients are not yet supported in Carbon Charts. This exploration is subject to change.\n\n</InlineNotification>\n\nGradients are good for highlighting extremes in a range of values. Use a gradient on single category visualizations only if needed. Multiple gradients are often inaccessible and are discouraged in our system. Gradients should not be used to represent any meaningful progression or divergence. Never use a gradient in place of a sequential palette.\n\nFor the full list of approved gradient options, see the IBM Design Language [Color page](https://www.ibm.com/design/language/elements/color#gradients).\n\n<Row>\n<Column colLg={8} colMd={6} colSm={4}>\n\n![Gradient palette](images/gradient.png)\n\n</Column>\n</Row>\n","fileAbsolutePath":"/zeit/3eb073a4/src/pages/data-visualization/color-palettes/index.mdx"}}}}