Colors

Caution

Status: Alpha (learn more)

Note

Primitive tokens are fixed values that will not differ between brands. Semantic tokens are mapped to primitive tokens and can differ between brands. Prefer semantic colors when they’re available for a matching semantic use-case. Otherwise, use whichever is more appropriate.

Primitive

Neutral

--tng-color-neutral-black

#000000

--tng-color-neutral-white

#ffffff

--tng-color-neutral-black

#000000

--tng-color-neutral-white

#ffffff

Grey

--tng-color-grey-100

#fbfbfc

--tng-color-grey-200

#f5f5f5

--tng-color-grey-300

#e4e4e4

--tng-color-grey-400

#e5e3e1

--tng-color-grey-500

#d4d2d1

--tng-color-grey-600

#a8aaac

--tng-color-grey-700

#999999

--tng-color-grey-800

#6c7073

--tng-color-grey-900

#666666

--tng-color-grey-1000

#4d4d4d

--tng-color-grey-1100

#333333

--tng-color-grey-1200

#282830

--tng-color-grey-1300

#1a1a1a

--tng-color-grey-1400

#15151b

--tng-color-grey-100

#fbfbfc

--tng-color-grey-200

#f5f5f5

--tng-color-grey-300

#e4e4e4

--tng-color-grey-400

#e5e3e1

--tng-color-grey-500

#d4d2d1

--tng-color-grey-600

#a8aaac

--tng-color-grey-700

#999999

--tng-color-grey-800

#6c7073

--tng-color-grey-900

#666666

--tng-color-grey-1000

#4d4d4d

--tng-color-grey-1100

#333333

--tng-color-grey-1200

#282830

--tng-color-grey-1300

#1a1a1a

--tng-color-grey-1400

#15151b

Blue

--tng-color-blue-100

#e9f4ff

--tng-color-blue-200

#c6e3ff

--tng-color-blue-300

#95c6ff

--tng-color-blue-400

#60a7ff

--tng-color-blue-500

#0072f0

--tng-color-blue-600

#001874

--tng-color-blue-700

#00004e

--tng-color-blue-800

#00001d

--tng-color-blue-100

#e9f4ff

--tng-color-blue-200

#c6e3ff

--tng-color-blue-300

#95c6ff

--tng-color-blue-400

#60a7ff

--tng-color-blue-500

#0072f0

--tng-color-blue-600

#001874

--tng-color-blue-700

#00004e

--tng-color-blue-800

#00001d

Copper

--tng-color-copper-100

#f3e2da

--tng-color-copper-200

#e4bca9

--tng-color-copper-300

#d49677

--tng-color-copper-400

#c57046

--tng-color-copper-500

#905233

--tng-color-copper-100

#f3e2da

--tng-color-copper-200

#e4bca9

--tng-color-copper-300

#d49677

--tng-color-copper-400

#c57046

--tng-color-copper-500

#905233

Green

--tng-color-green-100

#ebfaeb

--tng-color-green-200

#c9e7ca

--tng-color-green-300

#93f694

--tng-color-green-400

#6fd171

--tng-color-green-500

#4caf50

--tng-color-green-600

#208a2b

--tng-color-green-700

#006800

--tng-color-green-800

#004600

--tng-color-green-100

#ebfaeb

--tng-color-green-200

#c9e7ca

--tng-color-green-300

#93f694

--tng-color-green-400

#6fd171

--tng-color-green-500

#4caf50

--tng-color-green-600

#208a2b

--tng-color-green-700

#006800

--tng-color-green-800

#004600

Indigo

--tng-color-indigo-100

#e5e9ed

--tng-color-indigo-200

#ccd3db

--tng-color-indigo-300

#8899ac

--tng-color-indigo-400

#445e7c

--tng-color-indigo-500

#00244d

--tng-color-indigo-600

#001a38

--tng-color-indigo-700

#001834

--tng-color-indigo-100

#e5e9ed

--tng-color-indigo-200

#ccd3db

--tng-color-indigo-300

#8899ac

--tng-color-indigo-400

#445e7c

--tng-color-indigo-500

#00244d

--tng-color-indigo-600

#001a38

--tng-color-indigo-700

