# Colors

**Path:** CSS Framework/Utilities

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Colors

 Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too..

 The color classes can be used with prefixes as shown below.

 Class 
 Description 

 .text-* 
 applies the color to the texts only. 

 .text-bg-* 
 applies the color to the texts and background. 

 .bg-* 
 applies the color to the background only. 

 .border-* 

 applies the color to the border only.
 For further information, please look at border utilities .

 .table-* 

 applies the color to the background only for table-cells.
 For further information, please look at table utilities .

 PreDefined Classes

 Our pre-defined color classes can be use with color-prefixes.

 surface-container 
 primary 
 success 
 danger 
 warning 
 info 

 Lighten

 Normal

 Darken

 .text-primary 
 text

 text

 text

 .text-bg-primary 
 text

 text

 text

 .bg-primary 

 .border-primary 

 Palette Classes

 You can use the our predefined palette-classes and its variables to create a css-class with colors dynamically.

 rb-plt-surface-container 
 rb-plt-primary 
 rb-plt-success 
 rb-plt-danger 
 rb-plt-warning 
 rb-plt-info 

 Palette Variables 
 Result 

 --rb-plt-lighten

 --rb-plt-lighten-contrast

 Lighten 

 --rb-plt-normal

 --rb-plt-normal-contrast

 Normal 

 --rb-plt-darken

 --rb-plt-darken-contrast

 Darken 

 ✕

 Contents