Color

Color

Color utility classes for background and fill, border, and text colors.

Color: Gray Palette

Preview

No content has been added for this component.

No content has been added for this component.

About Color

Color Utility Classes

Quickly style backgrounds and fills, borders, and text colors with these utility classes.

On Accessibility and Color Contrast

Be aware of the wcag recommendations for color contrast ratios when using these colors. Ensure that all elements have proper contrast ratios.


Overview of CSS Classes

Selector.slds-color__text_gray-1
Summary

Text color utility class for Palette Gray #1

Restrict*
ModifierTrue
Selector.slds-color__text_gray-2
Summary

Text color utility class for Palette Gray #2

Restrict*
ModifierTrue
Selector.slds-color__text_gray-3
Summary

Text color utility class for Palette Gray #3

Restrict*
ModifierTrue
Selector.slds-color__text_gray-4
Summary

Text color utility class for Palette Gray #4

Restrict*
ModifierTrue
Selector.slds-color__text_gray-5
Summary

Text color utility class for Palette Gray #5

Restrict*
ModifierTrue
Selector.slds-color__text_gray-6
Summary

Text color utility class for Palette Gray #6

Restrict*
ModifierTrue
Selector.slds-color__text_gray-7
Summary

Text color utility class for Palette Gray #7

Restrict*
ModifierTrue
Selector.slds-color__text_gray-8
Summary

Text color utility class for Palette Gray #8

Restrict*
ModifierTrue
Selector.slds-color__text_gray-9
Summary

Text color utility class for Palette Gray #9

Restrict*
ModifierTrue
Selector.slds-color__text_gray-10
Summary

Text color utility class for Palette Gray #10

Restrict*
ModifierTrue
Selector.slds-color__text_gray-11
Summary

Text color utility class for Palette Gray #11

Restrict*
ModifierTrue
Selector.slds-color__text_gray-12
Summary

Text color utility class for Palette Gray #12

Restrict*
ModifierTrue
Selector.slds-color__background_gray-1
Summary

Background color utility class for Palette Gray #1

Restrict*
ModifierTrue
Selector.slds-color__background_gray-2
Summary

Background color utility class for Palette Gray #2

Restrict*
ModifierTrue
Selector.slds-color__background_gray-3
Summary

Background color utility class for Palette Gray #3

Restrict*
ModifierTrue
Selector.slds-color__background_gray-4
Summary

Background color utility class for Palette Gray #4

Restrict*
ModifierTrue
Selector.slds-color__background_gray-5
Summary

Background color utility class for Palette Gray #5

Restrict*
ModifierTrue
Selector.slds-color__background_gray-6
Summary

Background color utility class for Palette Gray #6

Restrict*
ModifierTrue
Selector.slds-color__background_gray-7
Summary

Background color utility class for Palette Gray #7

Restrict*
ModifierTrue
Selector.slds-color__background_gray-8
Summary

Background color utility class for Palette Gray #8

Restrict*
ModifierTrue
Selector.slds-color__background_gray-9
Summary

Background color utility class for Palette Gray #9

Restrict*
ModifierTrue
Selector.slds-color__background_gray-10
Summary

Background color utility class for Palette Gray #10

Restrict*
ModifierTrue
Selector.slds-color__background_gray-11
Summary

Background color utility class for Palette Gray #11

Restrict*
ModifierTrue
Selector.slds-color__background_gray-12
Summary

Background color utility class for Palette Gray #12

Restrict*
ModifierTrue
Selector.slds-color__border_gray-1
Summary

Border color utility class for Palette Gray #1

Restrict*
ModifierTrue
Selector.slds-color__border_gray-2
Summary

Border color utility class for Palette Gray #2

Restrict*
ModifierTrue
Selector.slds-color__border_gray-3
Summary

Border color utility class for Palette Gray #3

Restrict*
ModifierTrue
Selector.slds-color__border_gray-4
Summary

Border color utility class for Palette Gray #4

Restrict*
ModifierTrue
Selector.slds-color__border_gray-5
Summary

Border color utility class for Palette Gray #5

Restrict*
ModifierTrue
Selector.slds-color__border_gray-6
Summary

Border color utility class for Palette Gray #6

Restrict*
ModifierTrue
Selector.slds-color__border_gray-7
Summary

Border color utility class for Palette Gray #7

Restrict*
ModifierTrue
Selector.slds-color__border_gray-8
Summary

Border color utility class for Palette Gray #8

Restrict*
ModifierTrue
Selector.slds-color__border_gray-9
Summary

Border color utility class for Palette Gray #9

Restrict*
ModifierTrue
Selector.slds-color__border_gray-10
Summary

Border color utility class for Palette Gray #10

Restrict*
ModifierTrue
Selector.slds-color__border_gray-11
Summary

Border color utility class for Palette Gray #11

Restrict*
ModifierTrue
Selector.slds-color__border_gray-12
Summary

Border color utility class for Palette Gray #12

Restrict*
ModifierTrue
Selector.slds-color__fill_gray-1
Summary

SVG Fill color utility class for Palette Gray #1

Restrict*
ModifierTrue
Selector.slds-color__fill_gray-2
Summary

SVG Fill color utility class for Palette Gray #2

Restrict*
ModifierTrue
Selector.slds-color__fill_gray-3
Summary

SVG Fill color utility class for Palette Gray #3

Restrict*
ModifierTrue
Selector.slds-color__fill_gray-4
Summary

SVG Fill color utility class for Palette Gray #4

Restrict*
ModifierTrue
Selector.slds-color__fill_gray-5
Summary

SVG Fill color utility class for Palette Gray #5

Restrict*
ModifierTrue
Selector.slds-color__fill_gray-6
Summary

SVG Fill color utility class for Palette Gray #6

Restrict*
ModifierTrue
Selector.slds-color__fill_gray-7
Summary

SVG Fill color utility class for Palette Gray #7

Restrict*
ModifierTrue
Selector.slds-color__fill_gray-8
Summary

SVG Fill color utility class for Palette Gray #8

Restrict*
ModifierTrue
Selector.slds-color__fill_gray-9
Summary

SVG Fill color utility class for Palette Gray #9

Restrict*
ModifierTrue
Selector.slds-color__fill_gray-10
Summary

SVG Fill color utility class for Palette Gray #10

Restrict*
ModifierTrue
Selector.slds-color__fill_gray-11
Summary

SVG Fill color utility class for Palette Gray #11

Restrict*
ModifierTrue
Selector.slds-color__fill_gray-12
Summary

SVG Fill color utility class for Palette Gray #12

Restrict*
ModifierTrue