Skip to content
On this page

Color

Text colors

NameValue
color-base#202122

Defined in src/codex-base.json

Refers to color.gray700

color-base--hover#404244

Defined in src/codex-base.json

Refers to color.gray650

Aimed to be replaced by `color.gray600` in future.

color-emphasized#000

Defined in src/codex-base.json

Refers to color.black

color-subtle#54595d

Defined in src/codex-base.json

Refers to color.gray600

color-placeholder#72777d

Defined in src/codex-base.json

Refers to color.gray500

color-disabled#72777d

Defined in src/codex-base.json

Refers to color.gray500

color-inverted#fff

Defined in src/codex-base.json

Refers to color.white

color-progressive#36c

Defined in src/codex-base.json

Refers to color.blue600

'Progressive' Color and states

color-progressive--hover#447ff5

Defined in src/codex-base.json

Refers to color.blue500

color-progressive--active#2a4b8d

Defined in src/codex-base.json

Refers to color.blue700

color-progressive--focus#36c

Defined in src/codex-base.json

Refers to color.blue600

color-destructive#d33

Defined in src/codex-base.json

Refers to color.red600

'Destructive' Color and states

color-destructive--hover#ff4242

Defined in src/codex-base.json

Refers to color.red500

color-destructive--active#b32424

Defined in src/codex-base.json

Refers to color.red700

color-destructive--focus#d33

Defined in src/codex-base.json

Refers to color.red600

color-visited#6b4ba1

Defined in src/codex-base.json

Refers to color.purple

'Visited' color. In combination with progressive. Used for default links.

color-error#d33

Defined in src/codex-base.json

Refers to color.red600

color-warning#fc3

Defined in src/codex-base.json

Refers to color.yellow600

Note, this is only meant for warning icon for contrast reasons.

color-success#14866d

Defined in src/codex-base.json

Refers to color.green700

Note, this needs to use a tone darker than Red and Yellow for contrast reasons with background White.

color-notice#202122

Defined in src/codex-base.json

Refers to color.gray700

color-base--active#000
deprecated

Defined in src/codex-base.json

Refers to color.black

Deprecated: Use `color-emphasized` instead.

color-base--inverted#fff
deprecated

Defined in src/codex-base.json

Refers to color.white

Deprecated: Use `color-inverted` instead.

color-base--emphasized#000
deprecated

Defined in src/codex-base.json

Refers to color.black

Deprecated: Use `color-emphasized` instead.

color-base--subtle#72777d
deprecated

Defined in src/codex-base.json

Refers to color.gray500

Deprecated: Use `color-subtle` instead. Note, that `color-subtle` is using `color.gray600` instead of `color.gray500` now.

color-base--disabled#72777d
deprecated

Defined in src/codex-base.json

Refers to color.gray500

Deprecated: Use `color-disabled` instead.

color-filled--disabled#fff
deprecated

Defined in src/codex-base.json

Refers to color.white

Deprecated: Use `color-inverted` instead.

color-accessory#54595d
deprecated

Defined in src/codex-base.json

Refers to color.gray600

Deprecated: Use `color-subtle` instead.

color-primary#36c
deprecated

Defined in src/codex-components.json

Refers to color.progressive

Deprecated: In use in many non-button applications as references in WikimediaUI Base. Note that we have to replace those before removing tokens group here.

color-primary--hover#447ff5
deprecated

Defined in src/codex-components.json

Refers to color.progressive--hover

color-primary--active#2a4b8d
deprecated

Defined in src/codex-components.json

Refers to color.progressive--active

color-primary--focus#36c
deprecated

Defined in src/codex-components.json

Refers to color.progressive--focus

color-link-red#d33

Defined in src/codex-components.json

Refers to color.red600

Red ('new') Link color and states

color-link-red--hover#ff4242

Defined in src/codex-components.json

Refers to color.red500

color-link-red--active#b32424

Defined in src/codex-components.json

Refers to color.red700

color-link-red--focus#d33

Defined in src/codex-components.json

Refers to color.red600

color-link-red--visited#a55858

Defined in src/codex-components.json

Refers to color.maroon

Background colors

NameValue
background-color-base#fff

Defined in src/codex-base.json

Refers to color.white

background-color-interactive#eaecf0

Defined in src/codex-base.json

Refers to color.gray200

background-color-interactive-subtle#f8f9fa

Defined in src/codex-base.json

Refers to color.gray100

background-color-disabled#c8ccd1

Defined in src/codex-base.json

Refers to color.gray300

Components like Buttons, Checkboxes, Radios, ProgressBars….

background-color-disabled-subtle#eaecf0

Defined in src/codex-base.json

Refers to color.gray200

Components like TextInputs, Selects….

background-color-progressive#36c

Defined in src/codex-base.json

Refers to color.blue600

background-color-progressive--hover#447ff5

Defined in src/codex-base.json

Refers to color.blue500

background-color-progressive--active#2a4b8d

Defined in src/codex-base.json

Refers to color.blue700

background-color-progressive--focus#36c

Defined in src/codex-base.json

Refers to color.blue600

background-color-progressive-subtle#eaf3ff

Defined in src/codex-base.json

Refers to color.blue100

background-color-destructive#d33

Defined in src/codex-base.json

Refers to color.red600

background-color-destructive--hover#ff4242

Defined in src/codex-base.json

Refers to color.red500

