Log-in required.

You are trying to access the internal Editor Foundations design system.
Sign-in with your Unity Google account to continue, or visit the public site.

Color · UX essentials

Essential guidance on color usage in the Editor.

UI does not use color as the only interaction indicator
US-0171
Blue plus sign icon indicating that clicking on this will expand this content
Colors are legible in both light and dark themes
US-0209
Blue plus sign icon indicating that clicking on this will expand this content
UI follows color system in Unity Style Sheet
US-0163
Blue plus sign icon indicating that clicking on this will expand this content
Semantic colors convey common meanings only
US-0166
Blue plus sign icon indicating that clicking on this will expand this content
Color is only used to improve UI usability
US-0169
Blue plus sign icon indicating that clicking on this will expand this content
Colors follow the Editor base layer structure system
US-0210
Blue plus sign icon indicating that clicking on this will expand this content
Errors and other feedback states use correct message theming
US-0211
Blue plus sign icon indicating that clicking on this will expand this content

Resources and API documentation

Overview

  • Refer to the Editor built-in color variables to have a clear understanding of color variables and themes in the Editor.
  • Color is used to support the information architecture of a software application. An appropriate use of color signals the importance and priority of the UI to the user.
  • Color helps to orient the user and aids in making the controls distinct from one another.
  • Limit color usage in the Editor to a subtly nuanced palette to avoid overwhelming the user interface with an excess of overly bright colors.

Color Variables

Themes

The Unity Editor is available in two themes: light and dark. Theme selection is a personal preference. Users spend many hours in the Editor and using an appropriate theme option can greatly reduce eye strain in a given environment.

A split image showing the Inspector in light theme on the left and dark theme on the right
The Unity Editor is available in dark and light themes to support user preferences.

Variables

A variable is an identifier in the code that assigns a value. Colors are implemented using color variables so they can be easily changed. For example, each color variable has a light and dark value so that when the Editor theme is changed the UI will automatically update to the correct theme.
 
Avoid using hard-coded colors in Editor UI as hard-coded values will not change when colors are updated. Always style UI for the Editor using color variables rather than hexadecimal or RGBA color values directly. Many pre-existing variables are available. However, new variables can be created as needed.

Unity Variable Names

Unity uses a specific naming convention for built-in variables to indicate how they are used. A variable name consists of one or more parts, separated by hyphens. Each part consists of one or more words separated by underscores.

Example of variable naming:
--unity-{group}-{role_and_control}-{sub_element}-{pseudo_state_sequence}

For example, the following variable name --unity-colors-button-text-hover provides the following information about how Unity uses the variable:

Group (colors)
colors
The variable represents color data
Role/Control (button)
button
The variable affects buttons
Sub-Element (text)
text
The variable affects text. Because its group is colors, you know it affects text color
Pseudo-States (hover)
hover
Unity uses the variable in styles that it applies to elements when the mouse pointer hovers over them

For more about built-in Unity variables go to Unity’s built-in style sheets

Pseudo-States

The pseudo-state sequence is a list of UI states that Unity uses a variable for.

For example, when you see a variable name with the hover pseudo-state, it means Unity uses the variable in styles that affect elements when a user hovers the mouse pointer over them.

Example: --unity-colors-toolbar_button-text-hover

A variable name can have more than one pseudo-state. Multiple pseudo-states appear in alphabetical order, separated by underscores.

Example: --unity-colors-toolbar_button-text-focus_selected

Unity variable names can have any combination of the following pseudo-states:

(none)
Normal state
checked
A control is checked (like a check-box)
disabled
A control is disabled
focus
A control has focus
hover
A user hovers over a control
inactive
A control does not have focus
pressed
A control is pressed
selected
A control is selected

Flat Design

Icon of a red triangle to indicate a message of warning.
Unity Editor follows flat design principles
Avoid using shadows excessively to add depth to the UI. Instead use accented borders and base layers to add depth to your designs.

While the Unity Editor as a whole follows principles of flat UI design, it introduces depth using different principles:

  • Accented borders
  • Inset and outset controls
  • Base layers of background colors

Accented Borders

