<h2>Usage</h2>
<p>This color palette was designed to accommodate Dell’s vast range of digital products. The use cases are recommendations.</p>
<p>Accessibility considerations for color are very important: make sure your colors meet accessibility guidelines. The two primary accessibility concerns are maintaining proper contrast ratios and making sure color is not used as the only method to define meaning in an experience. Review <a href="#resources">accessibility guidance</a> below.</p>
<p>The guidelines on this page outline the general use of color. For color guidance related to specific components, visit the component-specific guidelines.</p>
<h2>Primary palette</h2>
<p>The primary blue swatches reinforce Dell’s brand while unifying touchpoints and interactions. Blue 600 is the baseline UI color for most primary interactions. This palette also includes colors for hover, focus, select, and active states. For additional guidance, refer to the component-specific guidelines.</p>
<details data-name='color-collection' data-colors='[{"color":"Blue 600, #0672CB","useCase":"Primary interaction","opacity":1,"colorBorder":""}]' data-displaymode='colorTable'></details>

<details data-name='color-collection' data-colors='[{"color":"Blue 100, #D9F5FD","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 200, #94DCF7","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 300, #5CC1EE","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 400, #31A2E3","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 500, #1282D6","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 600, #0672CB","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 700, #0063B8","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 800, #00468B","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 900, #002A58","useCase":"","opacity":1,"colorBorder":""}]' data-displaymode='horizontalColorPalette'></details>

<h2>Neutral palette</h2>
<p>These palettes feature colors which can be used for subtle backgrounds, high-contrasting elements like text and <a href="/components/divider/">dividers</a>, and <a href="/foundations/elevation/">elevation</a> and depth.</p>
<details data-name='color-collection' data-colors='[{"color":"Gray 100, #F5F6F7","useCase":"","opacity":1,"colorBorder":""},{"color":"Gray 200, #F0F0F0","useCase":"","opacity":1,"colorBorder":""},{"color":"Gray 300, #E1E1E1","useCase":"","opacity":1,"colorBorder":""},{"color":"Gray 400, #D2D2D2","useCase":"","opacity":1,"colorBorder":""},{"color":"Gray 500, #B6B6B6","useCase":"","opacity":1,"colorBorder":""},{"color":"Gray 600, #7E7E7E","useCase":"","opacity":1,"colorBorder":""},{"color":"Gray 700, #6E6E6E","useCase":"","opacity":1,"colorBorder":""},{"color":"Gray 800, #636363","useCase":"","opacity":1,"colorBorder":""},{"color":"Gray 900, #0E0E0E","useCase":"","opacity":1,"colorBorder":""}]' data-displaymode='horizontalColorPalette'></details>

<details data-name='color-collection' data-colors='[{"color":"Slate 100, #EBF1F6","useCase":"","opacity":1,"colorBorder":""},{"color":"Slate 200, #C5D4E3","useCase":"","opacity":1,"colorBorder":""},{"color":"Slate 300, #A4B8CD","useCase":"","opacity":1,"colorBorder":""},{"color":"Slate 400, #839DB4","useCase":"","opacity":1,"colorBorder":""},{"color":"Slate 500, #40586D","useCase":"","opacity":1,"colorBorder":""},{"color":"Slate 600, #293B4D","useCase":"","opacity":1,"colorBorder":""},{"color":"Slate 700, #1D2C3B","useCase":"","opacity":1,"colorBorder":""},{"color":"Slate 800, #141D28","useCase":"","opacity":1,"colorBorder":""},{"color":"Slate 900, #0A0E14","useCase":"","opacity":1,"colorBorder":""}]' data-displaymode='horizontalColorPalette'></details>

<h3>Light neutrals</h3>
<p>There are two light neutral colors that can be used for a Dell experience. Depending on the experience or product, either may be used as a background or to offset content or surfaces from the background color. For example, some products use Gray 100 as the page background and White as a container background, while others have done the opposite. Either is fine as long as you use a consistent color pattern. Whichever background color is used, make sure that all text, images, and components meet accessibility contrast ratio standards.</p>
<details data-name='color-collection' data-colors='[{"color":"White, #FFFFFF","useCase":"Background, surface, or offset content","opacity":1,"colorBorder":""},{"color":"Gray 100, #F5F6F7","useCase":"Background, surface, or offset content","opacity":1,"colorBorder":""}]' data-displaymode='colorTable'></details>