#001834

Red

--tng-color-red-100

#fdaaaa

--tng-color-red-200

#fc7979

--tng-color-red-300

#fa4747

--tng-color-red-400

#ff0022

--tng-color-red-500

#d40605

--tng-color-red-600

#a40404

--tng-color-red-700

#720303

--tng-color-red-800

#410202

--tng-color-red-100

#fdaaaa

--tng-color-red-200

#fc7979

--tng-color-red-300

#fa4747

--tng-color-red-400

#ff0022

--tng-color-red-500

#d40605

--tng-color-red-600

#a40404

--tng-color-red-700

#720303

--tng-color-red-800

#410202

Yellow

--tng-color-yellow-100

#fff9e5

--tng-color-yellow-200

#fff4cc

--tng-color-yellow-300

#ffefb2

--tng-color-yellow-400

#ffe066

--tng-color-yellow-500

#e5b700

--tng-color-yellow-600

#cca300

--tng-color-yellow-700

#7f6600

--tng-color-yellow-800

#4c3d00

--tng-color-yellow-100

#fff9e5

--tng-color-yellow-200

#fff4cc

--tng-color-yellow-300

#ffefb2

--tng-color-yellow-400

#ffe066

--tng-color-yellow-500

#e5b700

--tng-color-yellow-600

#cca300

--tng-color-yellow-700

#7f6600

--tng-color-yellow-800

#4c3d00

Semantic

The semantic color tokens have their background colors split across three different semantic roles.

Background

Surface

Fill

Border

--tng-color-border-contrast-default

#e4e4e4

--tng-color-border-contrast-emphasis

#ffffff

--tng-color-border-contrast-muted

#6c7073

--tng-color-border-contrast-subtle

#a8aaac

--tng-color-border-dim-contrast-default

rgba(255, 255, 255, 0.5)

--tng-color-border-dim-contrast-muted

rgba(255, 255, 255, 0.2)

--tng-color-border-dim-contrast-subtle

rgba(255, 255, 255, 0.3)

--tng-color-border-dim-neutral-default

rgba(0, 0, 0, 0.65)

--tng-color-border-dim-neutral-muted

rgba(0, 0, 0, 0.25)

--tng-color-border-dim-neutral-subtle

rgba(0, 0, 0, 0.55)

--tng-color-border-error-default

#cc0000

--tng-color-border-error-muted

#ffd0c9

--tng-color-border-error-subtle

#ff3333

--tng-color-border-ev-default

#d49677

--tng-color-border-focus-contrast-default

#60a7ff

--tng-color-border-focus-neutral-default

#0072f0

--tng-color-border-info-default

#001874

--tng-color-border-info-muted

#c6e3ff

--tng-color-border-info-subtle

#0072f0

--tng-color-border-neutral-default

#282830

--tng-color-border-neutral-emphasis

#000000

--tng-color-border-neutral-muted

#a8aaac

--tng-color-border-neutral-subtle

#999999

--tng-color-border-primary-default

#15151b

--tng-color-border-primary-muted

#6c7073

--tng-color-border-primary-subtle

#282830

--tng-color-border-secondary-default

#c57046

--tng-color-border-secondary-muted

#e4bca9

--tng-color-border-secondary-subtle

#d49677

--tng-color-border-success-default

#006800

--tng-color-border-success-muted

#6fd171

--tng-color-border-success-subtle

#4caf50

--tng-color-border-warning-default

#e5b700

--tng-color-border-contrast-default

#e4e4e4

--tng-color-border-contrast-emphasis

#ffffff

--tng-color-border-contrast-muted

#6c7073

--tng-color-border-contrast-subtle

#a8aaac

--tng-color-border-dim-contrast-default

rgba(255, 255, 255, 0.45)

--tng-color-border-dim-contrast-muted

rgba(255, 255, 255, 0.2)

--tng-color-border-dim-contrast-subtle

rgba(255, 255, 255, 0.35)

--tng-color-border-dim-neutral-default

rgba(0, 0, 0, 0.65)

--tng-color-border-dim-neutral-muted

rgba(0, 0, 0, 0.25)

--tng-color-border-dim-neutral-subtle