Accent borders are designed to inset and outset UI to support the layering of the user interface. This subtle increase in control differentiation has a considerable impact on usability. For example, the text field control is inset and has a different top border color.

Illustration of an inset border and an outset border using a darker border shading.
Inset borders are used with Input Fields, outset borders are used on click controls.

Base Layers

Colors in the Editor are designed to leverage the real world of tactile objects and physical layering. Layers, like sheets of paper on a desk, are arranged one on top of another. This layering of UI and color is designed to support the information architecture and visual organization of content for optimal usability. Colors are layered from dark to light according to three base layers:

Illustration of three base layers shown layered on top of each other  with the darkest layer on the bottom and the lightest layer on top.
Colors are arranged from dark to light within three base layers.

Base 1 - Application Bar and Controls
Base 2 - Components and Windows
Base 3 - Toolbars and Toolbar Controls

Icon of a letter I in a blue circle indicating this is a piece of informational content
Color variables in Frameworks
Color variables documented here are only applicable in IMGUI and UI Toolkit frameworks and are not intended to be used in Runtime.

Base 1

Application Bar

Illustration of the App Toolbar with labels of the common names of colors found in the chart below.
The App toolbar, at the top of the Editor, contains many buttons including the player controls.
1
App Toolbar Background
--unity-colors-app_toolbar-background
The background color for the main toolbar
#8A8A8A
#191919
2
App Toolbar Button Background
--unity-colors-app_toolbar_button-background
The background color for a button in the main toolbar
#C8C8C8
#383838
3
App Toolbar Button Background Checked
--unity-colors-app_toolbar_button-background-checked
The background color for a button in the main toolbar when it is checked
#656565
#6A6A6A
App Toolbar Button Background Hover
--unity-colors-app_toolbar_button-background-hover
The background color for a button in the main toolbar when the mouse pointer hovers over them
#BBBBBB
#424242
App Toolbar Button Background Pressed
--unity-colors-app_toolbar_button-background-pressed
The background color for a button in the main toolbar when it is pressed
#656565
#6A6A6A
4
App Toolbar Button Border
--unity-colors-app_toolbar_button-border
The border color for a button in the main toolbar
#6B6B6B
#191919
App Toolbar Button Border Accent
--unity-colors-app_toolbar_button-border_accent
The accent border color for a button in the main toolbar
#6B6B6B
#222222

Base 2

Button Colors

Toggle and Basic button in dark theme.
Button Background
--unity-colors-button-background
The background color for a button control
#E4E4E4
#585858
Button Background Focus
--unity-colors-button-background-focus
The background color for a button control when it has focus
#BEBEBE
#6E6E6E
Button Background Hover
--unity-colors-button-background-hover
The background color for a button control when the mouse pointer hovers over it
#ECECEC
#676767
Button Background Hover Pressed
--unity-colors-button-background-hover_pressed
The background color for a button control when it is hoverd and pressed
B0D2FC
4F657F
Button Background Pressed
--unity-colors-button-background-pressed
The background color for a button control when it is pressed
#96C3FB
#46607C
Button Border
--unity-colors-button-border
The border color for a button control
#B2B2B2
#303030
Button Border Accent
--unity-colors-button-border_accent
The border accent color for a button control
#939393
#242424
Button Border Accent Focus
--unity-colors-button-border_accent-focus
The border accent color used for a button control when focused
018CFF
7BAEFA
Button Border Pressed
--unity-colors-button-border-pressed
The border color for a button control when it is pressed
#707070
#0D0D0D
Button Text
--unity-colors-button-text
The text color for a button control
#090909
#EEEEEE

For more information go to Buttons ->

Help Boxes

Illustration of a helpbox for shader channels
Shader channels helpbox.
Helpbox Background
--unity-colors-helpbox-background
The background color for a helpbox control
rgba(235, 235, 235, 0.2039216)
rgba(96, 96, 96, 0.2039216)
Helpbox Border
--unity-colors-helpbox-border
The border color for a helpbox control
#A9A9A9
#232323
Helpbox Text
--unity-colors-helpbox-text
The text color for a helpbox control
#161616
#BDBDBD

