<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' data-hideWidget='false'></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' data-hideWidget='false'></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' data-hideWidget='false'></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' data-hideWidget='false'></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' data-hideWidget='false'></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' data-hideWidget='false'></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' data-hideWidget='false'></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' data-hideWidget='false'></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' data-hideWidget='false'></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' data-hideWidget='false'></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' data-hideWidget='false'></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' data-hideWidget='false'></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' data-hideWidget='false'></details>

<h2>Brand palette</h2>
<p>The Dell Design System v2 palette was matched against Dell’s official brand palette. See <a href="https://dell.sharepoint.com/:u:/r/sites/GlobalBrand/SitePages/Brand.aspx?csf=1&web=1&e=OTCg8c">Dell Technologies Brand guidelines</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' data-hideWidget='false'></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' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Color, along with other indicators, serves as a visual reference to build transparency and accountability in AI experiences.

AI design library leverages the Dell Design System’s light mode colors to signal, in a visually distinct way, that an experience is powered by AI. It maintains a tone that is distinct yet balanced to ensure AI functionality stands out without disrupting design harmony. 

Use of the gradient is strictly limited to identifying AI-driven experiences. It should not be applied to non-AI interfaces or general UI elements.

## Gradient

Three foundational colors (Blue 700, Berry 800, and Purple 900) are combined into a gradient that appears in key interface elements, including headlines, icons, and buttons, to provide consistent recognition of AI functionality. 

<details data-name='color-collection' data-colors='[{"color":"Blue 700, #0063B8","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 800, #7F234F","useCase":"","opacity":1,"colorBorder":""},{"color":"Purple 900, #40155C","useCase":"","opacity":1,"colorBorder":""}]' data-displaymode='horizontalColorPalette' data-hideWidget='false'></details>

## 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' data-hideWidget='false'></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' data-hideWidget='false'></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' data-hideWidget='false'></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' data-hideWidget='false'></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' data-hideWidget='false'></details>

Data visualization

## Usage


AI design library leverages the design system’s light mode colors in a visually
distinct way to signal when an experience is powered by AI. The tone is distinct
yet balanced to ensure that AI functionality stands out without disrupting the design
harmony. Color, along with other indicators, serve as visual reference to build
transparency and accountability. 


Use of the gradient is strictly limited to identifying AI-driven experiences.
It should not be applied to non-AI interfaces or general UI elements.

## 

Gradient


Three foundational colors (Blue 700, Berry 800, and Purple 900) are combined into a
gradient that appears in key interface elements—including headlines, icons, and
buttons—to provide consistent recognition of AI functionality. 



<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"","path":"","type":"Internal","ariaLabel":""},"title":"Blue 700","subtitle":"#0063B8"}]' data-NumberOfColumns='1' data-NumberOfColumnsMedium='0' data-NumberOfColumnsSmall='0' data-hideWidget='false'></details>



<details data-name='overview-collection' data-hideWidget='false'></details>

<details data-name='image-block' data-images='[{"alt":"","caption":""}]' data-numberofcolumns='1' data-hideWidget='false'></details>

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. 

Color

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