rgba(0, 0, 0, 0.55)

--tng-color-border-error-default

#cc0000

--tng-color-border-error-muted

#ffd0c9

--tng-color-border-error-subtle

#ff3333

--tng-color-border-ev-default

#0072f0

--tng-color-border-focus-contrast-default

#60a7ff

--tng-color-border-focus-neutral-default

#0072f0

--tng-color-border-info-default

#001874

--tng-color-border-info-muted

#c6e3ff

--tng-color-border-info-subtle

#0072f0

--tng-color-border-neutral-default

#282830

--tng-color-border-neutral-emphasis

#15151b

--tng-color-border-neutral-muted

#a8aaac

--tng-color-border-neutral-subtle

#6c7073

--tng-color-border-primary-default

#ff0022

--tng-color-border-primary-muted

#fdaaaa

--tng-color-border-primary-subtle

#fa4747

--tng-color-border-secondary-default

#003641

--tng-color-border-secondary-muted

#328994

--tng-color-border-secondary-subtle

#006d7a

--tng-color-border-success-default

#006800

--tng-color-border-success-muted

#6fd171

--tng-color-border-success-subtle

#4caf50

--tng-color-border-warning-default

#e5b700

Background

--tng-color-background-contrast-default

#000000

--tng-color-background-contrast-muted

#15151b

--tng-color-background-contrast-subtle

#1a1a1a

--tng-color-background-neutral-default

#ffffff

--tng-color-background-neutral-muted

#e5e3e1

--tng-color-background-neutral-subtle

#f5f5f5

--tng-color-background-contrast-default

#282830

--tng-color-background-contrast-muted

#15151b

--tng-color-background-contrast-subtle

#15151b

--tng-color-background-neutral-default

#ffffff

--tng-color-background-neutral-muted

#e5e3e1

--tng-color-background-neutral-subtle

#e4e4e4

Fill

--tng-color-fill-bz4x-default

#003641

--tng-color-fill-bz4x-muted

#328994

--tng-color-fill-bz4x-subtle

#006d7a

--tng-color-fill-contrast-default

#d4d2d1

--tng-color-fill-contrast-emphasis

#f5f5f5

--tng-color-fill-contrast-muted

#333333

--tng-color-fill-contrast-subtle

#4d4d4d

--tng-color-fill-dim-contrast-default

rgba(255, 255, 255, 0.45)

--tng-color-fill-dim-contrast-muted

rgba(255, 255, 255, 0.2)

--tng-color-fill-dim-contrast-subtle

rgba(255, 255, 255, 0.35)

--tng-color-fill-dim-neutral-default

rgba(0, 0, 0, 0.65)

--tng-color-fill-dim-neutral-muted

rgba(0, 0, 0, 0.25)

--tng-color-fill-dim-neutral-subtle

rgba(0, 0, 0, 0.55)

--tng-color-fill-error-default

#cc0000

--tng-color-fill-error-muted

#ffeeec

--tng-color-fill-error-subtle

#ffd0c9

--tng-color-fill-info-default

#001874

--tng-color-fill-info-muted

#c6e3ff

--tng-color-fill-info-subtle

#0072f0

--tng-color-fill-neutral-default

#999999

--tng-color-fill-neutral-emphasis

#4d4d4d

--tng-color-fill-neutral-muted

#f5f5f5

--tng-color-fill-neutral-subtle

#e5e3e1

--tng-color-fill-primary-default

#001a38

--tng-color-fill-primary-muted

#8899ac

--tng-color-fill-primary-subtle

#00244d

--tng-color-fill-secondary-default

#d49677

--tng-color-fill-secondary-muted

#c57046

--tng-color-fill-secondary-subtle

#c57046

--tng-color-fill-success-default

#006800

--tng-color-fill-success-muted

#c9e7ca

--tng-color-fill-success-subtle

#93f694

--tng-color-fill-warning-default

#fff9e5

--tng-color-fill-bz4x-default

#003641

--tng-color-fill-bz4x-muted

#328994

--tng-color-fill-bz4x-subtle

#006d7a

--tng-color-fill-contrast-default

#e4e4e4

--tng-color-fill-contrast-emphasis

#ffffff