For more information go to Dropdowns ->

Input Field (Numeric, Search, Text Fields) Colors

A text field component in dark theme.
Text field in dark theme.
Input Field Background
--unity-colors-input_field-background
The background color for an input field control
#F0F0F0
#2A2A2A
Input Field Border
--unity-colors-input_field-border
The border color for an input field control
#B7B7B7
#212121
Input Field Border Accent
--unity-colors-input_field-border_accent
The border accent color for an input field control
#A0A0A0
#0D0D0D
Input Field Border Focus
--unity-colors-input_field-border-focus
The border color for an input field control when it has focus
#1D5087
#3A79BB
Input Field Border Hover
--unity-colors-input_field-border-hover
The border color for an input field control when the mouse pointer hovers over it
#6C6C6C
#656565

For more information go to Numeric Fields ->

For more information go to Search Fields ->

For more information go to Text Fields ->

Multi Column Header

Header Bar Background
--unity-colors-headerbar-background
The background color for a header bar control
#CBCBCB
#3C3C3C
Header Bar Column Control Background
--unity-colors-headerbar_column-background
The background color used for a column control in a header bar
#CBCBCB
#3C3C3C
Header Bar Column Control Background Hover
--unity-colors-headerbar_column-background-hover
The background color used for a button control when hovered over
#C1C1C1
#464646
Header Bar Column Control Background Pressed
--unity-colors-headerbar_column-background-pressed
The background color used for a button control when pressed
#EFEFEF
#505050

For more information go to Numeric Fields ->

For more information go to Search Fields ->

For more information go to Text Fields ->

Object Field Colors

Object Field Background
--unity-colors-object_field-background
The background color for an object field control
#EDEDED
#282828
Object Field Border
--unity-colors-object_field-border
The border color for an object field control
#B0B0B0
#202020
Object Field Border Focus
--unity-colors-object_field-border-focus
The border color for an object field control when it has focus
#1D5087
#3A79BB
Object Field Border Hover
--unity-colors-object_field-border-hover
The border color for an object field control when the mouse pointer hovers over it
#6C6C6C
#656565
Object Field Button Background
--unity-colors-object_field_button-background
The background color for the button in an object field control
#DEDEDE
#373737
Object Field Button Background Hover
--unity-colors-object_field_button-background-hover
The background color for the button in an object field control when the mouse pointer hovers over it
#CCCCCC
#4C4C4C

For more information go to Object Fields ->

Scrollbar Colors

Scrollbar Button Background
--unity-colors-scrollbar_button-background
The background color for a scrollbar's scroll buttons
rgba(0, 0, 0, 0.05098039)
rgba(0, 0, 0, 0.05098039)
Scrollbar Button Background Hover
--unity-colors-scrollbar_button-background-hover
The background color for a scrollbar's scroll buttons when the mouse pointer hovers over them
#A7A7A7
#494949
Scrollbar Groove Background
--unity-colors-scrollbar_groove-background
The background color for a scrollbar's groove (background)
rgba(0, 0, 0, 0.05098039)
rgba(0, 0, 0, 0.05098039)
Scrollbar Groove Border
--unity-colors-scrollbar_groove-border
The border color for a scrollbar's groove
rgba(0, 0, 0, 0.1019608)
rgba(0, 0, 0, 0.1019608)
Scrollbar Thumb Background
--unity-colors-scrollbar_thumb-background
The background color for a scrollbar's thumb/handle
#9A9A9A
#5F5F5F
Scrollbar Thumb Background Hover
--unity-colors-scrollbar_thumb-background-hover
The background color for a scrollbar's thumb/handle when the mouse pointer hovers over it
#8E8E8E
#686868
Scrollbar Thumb Border
--unity-colors-scrollbar_thumb-border
The border color for a scrollbar's thumb/handle
#B9B9B9
#323232
Scrollbar Thumb Border Hover
--unity-colors-scrollbar_thumb-border-hover
The border color for a scrollbar's thumb/handle when the mouse pointer hovers over it
#8E8E8E
#686868

Slider Colors