<h3>Dark neutrals</h3>
<p>The dark neutrals can be used for text, dividers, or wherever more contrast is needed. Currently, Gray 900 (the default for text) is the only dark neutral color we have defined.</p>
<p>Please note that we eliminated Black (#000000) from the color palette because pure black text does not display well on high-resolution screens.</p>
<details data-name='color-collection' data-colors='[{"color":"Gray 900, #0E0E0E","useCase":"Default text color","opacity":1,"colorBorder":""}]' data-displaymode='colorTable'></details>

<h2>Secondary palette</h2>
<p>The design system’s secondary colors may evolve into a semantic palette, which will help users with wayfinding, identifying status, understanding actions, and locating help.</p>
<p>While this palette is further defined, it’s important that designs don’t rely completely on color to convey meaning. Instead, always use text and/or icons to help clarify the context for color blind users and for those who rely on assistive technology.</p>
<p>The list below includes universally recognized feedback colors and their meanings:<br><strong>Blue:</strong> informative</p>
<p><strong>Yellow:</strong> warning</p>
<p><strong>Red:</strong> error</p>
<p><strong>Green:</strong> success</p>
<details data-name='color-collection' data-colors='[{"color":"Yellow 100, #FEEFCB","useCase":"","opacity":1,"colorBorder":""},{"color":"Yellow 200, #F5CD6F","useCase":"","opacity":1,"colorBorder":""},{"color":"Yellow 300, #E6AC28","useCase":"","opacity":1,"colorBorder":""},{"color":"Yellow 400, #CE8D00","useCase":"","opacity":1,"colorBorder":""},{"color":"Yellow 500, #B36F00","useCase":"","opacity":1,"colorBorder":""},{"color":"Yellow 600, #A36100","useCase":"","opacity":1,"colorBorder":""},{"color":"Yellow 700, #925400","useCase":"","opacity":1,"colorBorder":""},{"color":"Yellow 800, #6D3A00","useCase":"","opacity":1,"colorBorder":""},{"color":"Yellow 900, #442200","useCase":"","opacity":1,"colorBorder":""}]' data-displaymode='horizontalColorPalette'></details>

<details data-name='color-collection' data-colors='[{"color":"Red 100, #FFECEE","useCase":"","opacity":1,"colorBorder":""},{"color":"Red 200, #FFC3C9","useCase":"","opacity":1,"colorBorder":""},{"color":"Red 300, #FF99A1","useCase":"","opacity":1,"colorBorder":""},{"color":"Red 400, #FE6873","useCase":"","opacity":1,"colorBorder":""},{"color":"Red 500, #E4424D","useCase":"","opacity":1,"colorBorder":""},{"color":"Red 600, #D0353F","useCase":"","opacity":1,"colorBorder":""},{"color":"Red 700, #BB2A33","useCase":"","opacity":1,"colorBorder":""},{"color":"Red 800, #8C161F","useCase":"","opacity":1,"colorBorder":""},{"color":"Red 900, #590A0F","useCase":"","opacity":1,"colorBorder":""}]' data-displaymode='horizontalColorPalette'></details>

<details data-name='color-collection' data-colors='[{"color":"Green 100, #E9F5CE","useCase":"","opacity":1,"colorBorder":""},{"color":"Green 200, #C0DD78","useCase":"","opacity":1,"colorBorder":""},{"color":"Green 300, #9BC438","useCase":"","opacity":1,"colorBorder":""},{"color":"Green 400, #7AA809","useCase":"","opacity":1,"colorBorder":""},{"color":"Green 500, #5D8C00","useCase":"","opacity":1,"colorBorder":""},{"color":"Green 600, #4F7D00","useCase":"","opacity":1,"colorBorder":""},{"color":"Green 700, #436F00","useCase":"","opacity":1,"colorBorder":""},{"color":"Green 800, #2C5000","useCase":"","opacity":1,"colorBorder":""},{"color":"Green 900, #193100","useCase":"","opacity":1,"colorBorder":""}]' data-displaymode='horizontalColorPalette'></details>

<h2>Accent palette</h2>
<p>Accent colors can be used to add a splash of color to branding experiences or for other components that need a variety of colors to differentiate experiences. The design system team is experimenting with this palette in our data visualization and categorical patterns.</p>
<details data-name='color-collection' data-colors='[{"color":"Light Blue 100, #DAF5FD","useCase":"","opacity":1,"colorBorder":""},{"color":"Light Blue 200, #97DCF4","useCase":"","opacity":1,"colorBorder":""},{"color":"Light Blue 300, #61C1EB","useCase":"","opacity":1,"colorBorder":""},{"color":"Light Blue 400, #36A2E0","useCase":"","opacity":1,"colorBorder":""},{"color":"Light Blue 500, #1885C3","useCase":"","opacity":1,"colorBorder":""},{"color":"Light Blue 600, #0D76B2","useCase":"","opacity":1,"colorBorder":""},{"color":"Light Blue 700, #0468A1","useCase":"","opacity":1,"colorBorder":""},{"color":"Light Blue 800, #004A77","useCase":"","opacity":1,"colorBorder":""},{"color":"Light Blue 900, #002D4B","useCase":"","opacity":1,"colorBorder":""}]' data-displaymode='horizontalColorPalette'></details>

<details data-name='color-collection' data-colors='[{"color":"Purple 100, #FBEBFF","useCase":"","opacity":1,"colorBorder":""},{"color":"Purple 200, #ECC4FF","useCase":"","opacity":1,"colorBorder":""},{"color":"Purple 300, #DB9EFF","useCase":"","opacity":1,"colorBorder":""},{"color":"Purple 400, #C47AF4","useCase":"","opacity":1,"colorBorder":""},{"color":"Purple 500, #A95ADC","useCase":"","opacity":1,"colorBorder":""},{"color":"Purple 600, #994CCC","useCase":"","opacity":1,"colorBorder":""},{"color":"Purple 700, #8A3FBA","useCase":"","opacity":1,"colorBorder":""},{"color":"Purple 800, #66278F","useCase":"","opacity":1,"colorBorder":""},{"color":"Purple 900, #40155C","useCase":"","opacity":1,"colorBorder":""}]' data-displaymode='horizontalColorPalette'></details>

<details data-name='color-collection' data-colors='[{"color":"Berry 100, #FFEBF5","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 200, #FFC0DF","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 300, #F69AC6","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 400, #E574AA","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 500, #CB548D","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 600, #BA467D","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 700, #A8396F","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 800, #7F234F","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 900, #511230","useCase":"","opacity":1,"colorBorder":""}]' data-displaymode='horizontalColorPalette'></details>

<details data-name='color-collection' data-colors='[{"color":"Orange 100, #FFEED2","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 200, #FEC97A","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 300, #F8A433","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 400, #E67F01","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 500, #C96100","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 600, #B85200","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 700, #A64600","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 800, #7D2E00","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 900, #4F1A00","useCase":"","opacity":1,"colorBorder":""}]' data-displaymode='horizontalColorPalette'></details>

<h2>Brand palette</h2>
<p>The Dell Design System v2 palette was matched against Dell’s official brand palette. <a href="https://www.dell.com/en-us/lp/brand-guidelines-color">View the Dell Brand Colors</a>.</p>
<h2>Storybook demos</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit Storybook","path":"https://vanilla.delldesignsystem.com/index.html?path=/docs/foundations-color--page","type":"External"},"title":"Vanilla","description":"View the color demo and code in Vanilla.","icon":"metadata"},{"image":{"url":"","alt":""},"link":{"label":"Visit Storybook","path":"https://angular.delldesignsystem.com/index.html?path=/docs/foundations-color--page","type":"External"},"title":"Angular","description":"View the color demo and code for Angular.","icon":"angular"},{"image":{"url":"","alt":""},"link":{"label":"Visit Storybook","path":"https://react.delldesignsystem.com/index.html?path=/docs/foundations-colors--docs","type":"External"},"title":"React","description":"View the color demo and code in React.","icon":"react"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='3' data-NumberOfColumnsSmall='1'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit WebAIM","path":"https://webaim.org/resources/contrastchecker/","type":"External"},"title":"WebAIM Contrast Checker","description":"Online contrast checker and accessibility resource.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='3' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Data visualization colors are derived from the design system’s light mode colors, and expanded to include a teal color scheme intended for use exclusively within the data visualization library. Teal color usage is contained in the categorical color palette provided below.

The following palettes, categorical and semantic, are optimized for accessibility and not meant to be used with other UI components or elements outside of the data visualization library.

## Categorical palette

Categorical colors help users distinguish nonnumerical data across categories that do not have an inherent correlation. These are provided in sequence to optimize contrast for accessibility and should not be reordered at implementation. The sequences provided are determined by the number of series or colors needed to uniquely display data within charts. These accommodate up to 4 series, 5 to 12 series, and 13 to 20 series.

<details data-name='color-collection' data-colors='[{"color":"Blue 900, #002A58","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 700, #A64600","useCase":"","opacity":1,"colorBorder":""},{"color":"Teal 500, #0EA0A9","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 800, #7F234F","useCase":"","opacity":1,"colorBorder":""}]' data-displaymode='horizontalColorPalette'></details>

<details data-name='color-collection' data-colors='[{"color":"Blue 500, #1282D6","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 700, #A64600","useCase":"","opacity":1,"colorBorder":""},{"color":"Teal 500, #0EA0A9","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 700, #A8396F","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 900, #002A58","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 500, #C96100","useCase":"","opacity":1,"colorBorder":""},{"color":"Teal 900, #044E52","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 500, #CB548D","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 700, #0063B8","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 800, #7D2E00","useCase":"","opacity":1,"colorBorder":""},{"color":"Teal 700, #0B7C84","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 800, #7F234F","useCase":"","opacity":1,"colorBorder":""}]' data-displaymode='horizontalColorPalette'></details>

<details data-name='color-collection' data-colors='[{"color":"Blue 500, #1282D6","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 700, #A64600","useCase":"","opacity":1,"colorBorder":""},{"color":"Teal 500, #0EA0A9","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 700, #A8396F","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 900, #002A58","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 600, #B85200","useCase":"","opacity":1,"colorBorder":""},{"color":"Teal 900, #044E52","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 600, #BA467D","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 800, #00468B","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 500, #C96100","useCase":"","opacity":1,"colorBorder":""},{"color":"Teal 800, #076469","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 500, #CB548D","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 700, #0063B8","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 800, #7D2E00","useCase":"","opacity":1,"colorBorder":""},{"color":"Teal 700, #0B7C84","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 900, #511230","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 600, #0672CB","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 900, #4F1A00","useCase":"","opacity":1,"colorBorder":""},{"color":"Teal 600, #0D8E97","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 800, #7F234F","useCase":"","opacity":1,"colorBorder":""}]' data-displaymode='horizontalColorPalette'></details>

Note that the 13 to 20-color sequence has some color conflicts, as many shades are used together. As such, this sequence should be used only in extreme cases when more than 12 series must be displayed on the same chart. It is not generally advised to represent so many lines within a chart, as it can introduce cognitive overload.

## Semantic palette

The semantic palette is used to communicate health status. Color is not a universal experience, and usage should not rely on color alone to convey meaning. Including an [icon](/foundations/icons/), label, or both can increase user understanding.

<details data-name='color-collection' data-colors='[{"color":"Green 500, #5D8C00","useCase":"1px inner stroke","opacity":1,"colorBorder":"Green 700, #436F00"},{"color":"Yellow 300, #E6AC28","useCase":"1px inner stroke","opacity":1,"colorBorder":"Yellow 500, #B36F00"},{"color":"Red 700, #BB2A33","useCase":"1px inner stroke","opacity":1,"colorBorder":"Red 800, #8C161F"}]' data-displaymode='horizontalColorPalette'></details>

## Resources

<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit Figma","path":"https://www.figma.com/file/a1X9m1vTZdG3N6xV5G9bz4/Data-Visualization?type=design&node-id=55%3A29491&t=p3daCXHfcuWM3qso-1","type":"External"},"title":"Figma","description":"View the data visualization colors in Figma.","icon":"figma"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>

Data visualization

## Accessibility

While color can add richness and meaning to an experience, there are two specific areas to consider when creating accessible experiences:

* Making sure the contrast ratio between colors adequately meets accessibility standards.
* Not relying on color alone to indicate meaning.

### Color contrast ratio requirements: light mode

Color contrast is the difference between the brightness of the text or graphics and the brightness of the background color behind it. It’s expressed as a ratio ranging from 1:1 (white on white) to 21:1 (black on white).

A higher contrast ratio means that text or graphics will be easier to read for color blind users, those who read in bright- or low-light conditions, or for those with vision impairments.

The main WCAG 2.2 [guidelines for contrast](https://www.w3.org/TR/WCAG22/#contrast-minimum) requirements are featured below. Remember, these ratios are the minimum requirements. Having a higher ratio will mean even better accessibility.

### Text contrast ratios

There are different contrast requirements for text depending on font-size and weight.

| Type                  | Size                                                                                                                                               | AA minimum color contrast ratio                                                                     |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| Larger text           | 24-pixel font-size or greater, with regular font-weights of at least 400; 18-pixel font size, bolded or with font-weight of 700 or greater         | 3:1 against the background                                                                          |
| Normal and small text | 23-pixel font size or below, with regular font-weight of at least 400; 17-pixel font size or below, bolded or with a font-weight of 700 or greater | 4.5:1 against the background                                                                        |
| Text links            | Follow text size and weight guidance above                                                                                                         | 4.5:1 contrast against the background (3.1 for large text); 3:1 contrast from surrounding body text |

### User interface and graphics contrast ratio requirements 

All UI (user interface) components require adequate contrast. A UI component is defined as anything “perceived as a control for a distinct function,” such as a [button](/components/button/). The smaller or thinner an element appears, the higher contrast it will need. The higher contrast requirement will overrule a lower one, such as small text on a button, or a thin-stroked icon in a UI element.

For graphics, contrast is only required for elements that relay meaning, such as [icons](/foundations/icons/) or [data visualizations](/data-visualization/line-chart/).

WCAG 2.2: [1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast)

| Type                                       | Definition                                                                                       | AA minimum color contrast ratio |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------ | ------------------------------- |
| UI components                              | Any interactive UI element or control with a visually distinguishable boundary                   | 3:1 against the background      |
| Graphics with thicker strokes and/or fills | Non-logo graphics with essential meaning that contain 3px strokes and above                      | 3:1 against the background      |
| Graphics with thin strokes                 | Non-logo graphics with essential meaning that contain 3px strokes and below                      | 4.5:1 against the background    |
| Visual focus indicator                     | Any custom styling applied to a component to indicate it is currently focused via keyboard input | 3:1 against the background      |

**Exceptions**

Some graphical elements are exempt from WCAG’s current contrast requirements. If there’s any doubt that an element is exempt, proceed with the assumption that it does require contrast ratios be met.

Excluded elements:

* Logo images that can’t be replaced by actual text
* Disabled UI component states
* Graphics with no text that are used purely to create a sensory effect

### Communicating with color

Don’t use color as the only way of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Anyone who sees color differently, because they have color blindness, for example, may not be able to discern the function or meaning in your design. Adopt these techniques to design color-agnostic experiences that are accessible and usable for all:

* Use patterns and textures mixed with color to show contrast, instead of color alone.
* Use symbols or [icons](/foundations/icons/) along with colors to convey error messages.
* Add text labels to accompany messages with color where appropriate.
* Test color combinations with a color blindness simulator and be careful about using colors (such as reds and greens or blues and purples) that can’t be differentiated by people with certain types of color vision deficiencies.

WCAG 2.2: [1.4.1 Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)

Accessibility

The use of color in an experience helps define communication, meaning, brand, and roles, making it easier for users to interact, search, and differentiate elements!