New to Kendo UI for AngularStart 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: #212529
  • subtle: #596169
  • surface: #f8f9fa
  • surface-alt: #ffffff
  • border: rgba(33, 37, 41, 0.13)
  • border-alt: rgba(33, 37, 41, 0.2)
  • base-subtle: #e9ecef
  • base-subtle-hover: #dee2e6
  • base-subtle-active: #ced4da
  • base: #dee2e6
  • base-hover: #ced4da
  • base-active: #bdc4cb
  • base-emphasis: rgba(33, 37, 41, 0.34)
  • base-on-subtle: #212529
  • on-base: #212529
  • base-on-surface: #212529
  • primary-subtle: #cfe2ff
  • primary-subtle-hover: #b6d4fe
  • primary-subtle-active: #9ec5fe
  • primary: #0d6efd
  • primary-hover: #0c64e4
  • primary-active: #0a58ca
  • primary-emphasis: rgba(13, 110, 253, 0.4)
  • primary-on-subtle: #052c65
  • on-primary: #ffffff
  • primary-on-surface: #0d6efd
  • secondary-subtle: #dee2e6
  • secondary-subtle-hover: #ced4da
  • secondary-subtle-active: #bdc4cb
  • secondary: #6c757d
  • secondary-hover: #596169
  • secondary-active: #495057
  • secondary-emphasis: rgba(108, 117, 125, 0.4)
  • secondary-on-subtle: #2B2F32
  • on-secondary: #ffffff
  • secondary-on-surface: #6c757d
  • tertiary-subtle: #e2d9f3
  • tertiary-subtle-hover: #d3c5ec
  • tertiary-subtle-active: #c5b3e6
  • tertiary: #6f42c1
  • tertiary-hover: #59359a
  • tertiary-active: #4e2f89
  • tertiary-emphasis: rgba(111, 66, 193, 0.4)
  • tertiary-on-subtle: #432874
  • on-tertiary: #ffffff
  • tertiary-on-surface: #6f42c1
  • info-subtle: #cff4fc
  • info-subtle-hover: #b7eefa
  • info-subtle-active: #9eeaf9
  • info: #0dcaf0
  • info-hover: #3dd5f3
  • info-active: #6edff6
  • info-emphasis: rgba(13, 202, 240, 0.4)
  • info-on-subtle: #055160
  • on-info: #000000
  • info-on-surface: #0dcaf0
  • success-subtle: #d1e7dd
  • success-subtle-hover: #badbcc
  • success-subtle-active: #a3cfbb
  • success: #198754
  • success-hover: #146C43
  • success-active: #0F5132
  • success-emphasis: rgba(25, 135, 84, 0.4)
  • success-on-subtle: #0A3622
  • on-success: #ffffff
  • success-on-surface: #198754
  • warning-subtle: #fff3cd
  • warning-subtle-hover: #ffecb5
  • warning-subtle-active: #ffe69c
  • warning: #ffc107
  • warning-hover: #ffcd39
  • warning-active: #ffda6a
  • warning-emphasis: rgba(255, 193, 7, 0.4)
  • warning-on-subtle: #664d03
  • on-warning: #000000
  • warning-on-surface: #ffc107
  • error-subtle: #f8d7da
  • error-subtle-hover: #f5c2c7
  • error-subtle-active: #f1aeb5
  • error: #dc3545
  • error-hover: #b02a37
  • error-active: #9a2530
  • error-emphasis: rgba(220, 53, 69, 0.4)
  • error-on-subtle: #58151c
  • on-error: #ffffff
  • error-on-surface: #dc3545
  • light-subtle: #ffffff
  • light-subtle-hover: #f8f9fa
  • light-subtle-active: #e9ecef
  • light: #f8f9fa
  • light-hover: #e9ecef
  • light-active: #dee2e6
  • light-emphasis: rgba(33, 37, 41, 0.1)
  • light-on-subtle: #495057
  • on-light: #000000
  • light-on-surface: #f8f9fa
  • dark-subtle: #495057
  • dark-subtle-hover: #596169
  • dark-subtle-active: #6c757d
  • dark: #212529
  • dark-hover: #343a40
  • dark-active: #495057
  • dark-emphasis: rgba(33, 37, 41, 0.4)
  • dark-on-subtle: #ffffff
  • on-dark: #ffffff
  • dark-on-surface: #212529
  • inverse-subtle: #495057
  • inverse-subtle-hover: #596169
  • inverse-subtle-active: #6c757d
  • inverse: #212529
  • inverse-hover: #343a40
  • inverse-active: #495057
  • inverse-emphasis: rgba(33, 37, 41, 0.4)
  • inverse-on-subtle: #ffffff
  • on-inverse: #ffffff
  • inverse-on-surface: #212529
  • series-a: #0c64e4
  • series-a-bold: #084298
  • series-a-bolder: #052c65
  • series-a-subtle: #3d8bfd
  • series-a-subtler: #86b6fe
  • series-b: #6f42c1
  • series-b-bold: #4e2f89
  • series-b-bolder: #36215f
  • series-b-subtle: #8c68cd
  • series-b-subtler: #b9a3e1
  • series-c: #20c997
  • series-c-bold: #13795b
  • series-c-bolder: #0d503c
  • series-c-subtle: #79dfc1
  • series-c-subtler: #c1f0e2
  • series-d: #198754
  • series-d-bold: #0F5132
  • series-d-bolder: #0A3622
  • series-d-subtle: #479F76
  • series-d-subtler: #8cc3aa
  • series-e: #dc3545
  • series-e-bold: #9a2530
  • series-e-bolder: #6e1b23
  • series-e-subtle: #e35d6a
  • series-e-subtler: #f1aeb5
  • series-f: #ffc107
  • series-f-bold: #b38705
  • series-f-bolder: #806104
  • series-f-subtle: #ffcd39
  • series-f-subtler: #ffe083
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.
ColorborderThe border color of the application.
Colorborder-altThe 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-primaryColor$primaryvar(--kendo-color-primary, #0d6efd)
Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$kendo-color-primary-contrastColork-contrast-color( $kendo-color-primary )var(--kendo-color-on-primary, #ffffff)
Description
The color used along with the primary color denoted by $kendo-color-primary.
Used to provide contrast between the background and foreground colors.
$kendo-color-secondaryColor$secondaryvar(--kendo-color-secondary, #6c757d)
Description
The secondary color of the theme.
$kendo-color-secondary-contrastColork-contrast-color( $kendo-color-secondary )white
Description
The color used along with the secondary color denoted by $kendo-color-secondary.
Used to provide contrast between the background and foreground colors.
$kendo-color-tertiaryColor$purplevar(--kendo-color-tertiary, #6f42c1)
Description
The tertiary color of the theme.
$kendo-color-tertiary-contrastColork-contrast-color( $kendo-color-tertiary )white
Description
The color used along with the tertiary color denoted by $kendo-color-tertiary.
Used to provide contrast between the background and foreground colors.
$kendo-color-infoColor$infovar(--kendo-color-info, #0dcaf0)
Description
The color for informational messages and states.
$kendo-color-successColor$successvar(--kendo-color-success, #198754)
Description
The color for success messages and states.
$kendo-color-warningColor$warningvar(--kendo-color-warning, #ffc107)
Description
The color for warning messages and states.
$kendo-color-errorColor$dangervar(--kendo-color-error, #dc3545)
Description
The color for error messages and states.
$kendo-color-darkColor$darkvar(--kendo-color-dark, #212529)
Description
The dark color of the theme.
$kendo-color-lightColor$lightvar(--kendo-color-light, #f8f9fa)
Description
The light color of the theme.
$kendo-color-inverseStringif( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )var(--kendo-color-dark, #212529)
Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
$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
VariablesSuggested Links
Not finding the help you need?
Contact Support