--tng-color-fill-contrast-muted

#6c7073

--tng-color-fill-contrast-subtle

#a8aaac

--tng-color-fill-dim-contrast-default

rgba(255, 255, 255, 0.45)

--tng-color-fill-dim-contrast-muted

rgba(255, 255, 255, 0.2)

--tng-color-fill-dim-contrast-subtle

rgba(255, 255, 255, 0.35)

--tng-color-fill-dim-neutral-default

rgba(0, 0, 0, 0.65)

--tng-color-fill-dim-neutral-muted

rgba(0, 0, 0, 0.25)

--tng-color-fill-dim-neutral-subtle

rgba(0, 0, 0, 0.55)

--tng-color-fill-error-default

#cc0000

--tng-color-fill-error-muted

#ffeeec

--tng-color-fill-error-subtle

#ffd0c9

--tng-color-fill-info-default

#001874

--tng-color-fill-info-muted

#c6e3ff

--tng-color-fill-info-subtle

#0072f0

--tng-color-fill-neutral-default

#282830

--tng-color-fill-neutral-emphasis

#000000

--tng-color-fill-neutral-muted

#a8aaac

--tng-color-fill-neutral-subtle

#6c7073

--tng-color-fill-primary-default

#d40605

--tng-color-fill-primary-muted

#fdaaaa

--tng-color-fill-primary-subtle

#fa4747

--tng-color-fill-secondary-default

#d40605

--tng-color-fill-secondary-muted

#fdaaaa

--tng-color-fill-secondary-subtle

#fa4747

--tng-color-fill-success-default

#006800

--tng-color-fill-success-muted

#c9e7ca

--tng-color-fill-success-subtle

#93f694

--tng-color-fill-warning-default

#fff9e5

Foreground

--tng-color-foreground-contrast-default

#fbfbfc

--tng-color-foreground-contrast-emphasis

#ffffff

--tng-color-foreground-contrast-muted

#666666

--tng-color-foreground-contrast-subtle

#d4d2d1

--tng-color-foreground-error-default

#cc0000

--tng-color-foreground-error-muted

#ffd0c9

--tng-color-foreground-error-subtle

#ff3333

--tng-color-foreground-info-default

#001874

--tng-color-foreground-info-muted

#c6e3ff

--tng-color-foreground-info-subtle

#0072f0

--tng-color-foreground-neutral-default

#333333

--tng-color-foreground-neutral-emphasis

#000000

--tng-color-foreground-neutral-muted

#999999

--tng-color-foreground-neutral-subtle

#4d4d4d

--tng-color-foreground-primary-on-contrast-default

#00244d

--tng-color-foreground-primary-on-contrast-muted

#ccd3db

--tng-color-foreground-primary-on-contrast-subtle

#8899ac

--tng-color-foreground-primary-on-neutral-default

#00244d

--tng-color-foreground-primary-on-neutral-muted

#ccd3db

--tng-color-foreground-primary-on-neutral-subtle

#8899ac

--tng-color-foreground-secondary-default

#d49677

--tng-color-foreground-secondary-muted

#c57046

--tng-color-foreground-secondary-subtle

#c57046

--tng-color-foreground-success-default

#006800

--tng-color-foreground-success-muted

#6fd171

--tng-color-foreground-success-subtle

#4caf50

--tng-color-foreground-warning-default

#fff9e5

--tng-color-foreground-contrast-default

#fbfbfc

--tng-color-foreground-contrast-emphasis

#ffffff

--tng-color-foreground-contrast-muted

#e4e4e4

--tng-color-foreground-contrast-subtle

#f5f5f5

--tng-color-foreground-error-default

#cc0000

--tng-color-foreground-error-muted

#ffd0c9

--tng-color-foreground-error-subtle

#ff3333

--tng-color-foreground-info-default

#001874

--tng-color-foreground-info-muted

#95c6ff

--tng-color-foreground-info-subtle

#0072f0

--tng-color-foreground-neutral-default

#282830

--tng-color-foreground-neutral-emphasis

#15151b

--tng-color-foreground-neutral-muted

#a8aaac

--tng-color-foreground-neutral-subtle

#6c7073

