Utility classes for changing an element's background image tint property.
Background image tint classes are assigned using USS color variables from the master color palette. To see all colors with a visual representation with HEX values, check out All Doddle USS Colors.
Classes for background image tint are named using the format: [tint]-[color]-[luminance].
Where color includes:
transparent- for-unity-background-image-tint-color: var(--transparent)white- for-unity-background-image-tint-color: var(--white)black- for-unity-background-image-tint-color: var(--black)gray- for-unity-background-image-tint-color: var(--gray-##)red- for-unity-background-image-tint-color: var(--red-##)orange- for-unity-background-image-tint-color: var(--orange-##)amber- for-unity-background-image-tint-color: var(--amber-##)yellow- for-unity-background-image-tint-color: var(--yellow-##)lime- for-unity-background-image-tint-color: var(--lime-##)green- for-unity-background-image-tint-color: var(--green-##)spring- for-unity-background-image-tint-color: var(--spring-##)cyan- for-unity-background-image-tint-color: var(--cyan-##)teal- for-unity-background-image-tint-color: var(--teal-##)steel- for-unity-background-image-tint-color: var(--steel-##)azure- for-unity-background-image-tint-color: var(--azure-##)blue- for-unity-background-image-tint-color: var(--blue-##)indigo- for-unity-background-image-tint-color: var(--indigo-##)purple- for-unity-background-image-tint-color: var(--purple-##)magenta- for-unity-background-image-tint-color: var(--magenta-##)pink- for-unity-background-image-tint-color: var(--pink-##)rose- for-unity-background-image-tint-color: var(--rose-##)
Where luminance includes:
#- luminance value for the color. By default, background image tint classes start at 5% luminance, and increment by 5% for the first/last step, and 10% for following steps until stopping at 95%.
| Class | Contents |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
It is highly recommended that all simple 1 tone sprite assets are imported as white and use the -unity-background-image-tint-color property. This can help reduce file size bloat as only 1 copy is needed.
UXML
On this page