Colors

Color palette with USS variables and utility classes

Click to copy:

Colors

50
100
200
300
400
500
600
700
800
900
950
red
scarlet
coral
orange
peach
amber
gold
yellow
lime
mint
green
forest
jade
emerald
teal
turquoise
cyan
sky
azure
blue
cobalt
navy
indigo
violet
lavender
purple
magenta
fuchsia
pink
rose
ruby
crimson

Neutrals

50
100
200
300
400
500
600
700
800
900
950
slate
neutral
stone

Color Tones

Each color has 11 tones, from light to dark: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950.

Each tone has a semi-transparent variant.

css
/* Color Scarlet, Tone 500 */ .example { color: var(--color-scarlet-500); } /* Color Scarlet, Tone 500, Half Opacity */ .example { color: var(--color-scarlet-500-half); }

USS Variables

You can use USS variables in your style sheets.

css
.example { background-color: var(--color-coral-50); border-color: var(--color-slate-900); color: var(--color-lime-900); -unity-background-image-tint-color: var(--color-neutral-500); }

USS Classes

Or you can use USS classes to directly color your visual elements.

In addition to colors listed above, the classes also include 'transparent', 'black', and 'white'.

Background Color

Format: bg-{color}-{tone}

html
<engine:VisualElement class="bg-transparent" /> <engine:VisualElement class="bg-scarlet-500" /> <engine:VisualElement class="bg-scarlet-500-half" />

Text Color

Format: text-{color}-{tone}

html
<engine:Label class="text-black" /> <engine:Label class="text-white" /> <engine:Label class="text-scarlet-500" /> <engine:Label class="text-scarlet-500-half" />

Border Color

Format: border-{color}-{tone}

html
<engine:VisualElement class="border-purple-700" /> <engine:VisualElement class="border-scarlet-500" /> <engine:VisualElement class="border-scarlet-500-half" />

Image Tint Color

Format: tint-{color}-{tone}

html
<engine:VisualElement class="tint-white" /> <engine:VisualElement class="tint-scarlet-500" /> <engine:VisualElement class="tint-scarlet-500-half" />

UIColor Class

Allows you to easily apply USS classes listed above to VisualElements from code.

csharp
UIColor uiColor = new UIColor(UIColorName.Purple, UIColorValue.V_400); // Set background color visualElement.AddToClassList(uiColor.GetUssClassBG()); // Set border color visualElement.AddToClassList(uiColor.GetUssClassBorder()); // Set text color visualElement.AddToClassList(uiColor.GetUssClassText()); // Set image tint color visualElement.AddToClassList(uiColor.GetUssClassImageTint());

Settings

Theme

Light

Contrast

Material

Dark

Dim

Material Dark

System

Sidebar(Light & Contrast only)

Light
Dark

Font Family

DM Sans

Wix

Inclusive Sans

AR One Sans

Direction

LTR
RTL