--tng-color-foreground-primary-on-contrast-default

#d40605

--tng-color-foreground-primary-on-contrast-muted

#fdaaaa

--tng-color-foreground-primary-on-contrast-subtle

#ff0022

--tng-color-foreground-primary-on-neutral-default

#d40605

--tng-color-foreground-primary-on-neutral-muted

#fdaaaa

--tng-color-foreground-primary-on-neutral-subtle

#ff0022

--tng-color-foreground-secondary-default

#003641

--tng-color-foreground-secondary-muted

#328994

--tng-color-foreground-secondary-subtle

#006d7a

--tng-color-foreground-success-default

#006800

--tng-color-foreground-success-muted

#6fd171

--tng-color-foreground-success-subtle

#4caf50

--tng-color-foreground-warning-default

#fff9e5

Surface

--tng-color-surface-contrast-default

#00244d

--tng-color-surface-contrast-error

#ff0022

--tng-color-surface-contrast-success

#6fd171

--tng-color-surface-dim-contrast-default

rgba(255, 255, 255, 0.45)

--tng-color-surface-dim-contrast-muted

rgba(255, 255, 255, 0.2)

--tng-color-surface-dim-contrast-subtle

rgba(255, 255, 255, 0.35)

--tng-color-surface-dim-neutral-default

rgba(0, 0, 0, 0.65)

--tng-color-surface-dim-neutral-muted

rgba(0, 0, 0, 0.25)

--tng-color-surface-dim-neutral-subtle

rgba(0, 0, 0, 0.55)

--tng-color-surface-neutral-default

#ffffff

--tng-color-surface-neutral-error

#ff0022

--tng-color-surface-neutral-muted

#e5e9ed

--tng-color-surface-neutral-subtle

#f5f5f5

--tng-color-surface-neutral-success

#006800

--tng-color-surface-contrast-default

#282830

--tng-color-surface-contrast-error

#ff0022

--tng-color-surface-contrast-success

#6fd171

--tng-color-surface-dim-contrast-default

rgba(255, 255, 255, 0.45)

--tng-color-surface-dim-contrast-muted

rgba(255, 255, 255, 0.2)

--tng-color-surface-dim-contrast-subtle

rgba(255, 255, 255, 0.35)

--tng-color-surface-dim-neutral-default

rgba(0, 0, 0, 0.65)

--tng-color-surface-dim-neutral-muted

rgba(0, 0, 0, 0.25)

--tng-color-surface-dim-neutral-subtle

rgba(0, 0, 0, 0.55)

--tng-color-surface-neutral-default

#ffffff

--tng-color-surface-neutral-error

#ff0022

--tng-color-surface-neutral-muted

#e4e4e4

--tng-color-surface-neutral-subtle

#f5f5f5

--tng-color-surface-neutral-success

#006800

Special

Blur

--tng-color-blur-blur-dark-25

rgba(0, 0, 0, 0.25)

--tng-color-blur-blur-dark-55

rgba(0, 0, 0, 0.55)

--tng-color-blur-blur-dark-65

rgba(0, 0, 0, 0.65)

--tng-color-blur-blur-dark-25

rgba(0, 0, 0, 0.25)

--tng-color-blur-blur-dark-55

rgba(0, 0, 0, 0.55)

--tng-color-blur-blur-dark-65

rgba(0, 0, 0, 0.65)

BZ4X

--tng-color-teal-bz4-x-bz4-x

#003641

--tng-color-teal-bz4-x-bz4-x-2

#006d7a

--tng-color-teal-bz4-x-bz4-x-3

#328994

--tng-color-teal-bz4-x-bz4-x

#003641

--tng-color-teal-bz4-x-bz4-x-2

#006d7a

--tng-color-teal-bz4-x-bz4-x-3

#328994

Energy

--tng-color-energy-energy-a

#fff200

--tng-color-energy-energy-aa

#bfd730

--tng-color-energy-energy-aaa

#50b848

--tng-color-energy-energy-aaaa

#00a651

--tng-color-energy-energy-b

#fdb913

--tng-color-energy-energy-bright-a

#00ff00

--tng-color-energy-energy-bright-b

#4dff00

--tng-color-energy-energy-bright-c