background-color-destructive--active#b32424

Defined in src/codex-base.json

Refers to color.red700

background-color-destructive--focus#d33

Defined in src/codex-base.json

Refers to color.red600

background-color-destructive-subtle#fee7e6

Defined in src/codex-base.json

Refers to color.red100

background-color-error-subtle#fee7e6

Defined in src/codex-base.json

Refers to color.red100

background-color-warning-subtle#fef6e7

Defined in src/codex-base.json

Refers to color.yellow100

background-color-success-subtle#d5fdf4

Defined in src/codex-base.json

Refers to color.green100

background-color-notice-subtle#eaecf0

Defined in src/codex-base.json

Refers to color.gray200

background-color-transparentrgba( 255, 255, 255, 0 )

Defined in src/codex-base.json

Refers to color.transparent-light

background-color-base--hover#eaecf0
deprecated

Defined in src/codex-base.json

Refers to color.gray200

Deprecated: Use `background-color-interactive` instead.

background-color-base--active#eaf3ff
deprecated

Defined in src/codex-base.json

Refers to color.blue100

Deprecated: Use `background-color-progressive-subtle` instead.

background-color-base--disabled#eaecf0
deprecated

Defined in src/codex-base.json

Refers to color.gray200

Deprecated: Use `background-color-disabled-subtle` instead.

background-color-base--transparentrgba( 255, 255, 255, 0 )
deprecated

Defined in src/codex-base.json

Refers to color.transparent-light

Deprecated: Use `background-color-transparent` instead.

background-color-filled--disabled#c8ccd1
deprecated

Defined in src/codex-base.json

Refers to color.gray300

Deprecated: Use `background-color-disabled` instead.

background-color-framed#f8f9fa
deprecated

Defined in src/codex-base.json

Refers to color.gray100

Deprecated: Use `background-color-interactive-subtle` instead.

background-color-framed--hover#fff
deprecated

Defined in src/codex-base.json

Refers to color.white

Deprecated: Use `background-color-base` instead.

background-color-framed--active#c8ccd1
deprecated

Defined in src/codex-base.json

Refers to color.gray300

Deprecated: Use `background-color-interactive` with buttons' active state instead.

background-color-error--framed#fee7e6
deprecated

Defined in src/codex-base.json

Refers to color.red100

Deprecated: Use `background-color-error-subtle` instead.

background-color-warning--framed#fef6e7
deprecated

Defined in src/codex-base.json

Refers to color.yellow100

Deprecated: Use `background-color-warning-subtle` instead.

background-color-success--framed#d5fdf4
deprecated

Defined in src/codex-base.json

Refers to color.green100

Deprecated: Use `background-color-success-subtle` instead.

background-color-notice--framed#eaecf0
deprecated

Defined in src/codex-base.json

Refers to color.gray200

Deprecated: Use `background-color-notice-subtle` instead.

background-color-primary#36c

Defined in src/codex-components.json

Refers to background-color.progressive

background-color-primary--hoverrgba( 51, 102, 204, 0.1 )

Defined in src/codex-components.json

Refers to color.modifier-blue600-translucent

background-color-quietrgba( 255, 255, 255, 0 )
deprecated

Defined in src/codex-components.json

Refers to background-color.transparent

Deprecated: Use `background-color-transparent` instead.

background-color-quiet--hoverrgba( 0, 24, 73, calc( 7 / 255 ) )

Defined in src/codex-components.json

Refers to color.modifier-gray100-translucent

background-color-quiet--activergba( 0, 24, 73, calc( 21 / 255 ) )

Defined in src/codex-components.json

Refers to color.modifier-gray200-translucent

background-color-input-binary--checked#36c

Defined in src/codex-components.json

Refers to color.blue600

background-color-message-notice#eaecf0
deprecated

Defined in src/codex-components.json

Refers to color.gray200

Deprecated: Use `background-color-notice-subtle` instead.

background-color-message-error#fee7e6
deprecated

Defined in src/codex-components.json

Refers to color.red100

Deprecated: Use `background-color-error-subtle` instead.

background-color-message-warning#fef6e7
deprecated

Defined in src/codex-components.json

Refers to color.yellow100

Deprecated: Use `background-color-warning-subtle` instead.

background-color-message-success#d5fdf4
deprecated

Defined in src/codex-components.json

Refers to color.green100

Deprecated: Use `background-color-success-subtle` instead.

background-color-tabs-framed#eaecf0
deprecated

Defined in src/codex-components.json

Refers to color.gray200

Deprecated: Former Tabs bar background color token. Use `background-color-interactive` instead.

background-color-toolbar#fff
deprecated

Defined in src/codex-components.json

Refers to background-color.base

Deprecated: Former Toolbar background color token. Use `background-color-base` instead.

background-color-tool--hover#eaecf0
deprecated

Defined in src/codex-components.json

Refers to background-color.base--hover

Deprecated: Former Toolbar tools background color token. Use `background-color-base` instead.

background-color-tool--active#36c
deprecated

Defined in src/codex-components.json

Refers to background-color.progressive

Deprecated: Use `background-color-progressive` instead.

background-color-tool--active-hover#447ff5
deprecated

Defined in src/codex-components.json

Refers to background-color.progressive--hover

Deprecated: Use `background-color-progressive--hover` instead.

Border and box-shadow colors

For information on border colors visit Border and for box-shadow colors Box-shadow token page.