New to Kendo UI for Angular? Start a free 30-day trial

Customizing Color System

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-colorsMap$_default-colors
  • app-surface: #ffffff
  • on-app-surface: #323130
  • subtle: #605e5c
  • surface: #faf9f8
  • surface-alt: #ffffff
  • border: #8a8886
  • border-alt: #323130
  • base-subtle: #edebe9
  • base-subtle-hover: #e1dfdd
  • base-subtle-active: #d2d0ce
  • base: #ffffff
  • base-hover: #f3f2f1
  • base-active: #edebe9
  • base-emphasis: #605e5c
  • base-on-subtle: #323130
  • on-base: #323130
  • base-on-surface: #323130
  • primary-subtle: #deecf9
  • primary-subtle-hover: #c7e0f4
  • primary-subtle-active: #abd1ef
  • primary: #0078d4
  • primary-hover: #106ebe
  • primary-active: #005a9e
  • primary-emphasis: #004578
  • primary-on-subtle: #001c30
  • on-primary: #ffffff
  • primary-on-surface: #0078d4
  • secondary-subtle: #faf9f8
  • secondary-subtle-hover: #f3f2f1
  • secondary-subtle-active: #edebe9
  • secondary: #979593
  • secondary-hover: #8a8886
  • secondary-active: #797775
  • secondary-emphasis: #605e5c
  • secondary-on-subtle: #323130
  • on-secondary: #ffffff
  • secondary-on-surface: #605e5c
  • tertiary-subtle: #deecf9
  • tertiary-subtle-hover: #bfdbf3
  • tertiary-subtle-active: #aacfef
  • tertiary: #2b88d8
  • tertiary-hover: #287ec7
  • tertiary-active: #2473b7
  • tertiary-emphasis: #2169a6
  • tertiary-on-subtle: #174974
  • on-tertiary: #ffffff
  • tertiary-on-surface: #2b88d8
  • info-subtle: #cee5ff
  • info-subtle-hover: #add4ff
  • info-subtle-active: #8dc3ff
  • info: #0a7eff
  • info-hover: #096edf
  • info-active: #085ebf
  • info-emphasis: #064f9f
  • info-on-subtle: #032040
  • on-info: #ffffff
  • info-on-surface: #096edf
  • success-subtle: #dff6dd
  • success-subtle-hover: #c8e8c6
  • success-subtle-active: #b1dbaf
  • success: #55a554
  • success-hover: #3e973e
  • success-active: #278a27
  • success-emphasis: #107c10
  • success-on-subtle: #063206
  • on-success: #ffffff
  • success-on-surface: #107c10
  • warning-subtle: #fff4ce
  • warning-subtle-hover: #ffedad
  • warning-subtle-active: #ffe58d
  • warning: #ffc80a
  • warning-hover: #f5c000
  • warning-active: #e0b000
  • warning-emphasis: #4e4d4b
  • warning-on-subtle: #323130
  • on-warning: #323130
  • warning-on-surface: #7a6000
  • error-subtle: #fde7e9
  • error-subtle-hover: #f3d2d4
  • error-subtle-active: #e9bcbf
  • error: #c2666b
  • error-hover: #b85156
  • error-active: #ae3b41
  • error-emphasis: #a4262c
  • error-on-subtle: #420f12
  • on-error: #ffffff
  • error-on-surface: #a4262c
  • light-subtle: #faf9f8
  • light-subtle-hover: #f3f2f1
  • light-subtle-active: #edebe9
  • light: #d2d0ce
  • light-hover: #c8c6c4
  • light-active: #a19f9d
  • light-emphasis: #e1dfdd
  • light-on-subtle: #323130
  • on-light: #323130
  • light-on-surface: #d2d0ce
  • dark-subtle: #a19f9d
  • dark-subtle-hover: #979593
  • dark-subtle-active: #8a8886
  • dark: #323130
  • dark-hover: #201f1e
  • dark-active: #000000
  • dark-emphasis: #797775
  • dark-on-subtle: #201f1e
  • on-dark: #ffffff
  • dark-on-surface: #323130
  • inverse-subtle: #a19f9d
  • inverse-subtle-hover: #979593
  • inverse-subtle-active: #8a8886
  • inverse: #323130
  • inverse-hover: #201f1e
  • inverse-active: #000000
  • inverse-emphasis: #797775
  • inverse-on-subtle: #201f1e
  • on-inverse: #ffffff
  • inverse-on-surface: #323130
  • series-a: #0099bc
  • series-a-bold: #00738d
  • series-a-bolder: #004d5e
  • series-a-subtle: #40b3cd
  • series-a-subtler: #80ccdd
  • series-b: #e74856
  • series-b-bold: #ad3641
  • series-b-bolder: #74242b
  • series-b-subtle: #ed7680
  • series-b-subtler: #f3a3aa
  • series-c: #ffb900
  • series-c-bold: #bf8b00
  • series-c-bolder: #805d00
  • series-c-subtle: #ffcb40
  • series-c-subtler: #ffdc80
  • series-d: #0078d7
  • series-d-bold: #005aa1
  • series-d-bolder: #003c6c
  • series-d-subtle: #409ae1
  • series-d-subtler: #80bbeb
  • series-e: #8764b8
  • series-e-bold: #654b8a
  • series-e-bolder: #44325c
  • series-e-subtle: #a58bca
  • series-e-subtler: #c3b1db
  • series-f: #00cc6a
  • series-f-bold: #009950
  • series-f-bolder: #006635
  • series-f-subtle: #40d98f
  • series-f-subtler: #80e5b4
