Color

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.

Status

Figma UI Kit	PublishedElement can be used in production
Documentation	PublishedElement can be used in production
Vanilla	PublishedElement can be used in production

What's new

The new design system color palette was created to meet Dell’s brand and accessibility standards. Colors now degrade to gray scale and comply with WCAG 2.1 contrast ratios.

Usage

This color palette was designed to accommodate Dell’s vast range of digital products. The use cases are recommendations.

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 accessibility guidance below.

The guidelines on this page outline the general use of color. For color guidance related to specific components, visit the component-specific guidelines.

Primary palette

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.

Color	Use cases	Hex
Blue 600	Primary interaction	#0672CB

Blue 100#D9F5FD

Blue 200#94DCF7

Blue 300#5CC1EE

Blue 400#31A2E3

Blue 500#1282D6

Blue 600#0672CB

Blue 700#0063B8

Blue 800#00468B

Blue 900#002A58

Neutral palette

This palette features colors which can be used for subtle backgrounds, high-contrasting elements like text and dividers, and elevation and depth.

Gray 100#F5F6F7

Gray 200#F0F0F0

Gray 300#E1E1E1

Gray 400#D2D2D2

Gray 500#B6B6B6

Gray 600#7E7E7E

Gray 700#6E6E6E

Gray 800#636363

Gray 900#0E0E0E

Light neutrals

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.

Color	Use cases	Hex
White	Background, surface, or offset content	#FFFFFF
Gray 100	Background, surface, or offset content	#F5F6F7

Dark neutrals

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.

Please note that we eliminated Black (#000000) from the color palette because pure black text does not display well on high-resolution screens.

Color	Use cases	Hex
Gray 900	Default text color	#0E0E0E

Secondary palette

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.

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.

The list below includes universally recognized feedback colors and their meanings:
Blue: informative
Yellow: warning
Red: error
Green: success

Yellow 100#FEEFCB

Yellow 200#F5CD6F

Yellow 300#E6AC28

Yellow 400#CE8D00

Yellow 500#B36F00

Yellow 600#A36100

Yellow 700#925400

Yellow 800#6D3A00

Yellow 900#442200

Red 100#FFECEE

Red 200#FFC3C9

Red 300#FF99A1

Red 400#FE6873

Red 500#E4424D

Red 600#D0353F

Red 700#BB2A33

Red 800#8C161F

Red 900#590A0F

Green 100#E9F5CE

Green 200#C0DD78

Green 300#9BC438

Green 400#7AA809

Green 500#5D8C00

Green 600#4F7D00

Green 700#436F00

Green 800#2C5000

Green 900#193100

Accent palette

Accent colors can be used to add a splash of color in 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.

Light Blue 100#DAF5FD

Light Blue 200#97DCF4

Light Blue 300#61C1EB

Light Blue 400#36A2E0

Light Blue 500#1885C3

Light Blue 600#0D76B2

Light Blue 700#0468A1

Light Blue 800#004A77

Light Blue 900#002D4B

Purple 100#FBEBFF

Purple 200#ECC4FF

Purple 300#DB9EFF

Purple 400#C47AF4

Purple 500#A95ADC

Purple 600#994CCC

Purple 700#8A3FBA

Purple 800#66278F

Purple 900#40155C

Berry 100#FFEBF5

Berry 200#FFC0DF

Berry 300#F69AC6

Berry 400#E574AA

Berry 500#CB548D

Berry 600#BA467D

Berry 700#A8396F

Berry 800#7F234F

Berry 900#511230

Orange 100#FFEED2

Orange 200#FEC97A

Orange 300#F8A433

Orange 400#E67F01

Orange 500#C96100

Orange 600#B85200

Orange 700#A64600

Orange 800#7D2E00

Orange 900#4F1A00

Brand palette

The Dell Design System v2 palette was matched against Dell’s official brand palette. View the Dell Brand Colors.

Storybook demos

View the color demo and code in Vanilla.

View the color demo and code for Angular.

View the color demo and code in React.

Resources

Online contrast checker and accessibility resource.

Test foreground and background color combos for compliance.

Feedback

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.

Blue 900#002A58

Orange 700#A64600

Teal 500#0EA0A9

Berry 800#7F234F

Blue 500#1282D6

Orange 700#A64600

Teal 500#0EA0A9

Berry 700#A8396F

Blue 900#002A58

Orange 500#C96100

Teal 900#044E52

Berry 500#CB548D

Blue 700#0063B8

Orange 800#7D2E00

Teal 700#0B7C84

Berry 800#7F234F

Blue 500#1282D6

Orange 700#A64600

Teal 500#0EA0A9

Berry 700#A8396F

Blue 900#002A58

Orange 600#B85200

Teal 900#044E52

Berry 600#BA467D

Blue 800#00468B

Orange 500#C96100

Teal 800#076469

Berry 500#CB548D

Blue 700#0063B8

Orange 800#7D2E00

Teal 700#0B7C84

Berry 900#511230

Blue 600#0672CB

Orange 900#4F1A00

Teal 600#0D8E97

Berry 800#7F234F

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, label, or both can increase user understanding.

Green 500#5D8C00Green 700#436F001px inner stroke

Yellow 300#E6AC28Yellow 500#B36F001px inner stroke

Red 700#BB2A33Red 800#8C161F1px inner stroke

Resources

View the data visualization colors in Figma.

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.1 guidelines for contrast 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. 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 or data visualizations.

WCAG 2.1: 1.4.11 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 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.1: 1.4.1 Use of Color

Color

Status

Contents

What's new

Usage

Primary palette

Neutral palette

Light neutrals

Dark neutrals

Secondary palette

Accent palette

Brand palette

Storybook demos

Vanilla

Angular

React

Resources

WebAIM Contrast Checker

Contrast Grid

Feedback

Contents

CONTENTS

Usage

Categorical palette

Semantic palette

Resources

Figma

CONTENTS

Accessibility

Color contrast ratio requirements: light mode

Text contrast ratios

User interface and graphics contrast ratio requirements

Communicating with color

Color

Status

Contents

What's newCopy link to this section

UsageCopy link to this section

Primary paletteCopy link to this section

Neutral paletteCopy link to this section

Light neutrals

Dark neutrals

Secondary paletteCopy link to this section

Accent paletteCopy link to this section

Brand paletteCopy link to this section

Storybook demosCopy link to this section

Vanilla

Angular

React

ResourcesCopy link to this section

WebAIM Contrast Checker

Contrast Grid

Feedback

Contents

Figma

What's new

Usage

Primary palette

Neutral palette

Secondary palette

Accent palette

Brand palette

Storybook demos

Resources