#b3ff00

--tng-color-energy-energy-bright-d

#ffff00

--tng-color-energy-energy-bright-e

#ffb300

--tng-color-energy-energy-bright-f

#ff4d00

--tng-color-energy-energy-bright-g

#ff0000

--tng-color-energy-energy-c

#f37021

--tng-color-energy-energy-d

#ed1c24

--tng-color-energy-energy-e

#ed1c24

--tng-color-energy-energy-f

#ed1c24

--tng-color-energy-energy-g

#ed1c24

--tng-color-energy-energy-a

#fff200

--tng-color-energy-energy-aa

#bfd730

--tng-color-energy-energy-aaa

#50b848

--tng-color-energy-energy-aaaa

#00a651

--tng-color-energy-energy-b

#fdb913

--tng-color-energy-energy-bright-a

#00ff00

--tng-color-energy-energy-bright-b

#4dff00

--tng-color-energy-energy-bright-c

#b3ff00

--tng-color-energy-energy-bright-d

#ffff00

--tng-color-energy-energy-bright-e

#ffb300

--tng-color-energy-energy-bright-f

#ff4d00

--tng-color-energy-energy-bright-g

#ff0000

--tng-color-energy-energy-c

#f37021

--tng-color-energy-energy-d

#ed1c24

--tng-color-energy-energy-e

#ed1c24

--tng-color-energy-energy-f

#ed1c24

--tng-color-energy-energy-g

#ed1c24

Notification Red

--tng-color-notification-red-100

#ffeeec

--tng-color-notification-red-200

#ffd0c9

--tng-color-notification-red-300

#ff3333

--tng-color-notification-red-400

#cc0000

--tng-color-notification-red-100

#ffeeec

--tng-color-notification-red-200

#ffd0c9

--tng-color-notification-red-300

#ff3333

--tng-color-notification-red-400

#cc0000

Opacity

--tng-color-opacity-dark-20

rgba(0, 0, 0, 0.2)

--tng-color-opacity-dark-25

rgba(0, 0, 0, 0.25)

--tng-color-opacity-dark-30

rgba(0, 0, 0, 0.3)

--tng-color-opacity-dark-35

rgba(0, 0, 0, 0.35)

--tng-color-opacity-dark-40

rgba(0, 0, 0, 0.4)

--tng-color-opacity-dark-45

rgba(0, 0, 0, 0.45)

--tng-color-opacity-dark-55

rgba(0, 0, 0, 0.55)

--tng-color-opacity-dark-65

rgba(0, 0, 0, 0.65)

--tng-color-opacity-light-0

rgba(255, 255, 255, 0)

--tng-color-opacity-light-20

rgba(255, 255, 255, 0.2)

--tng-color-opacity-light-30

rgba(255, 255, 255, 0.3)

--tng-color-opacity-light-35

rgba(255, 255, 255, 0.35)

--tng-color-opacity-light-45

rgba(255, 255, 255, 0.45)

--tng-color-opacity-light-50

rgba(255, 255, 255, 0.5)

--tng-color-opacity-dark-20

rgba(0, 0, 0, 0.2)

--tng-color-opacity-dark-25

rgba(0, 0, 0, 0.25)

--tng-color-opacity-dark-30

rgba(0, 0, 0, 0.3)

--tng-color-opacity-dark-35

rgba(0, 0, 0, 0.35)

--tng-color-opacity-dark-40

rgba(0, 0, 0, 0.4)

--tng-color-opacity-dark-45

rgba(0, 0, 0, 0.45)

--tng-color-opacity-dark-55

rgba(0, 0, 0, 0.55)

--tng-color-opacity-dark-65

rgba(0, 0, 0, 0.65)

--tng-color-opacity-light-0

rgba(255, 255, 255, 0)

--tng-color-opacity-light-20

rgba(255, 255, 255, 0.2)

--tng-color-opacity-light-30

rgba(255, 255, 255, 0.3)

--tng-color-opacity-light-35

rgba(255, 255, 255, 0.35)

--tng-color-opacity-light-45

rgba(255, 255, 255, 0.45)

--tng-color-opacity-light-50

rgba(255, 255, 255, 0.5)