A basic slider and a min-max slider shown in dark theme.
Basic and Min / Max slider in dark theme.
Slider Groove Background
--unity-colors-slider_groove-background
The background color for a slider's groove (background)
#8F8F8F
#5E5E5E
Slider Groove Background Disabled
--unity-colors-slider_groove-background-disabled
The background color for a slider's groove when it is disabled
#A4A4A4
#575757
Slider Thumb Background
--unity-colors-slider_thumb-background
The background color for a slider's thumb/handle
#616161
#999999
Slider Thumb Background Disabled
--unity-colors-slider_thumb-background-disabled
The background color for a slider's thumb/handle when it is disabled
#9B9B9B
#666666
Slider Thumb Background Hover
--unity-colors-slider_thumb-background-hover
The background color for a slider's thumb/handle when the mouse pointer hovers over it
#4F4F4F
#EAEAEA
Slider Thumb Border
--unity-colors-slider_thumb-border
The border color for a slider's thumb
#616161
#999999
Slider Thumb Border Disabled
--unity-colors-slider_thumb-border-disabled
The border color for a slider's thumb when it is disabled
#666666
#666666
Slider Thumb Halo Background
--unity-colors-slider_thumb_halo-background
The background color for a slider's thumb halo
rgba(12, 108, 203, 0.5019608)
rgba(16, 111, 205, 0.5019608)

For more information go to Sliders ->

Tab Colors

A Scene window with labeled elements showing different window tab colors.
Scene window showing window tab colors.
1
Tab Background
--unity-colors-tab-background
The background color for an Editor window tab
#B6B6B6
#353535
Tab Background Checked
--unity-colors-tab-background-checked
The background color for an Editor window tab when it is selected
#CBCBCB
#3C3C3C
Tab Background Hover
--unity-colors-tab-background-hover
The background color for an Editor window tab when the mouse pointer hovers over it
#B0B0B0
#303030
2
Highlight Background
--unity-colors-highlight-background
The background color for selected items or selected text
#3A72B0
#2C5D87

For more information go to Tabs ->

Inspector Backgrounds

The Main Camera Inspector window with labeled elements showing different window background colors.
Main Camera Inspector window showing different background colors.
2
Inspector Titlebar Background
--unity-colors-inspector_titlebar-background
The background color for a title bar in an Inspector view
#CBCBCB
#3E3E3E
Inspector Titlebar Background Hover
--unity-colors-inspector_titlebar-background-hover
The background color for a title bar in an Inspector view when the mouse pointer hovers over it
#D6D6D6
#474747
1
Toolbar Background
--unity-colors-toolbar-background
The background color for a toolbar control
#CBCBCB
#3C3C3C
3
Window Background
--unity-colors-window-background
The background color for a window
#C8C8C8
#383838

Inspector Borders

The Main Camera Inspector window with labeled elements showing different window border colors.
Main Camera Inspector window showing different border colors.
1
Inspector Titlebar Border
--unity-colors-inspector_titlebar-border
The border color for a title bar in an Inspector view
#7F7F7F
#1A1A1A
2
Inspector Titlebar Border Accent
--unity-colors-inspector_titlebar-border_accent
The border accent color for a title bar in an Inspector view
#BABABA
#303030

Window Backgrounds 

Light Explorer window with labeled elements with differnt background colors.
Light Explorer window showing different background colors.
1
Default Background
--unity-colors-default-background
The default background color for controls
#A5A5A5
#282828
Highlight Background Inactive
--unity-colors-highlight-background-inactive
The background color for selected items or selected text when the control does not have focus
#AEAEAE
#4D4D4D
2
Highlight Background
--unity-colors-highlight-background
The background color for selected items or selected text
#3A72B0
#2C5D87
Highlight Background Hover
--unity-colors-highlight-background-hover
The background color for line items when the mouse pointer hovers over them
rgba(0, 0, 0, 0.0627451)
rgba(256, 256, 256, 0.0627451)
Highlight Background Hover Lighter
--unity-colors-highlight-background-hover-lighter
The background color for an item with a line specific background color when the mouse pointer hovers over them
#9A9A9A
#5F5F5F
3
Window Background
--unity-colors-window-background
The background color for a window
#C8C8C8
#383838
4
Alternated Rows Background
--unity-colors-alternated_rows-background
The alternate background color for views with alternating row colors
#CACACA
#3F3F3F

