Customizing Palette

Variables

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-palette-gray	Map	$_default-palette-gray	1: #fafafa 2: #f5f5f5 3: #ebebeb 4: #e0e0e0 5: #d6d6d6 6: #c2c2c2 7: #adadad 8: #999999 9: #808080 10: #666666 11: #525252 12: #3d3d3d 13: #292929 14: #1f1f1f 15: #141414 white: #ffffff black: #000000
Description The Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.
$kendo-palette-coral	Map	$_default-palette-coral	1: #fff6f5 2: #ffeceb 3: #ffdedb 4: #ffc8c4 5: #ffb1ac 6: #ff9d97 7: #ff8a82 8: #ff766d 9: #ff6358 10: #ea5a51 11: #d45349 12: #bf4a42 13: #a33f38 14: #80322c 15: #5c201c
Description The Coral Palette provides colors to the Primary and Series A variable groups.
$kendo-palette-sky-blue	Map	$_default-palette-sky-blue	1: #ebf8fe 2: #d8f1fd 3: #c5eafc 4: #a3dffb 5: #81d4fA 6: #61c9f9 7: #42bff7 8: #22b3f5 9: #03a9f4 10: #039ae0 11: #028ccb 12: #027fb7 13: #026999 14: #02557a 15: #023f5c
Description The Sky Blue Palette provides colors to the Tertiary variable group.
$kendo-palette-green	Map	$_default-palette-green	1: #edf8e9 2: #dcf0d3 3: #cbe9bf 4: #b7e1a5 5: #9bda80 6: #81d15f 7: #69c740 8: #4ebe1f 9: #37b400 10: #32a500 11: #2d9600 12: #298700 13: #227100 14: #1c5a00 15: #1c5a00
Description The Green Palette provides colors to the Success variable group.
$kendo-palette-blue	Map	$_default-palette-blue	1: #e9f0fd 2: #d2e2fb 3: #bdd4f8 4: #9ec0f6 5: #80acf4 6: #6098f2 7: #4082ef 8: #206eec 9: #0058e9 10: #0052d6 11: #004ac2 12: #0042af 13: #003892 14: #002c75 15: #002259
Description The Blue Palette provides colors to the Info variable group.
$kendo-palette-yellow	Map	$_default-palette-yellow	1: #fffae9 2: #fff4d3 3: #ffeebd 4: #ffe79e 5: #ffe080 6: #ffd760 7: #ffd040 8: #ffc720 9: #ffc000 10: #eaaf00 11: #d49f00 12: #bf9000 13: #a07800 14: #806000 15: #5e4700
Description The Yellow Palette provides colors to the Warning variable group.
$kendo-palette-red	Map	$_default-palette-red	1: #feeeed 2: #fcddda 3: #fbc8c3 4: #faaaa2 5: #f98b80 6: #f76f60 7: #f65140 8: #f43520 9: #f31700 10: #df1600 11: #ca1400 12: #b61100 13: #980f00 14: #7a0c00 15: #7a0c00
Description The Red Palette provides colors to the Error variable group.
$kendo-palette-lemon-yellow	Map	$_default-palette-lemon-yellow	1: #fffcf1 2: #fffae2 3: #fff7d4 4: #fff4c2 5: #fff0b1 6: #ffed9d 7: #ffe989 8: #ffe676 9: #ffe162 10: #ead05a 11: #d4bc52 12: #bfa94a 13: #a3913f 14: #807131 15: #5c5223
Description The Lemon Yellow Palette provides colors to the Series B variable group.
$kendo-palette-spring-green	Map	$_default-palette-spring-green	1: #effaf3 2: #e0f6e8 3: #d1f1dd 4: #c0edd1 5: #a6e8c0 6: #8fe2af 7: #79dda0 8: #62d78f 9: #4cd180 10: #46c074 11: #3fae6a 12: #399d60 13: #2f834f 14: #266940 15: #1c4f30
Description The Spring Green Palette provides colors to the Series C variable group.
$kendo-palette-royal-blue	Map	$_default-palette-royal-blue	1: #f0f2ff 2: #e1e4fe 3: #d2d7fe 4: #bbc3fd 5: #a5affd 6: #8e9bfc 7: #7887fb 8: #6173fb 9: #4b5ffa 10: #4558e5 11: #3f50d1 12: #3847bc 13: #2f3c9d 14: #26307d 15: #1c245e
Description The Royal Blue Palette provides colors to the Series D variable group.
$kendo-palette-lavender-purple	Map	$_default-palette-lavender-purple	1: #f7f0ff 2: #f0e0ff 3: #e8d1ff 4: #dfbfff 5: #d6acff 6: #cc97ff 7: #c182ff 8: #b76dff 9: #ac58ff 10: #9e51ea 11: #8f49d4 12: #8142bf 13: #6b37a0 14: #562c80 15: #3f205e
Description The Lavender Purple Palette provides colors to the Series E variable group.
$kendo-palette-flamingo-pink	Map	$_default-palette-flamingo-pink	1: #fff0f5 2: #ffe1eb 3: #ffd1e1 4: #ffbfd6 5: #ffacc9 6: #ff97bb 7: #ff82ae 8: #ff6da0 9: #ff5892 10: #ea5186 11: #d4497a 12: #bf426e 13: #a0375c 14: #802c49 15: #5e2036
Description The Flamingo Pink Palette provides colors to the Series F variable group.

Suggested Links

• Styling Overview
• Web Font Icons
• Preview of the Themed Components