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

PublishedElement can be used in production
Documentation
PublishedElement can be used in production
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.

ColorUse casesHex
Blue 600Primary 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.

ColorUse casesHex
WhiteBackground, surface, or offset content#FFFFFF
Gray 100Background, 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.

ColorUse casesHex
Gray 900Default 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

Storybook

Vanilla

View the color demo and code in Vanilla.
Storybook

Angular

View the color demo and code for Angular.
Storybook

React

View the color demo and code in React.

Resources

WebAIM Contrast Checker

Online contrast checker and accessibility resource.

Contrast Grid

Test foreground and background color combos for compliance.

Feedback