Window Borders

A Project window with labeled elements showing different window border colors.
Project window showing different window border colors.
3
Default Border
--unity-colors-default-border
The default border color for controls
#999999
#232323
1
Toolbar Border
--unity-colors-toolbar-border
The border color for a toolbar control
#999999
#232323
2
Window Border
--unity-colors-window-border
The border color for a window
#939393
#242424

Base 3

Toolbars

A Game window toolbar with labeled elements showing different colors.
A Game window toolbar showing different colors.
1
Toolbar Background
--unity-colors-toolbar-background
The background color for a toolbar control
#CBCBCB
#3C3C3C
2
Toolbar Border
--unity-colors-toolbar-border
The border color for a toolbar control
#999999
#232323
3
Toolbar Button Background
--unity-colors-toolbar_button-background
The background color for a toolbar button control
#CBCBCB
#3C3C3C
Toolbar Button Background Checked
--unity-colors-toolbar_button-background-checked
The background color for a toolbar button control when it is checked
#EFEFEF
#505050
Toolbar Button Background Focus
--unity-colors-toolbar_button-background-focus
The background color for a toolbar button control when it has focus
#C1C1C1
#464646
Toolbar Button Background Hover
--unity-colors-toolbar_button-background-hover
The background color for a toolbar button control when the mouse pointer hovers over it
#C1C1C1
#464646
4
Toolbar Button Border
--unity-colors-toolbar_button-border
The border color for a toolbar button control
#999999
#232323

Text

Base 1 - Default Text Colors

A Console window with labeled elements showing different text colors.
Console window showing different text colors.
1
Default Text
--unity-colors-default-text
The default text color
#090909
#D2D2D2
Default Text Hover
--unity-colors-default-text-hover
The default text color when the mouse pointer hovers over the text
#090909
#BDBDBD
2
Error Text
--unity-colors-error-text
The text color for error messages
#5A0000
#D32222
3
Link Text
--unity-colors-link-text
The text color for unvisited links
#4C7EFF
#4C7EFF
Visited Link Text
--unity-colors-visited_link-text
The text color for visited links
#AA00AA
#FF00FF
Warning Text
--unity-colors-warning-text
The text color for warning messages
#333308
#F4BC02

Base 2 - Windows and Component Text Colors

A Project Settings window with labeled elements showing different text colors.
Project Settings window showing different text colors.
1
Helpbox Text
--unity-colors-helpbox-text
The text color for a helpbox control
#161616
#BDBDBD
Highlight Text
--unity-colors-highlight-text
The text color for selected items or selected text
#0032E6
#4C7EFF
Highlight Text Inactive
--unity-colors-highlight-text-inactive
The text color for selected items or selected text when the control does not have focus
#FFFFFF
#FFFFFF
2
Label Text
--unity-colors-label-text
The text color for a label control
#090909
#C4C4C4
3
Label Text Focus
--unity-colors-label-text-focus
The text color for a label when it has focus
#003C88
#81B4FF
Preview Overlay Text
--unity-colors-preview_overlay-text
The text color for a preview control overlay
#FFFFFF
#DEDEDE
Window Text
--unity-colors-window-text
The text color for a window
#090909
#BDBDBD

Base 3 - Toolbar Text Colors

A Scene window with labeled elements showing different text colors used in toolbars.
A Scene window showing different text colors used in toolbars.
1
Tab Text
--unity-colors-tab-text
The text color for an Editor window tab
#090909
#BDBDBD
2
Toolbar Button Text
--unity-colors-toolbar_button-text
The text color for a toolbar button control
#090909
#C4C4C4
Toolbar Button Text Checked
--unity-colors-toolbar_button-text-checked
The text color for a toolbar button control when it is checked
#090909
#C4C4C4
Toolbar Button Text Hover
--unity-colors-toolbar_button-text-hover
The text color for a toolbar button control
#090909
#BDBDBD