Description
The global default Colors map.
Groups
The groups of the $kendo-colors Map
GroupValuesDescription
misc app-surface, on-app-surface, subtle, surface, surface-alt, border, border-altThe Misc variable group.
base base-subtle, base-subtle-hover, base-subtle-active, base, base-hover, base-active, base-emphasis, base-on-subtle, on-base, base-on-surfaceThe Base variable group.
primary primary-subtle, primary-subtle-hover, primary-subtle-active, primary, primary-hover, primary-active, primary-emphasis, primary-on-subtle, on-primary, primary-on-surfaceThe Primary variable group.
secondary secondary-subtle, secondary-subtle-hover, secondary-subtle-active, secondary, secondary-hover, secondary-active, secondary-emphasis, secondary-on-subtle, on-secondary, secondary-on-surfaceThe Secondary variable group.
tertiary tertiary-subtle, tertiary-subtle-hover, tertiary-subtle-active, tertiary, tertiary-hover, tertiary-active, tertiary-emphasis, tertiary-on-subtle, on-tertiary, tertiary-on-surfaceThe Tertiary variable group.
info info-subtle, info-subtle-hover, info-subtle-active, info, info-hover, info-active, info-emphasis, info-on-subtle, on-info, info-on-surfaceThe Info variable group.
success success-subtle, success-subtle-hover, success-subtle-active, success, success-hover, success-active, success-emphasis, success-on-subtle, on-success, success-on-surfaceThe Success variable group.
warning warning-subtle, warning-subtle-hover, warning-subtle-active, warning, warning-hover, warning-active, warning-emphasis, warning-on-subtle, on-warning, warning-on-surfaceThe Warning variable group.
error error-subtle, error-subtle-hover, error-subtle-active, error, error-hover, error-active, error-emphasis, error-on-subtle, on-error, error-on-surfaceThe Error variable group.
light light-subtle, light-subtle-hover, light-subtle-active, light, light-hover, light-active, light-emphasis, light-on-subtle, on-light, light-on-surfaceThe Light variable group.
dark dark-subtle, dark-subtle-hover, dark-subtle-active, dark, dark-hover, dark-active, dark-emphasis, dark-on-subtle, on-dark, dark-on-surfaceThe Dark variable group.
inverse inverse-subtle, inverse-subtle-hover, inverse-subtle-active, inverse, inverse-hover, inverse-active, inverse-emphasis, inverse-on-subtle, on-inverse, inverse-on-surfaceThe Inverse variable group.
series-a series-a, series-a-bold, series-a-bolder, series-a-subtle, series-a-subtlerThe Series A variable group.
series-b series-b, series-b-bold, series-b-bolder, series-b-subtle, series-b-subtlerThe Series B variable group.
series-c series-c, series-c-bold, series-c-bolder, series-c-subtle, series-c-subtlerThe Series C variable group.
series-d series-d, series-d-bold, series-d-bolder, series-d-subtle, series-d-subtlerThe Series D variable group.
series-e series-e, series-e-bold, series-e-bolder, series-e-subtle, series-e-subtlerThe Series E variable group.
series-f series-f, series-f-bold, series-f-bolder, series-f-subtle, series-f-subtlerThe Series F variable group.
Properties
The properties of the $kendo-colors Map
TypeNameDescription
Colorapp-surfaceThe background color of the application.
Coloron-app-surfaceThe text color of the application.
ColorsubtleThe subtle text color.
ColorsurfaceThe background color of the components' chrome area.
Colorsurface-altThe alternative background color of the components' chrome area.
ColorborderТhe border color of the application.
Colorborder-altТhe alternative border color of the application.
Colorbase-subtleThe base subtle background color variable.
Colorbase-subtle-hoverThe base subtle background color variable for the hover state.
Colorbase-subtle-activeThe base subtle background color variable for the active state.
ColorbaseThe base background color variable.
Colorbase-hoverThe base background color variable for the hover state.
Colorbase-activeThe base background color variable for the active state.
Colorbase-emphasisThe emphasized base color variable.
Colorbase-on-subtleThe text color variable for content on base subtle.
Coloron-baseThe text color variable for content on base.
Colorbase-on-surfaceThe text color variable for content on surface.
Colorprimary-subtleThe primary subtle background color variable.
Colorprimary-subtle-hoverThe primary subtle background color variable for the hover state.
Colorprimary-subtle-activeThe primary subtle background color variable for the active state.
ColorprimaryThe primary background color variable.
Colorprimary-hoverThe primary background color variable for the hover state.
Colorprimary-activeThe primary background color variable for the active state.
Colorprimary-emphasisThe emphasized primary color variable.
Colorprimary-on-subtleThe text color variable for content on primary subtle.
Coloron-primaryThe text color variable for content on primary.
Colorprimary-on-surfaceThe text color variable for content on surface.
Colorsecondary-subtleThe secondary subtle background color variable.
Colorsecondary-subtle-hoverThe secondary subtle background color variable for the hover state.
Colorsecondary-subtle-activeThe secondary subtle background color variable for the active state.
ColorsecondaryThe secondary background color variable.
Colorsecondary-hoverThe secondary background color variable for the hover state.
Colorsecondary-activeThe secondary background color variable for the active state.
Colorsecondary-emphasisThe emphasized secondary color variable.
Colorsecondary-on-subtleThe text color variable for content on secondary subtle.
Coloron-secondaryThe text color variable for content on secondary.
Colorsecondary-on-surfaceThe text color variable for content on surface.
Colortertiary-subtleThe tertiary subtle background color variable.
Colortertiary-subtle-hoverThe tertiary subtle background color variable for the hover state.
Colortertiary-subtle-activeThe tertiary subtle background color variable for the active state.
ColortertiaryThe tertiary background color variable.
Colortertiary-hoverThe tertiary background color variable for the hover state.
Colortertiary-activeThe tertiary background color variable for the active state.
Colortertiary-emphasisThe emphasized tertiary color variable.
Colortertiary-on-subtleThe text color variable for content on tertiary subtle.
Coloron-tertiaryThe text color variable for content on tertiary.
Colortertiary-on-surfaceThe text color variable for content on surface.
Colorinfo-subtleThe info subtle background color variable.
Colorinfo-subtle-hoverThe info subtle background color variable for the hover state.
Colorinfo-subtle-activeThe info subtle background color variable for the active state.
ColorinfoThe info background color variable.
Colorinfo-hoverThe info background color variable for the hover state.
Colorinfo-activeThe info background color variable for the active state.
Colorinfo-emphasisThe emphasized info color variable.
Colorinfo-on-subtleThe text color variable for content on info subtle.
Coloron-infoThe text color variable for content on info.
Colorinfo-on-surfaceThe text color variable for content on surface.
Colorsuccess-subtleThe success subtle background color variable.
Colorsuccess-subtle-hoverThe success subtle background color variable for the hover state.
Colorsuccess-subtle-activeThe success subtle background color variable for the active state.
ColorsuccessThe success background color variable.
Colorsuccess-hoverThe success background color variable for the hover state.
Colorsuccess-activeThe success background color variable for the active state.
Colorsuccess-emphasisThe emphasized success color variable.
Colorsuccess-on-subtleThe text color variable for content on success subtle.
Coloron-successThe text color variable for content on success.
Colorsuccess-on-surfaceThe text color variable for content on surface.
Colorwarning-subtleThe warning subtle background color variable.
Colorwarning-subtle-hoverThe warning subtle background color variable for the hover state.
Colorwarning-subtle-activeThe warning subtle background color variable for the active state.
ColorwarningThe warning background color variable.
Colorwarning-hoverThe warning background color variable for the hover state.
Colorwarning-activeThe warning background color variable for the active state.
Colorwarning-emphasisThe emphasized warning color variable.
Colorwarning-on-subtleThe text color variable for content on warning subtle.
Coloron-warningThe text color variable for content on warning.
Colorwarning-on-surfaceThe text color variable for content on surface.
Colorerror-subtleThe error subtle background color variable.
Colorerror-subtle-hoverThe error subtle background color variable for the hover state.
Colorerror-subtle-activeThe error subtle background color variable for the active state.
ColorerrorThe error background color variable.
Colorerror-hoverThe error background color variable for the hover state.
Colorerror-activeThe error background color variable for the active state.
Colorerror-emphasisThe emphasized error color variable.
Colorerror-on-subtleThe text color variable for content on error subtle.
Coloron-errorThe text color variable for content on error.
Colorerror-on-surfaceThe text color variable for content on surface.
Colorlight-subtleThe light subtle background color variable.
Colorlight-subtle-hoverThe light subtle background color variable for the hover state.
Colorlight-subtle-activeThe light subtle background color variable for the active state.
ColorlightThe light background color variable.
Colorlight-hoverThe light background color variable for the hover state.
Colorlight-activeThe light background color variable for the active state.
Colorlight-emphasisThe emphasized light color variable.
Colorlight-on-subtleThe text color variable for content on light subtle.
Coloron-lightThe text color variable for content on light.
Colorlight-on-surfaceThe text color variable for content on surface.
Colordark-subtleThe dark subtle background color variable.
Colordark-subtle-hoverThe dark subtle background color variable for the hover state.
Colordark-subtle-activeThe dark subtle background color variable for the active state.
ColordarkThe dark background color variable.
Colordark-hoverThe dark background color variable for the hover state.
Colordark-activeThe dark background color variable for the active state.
Colordark-emphasisThe emphasized dark color variable.
Colordark-on-subtleThe text color variable for content on dark subtle.
Coloron-darkThe text color variable for content on dark.
Colordark-on-surfaceThe text color variable for content on surface.
Colorinverse-subtleThe inverse subtle background color variable.
Colorinverse-subtle-hoverThe inverse subtle background color variable for the hover state.
Colorinverse-subtle-activeThe inverse subtle background color variable for the active state.
ColorinverseThe inverse background color variable.
Colorinverse-hoverThe inverse background color variable for the hover state.
Colorinverse-activeThe inverse background color variable for the active state.
Colorinverse-emphasisThe emphasized inverse color variable.
Colorinverse-on-subtleThe text color variable for content on inverse subtle.
Coloron-inverseThe text color variable for content on inverse.
Colorinverse-on-surfaceThe text color variable for content on surface.
Colorseries-aThe series A color variable.
Colorseries-a-boldThe bold series A color variable.
Colorseries-a-bolderThe bolder series A color variable.
Colorseries-a-subtleThe subtle series A color variable.
Colorseries-a-subtlerThe subtler series A color variable.
Colorseries-bThe series B color variable.
Colorseries-b-boldThe bold series B color variable.
Colorseries-b-bolderThe bolder series B color variable.
Colorseries-b-subtleThe subtle series B color variable.
Colorseries-b-subtlerThe subtler series B color variable.
Colorseries-cThe series C color variable.
Colorseries-c-boldThe bold series C color variable.
Colorseries-c-bolderThe bolder series C color variable.
Colorseries-c-subtleThe subtle series C color variable.
Colorseries-c-subtlerThe subtler series C color variable.
Colorseries-dThe series D color variable.
Colorseries-d-boldThe bold series D color variable.
Colorseries-d-bolderThe bolder series D color variable.
Colorseries-d-subtleThe subtle series D color variable.
Colorseries-d-subtlerThe subtler series D color variable.
Colorseries-eThe series E color variable.
Colorseries-e-boldThe bold series E color variable.
Colorseries-e-bolderThe bolder series E color variable.
Colorseries-e-subtleThe subtle series E color variable.
Colorseries-e-subtlerThe subtler series E color variable.
Colorseries-fThe series F color variable.
Colorseries-f-boldThe bold series F color variable.
Colorseries-f-bolderThe bolder series F color variable.
Colorseries-f-subtleThe subtle series F color variable.
Colorseries-f-subtlerThe subtler series F color variable.
$kendo-color-whiteColor#ffffff#ffffff
Description
The color white.
Note: you cannot change this value.
$kendo-color-blackColor#000000#000000
Description
The color black.
Note: you cannot change this value.
$kendo-color-rgba-transparentColorrgba(0, 0, 0, 0)rgba(0, 0, 0, 0)
Description
The color transparent.
Note: you cannot change this value.
$kendo-gradient-transparent-to-blackGradientrgba(black, 0), blackrgba(0, 0, 0, 0), black
Description
A gradient that goes from transparent to black.
Note: you cannot change this value.
$kendo-gradient-transparent-to-whiteGradientrgba(white, 0), whitergba(255, 255, 255, 0), white
Description
A gradient that goes from transparent to white.
Note: you cannot change this value.
$kendo-gradient-black-to-transparentGradientblack, rgba(black, 0)black, rgba(0, 0, 0, 0)
Description
A gradient that goes from black to transparent.
Note: you cannot change this value.
$kendo-gradient-white-to-transparentGradientwhite, rgba(white, 0)white, rgba(255, 255, 255, 0)
Description
A gradient that goes from white to transparent.
Note: you cannot change this value.
$kendo-gradient-rainbowGradient#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000
Description
A gradient that cycles through the colors of the rainbow.
Note: you cannot change this value.

In this article

Not finding the help you need?