LightningColor

Color item displaying as a table row, with color, name, description, and allows for custom columns. Design inspired by Oracle's Lightning Design System.

Token	Example	Released	Themeable	Support
$brand-disabled Disabled state of BRAND_A11Y	rgb(201, 199, 197) #c9c7c5 BRAND_DISABLED	2.6.0	Yes	GA
$brand-header Background color a branded app header	rgb(255, 255, 255) #ffffff PALETTE_GRAY_1	2.6.0	Yes	I
$brand-header-contrast Variant of BRAND_HEADER that is accessible with BRAND_HEADER	rgb(94, 94, 94) #5e5e5e BRAND_HEADER_CONTRAST	2.6.0	Yes	I
$brand-header-contrast-warm Variant of BRAND_HEADER_CONTRAST that provides a warm color	rgb(191, 2, 1) #bf0201 BRAND_HEADER_CONTRAST_WARM	2.6.0	Yes	I
$brand-primary Primary brand color	rgb(21, 137, 238) #1589ee BRAND_PRIMARY	2.6.0	Yes	GA

impact

description

serious

color-contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds...

	summary	target
	Fix any of the following: Element has insufficient color contrast of 2.2 (foreground color: #ffffff, background color: #54c473, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > table > tbody > .css-rygtr0:nth-child(1) > td:nth-child(5) > div
	Fix any of the following: Element has insufficient color contrast of 2.2 (foreground color: #ffffff, background color: #54c473, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > table > tbody > .css-rygtr0:nth-child(5) > td:nth-child(5) > div

Viewport

Token	Example	Released	Themeable	Support
$brand-disabled Disabled state of BRAND_A11Y	rgb(201, 199, 197) #c9c7c5 BRAND_DISABLED	2.6.0	Yes	GA
$brand-header Background color a branded app header	rgb(255, 255, 255) #ffffff PALETTE_GRAY_1	2.6.0	Yes	I
$brand-header-contrast Variant of BRAND_HEADER that is accessible with BRAND_HEADER	rgb(94, 94, 94) #5e5e5e BRAND_HEADER_CONTRAST	2.6.0	Yes	I
$brand-header-contrast-warm Variant of BRAND_HEADER_CONTRAST that provides a warm color	rgb(191, 2, 1) #bf0201 BRAND_HEADER_CONTRAST_WARM	2.6.0	Yes	I
$brand-primary Primary brand color	rgb(21, 137, 238) #1589ee BRAND_PRIMARY	2.6.0	Yes	GA

320px

Token	Example	Released	Themeable	Support
$brand-disabled Disabled state of BRAND_A11Y	rgb(201, 199, 197) #c9c7c5 BRAND_DISABLED	2.6.0	Yes	GA
$brand-header Background color a branded app header	rgb(255, 255, 255) #ffffff PALETTE_GRAY_1	2.6.0	Yes	I
$brand-header-contrast Variant of BRAND_HEADER that is accessible with BRAND_HEADER	rgb(94, 94, 94) #5e5e5e BRAND_HEADER_CONTRAST	2.6.0	Yes	I
$brand-header-contrast-warm Variant of BRAND_HEADER_CONTRAST that provides a warm color	rgb(191, 2, 1) #bf0201 BRAND_HEADER_CONTRAST_WARM	2.6.0	Yes	I
$brand-primary Primary brand color	rgb(21, 137, 238) #1589ee BRAND_PRIMARY	2.6.0	Yes	GA

375px

Token	Example	Released	Themeable	Support
$brand-disabled Disabled state of BRAND_A11Y	rgb(201, 199, 197) #c9c7c5 BRAND_DISABLED	2.6.0	Yes	GA
$brand-header Background color a branded app header	rgb(255, 255, 255) #ffffff PALETTE_GRAY_1	2.6.0	Yes	I
$brand-header-contrast Variant of BRAND_HEADER that is accessible with BRAND_HEADER	rgb(94, 94, 94) #5e5e5e BRAND_HEADER_CONTRAST	2.6.0	Yes	I
$brand-header-contrast-warm Variant of BRAND_HEADER_CONTRAST that provides a warm color	rgb(191, 2, 1) #bf0201 BRAND_HEADER_CONTRAST_WARM	2.6.0	Yes	I
$brand-primary Primary brand color	rgb(21, 137, 238) #1589ee BRAND_PRIMARY	2.6.0	Yes	GA

768px

Token	Example	Released	Themeable	Support
$brand-disabled Disabled state of BRAND_A11Y	rgb(201, 199, 197) #c9c7c5 BRAND_DISABLED	2.6.0	Yes	GA
$brand-header Background color a branded app header	rgb(255, 255, 255) #ffffff PALETTE_GRAY_1	2.6.0	Yes	I
$brand-header-contrast Variant of BRAND_HEADER that is accessible with BRAND_HEADER	rgb(94, 94, 94) #5e5e5e BRAND_HEADER_CONTRAST	2.6.0	Yes	I
$brand-header-contrast-warm Variant of BRAND_HEADER_CONTRAST that provides a warm color	rgb(191, 2, 1) #bf0201 BRAND_HEADER_CONTRAST_WARM	2.6.0	Yes	I
$brand-primary Primary brand color	rgb(21, 137, 238) #1589ee BRAND_PRIMARY	2.6.0	Yes	GA

1024px

Design Tokens/Colors/IBMDLColor

Design Tokens/Colors/LiquidColor

API

LightningColor

A11y tests

Viewport