Implementation references

Scripting API and implementation references.

UI Toolkit


Default color field on light and dark themes
  • Color field is an interface that makes color selection easier through point-and-click interactions
  • By using the eyedropper button or clicking on the color swatch you can change the active color
  • The color picker also enables choosing an alpha range and HDR (High Dynamic Range) values

Color field APIs

Color field in UI Toolkit

Object field UI Builder icon
UI Builder allows visual creation of UI assets in UI Toolkit, and is available as a built-in feature {2021.1 and later} or a package {2020.3 and earlier}
API in UI Toolkit
Color field in IMGUI



Below are notable properties for color fields that are both applicable in UI Toolkit and IMGUI frameworks.

If true, treats the color as an HDR value. If false, treats the color as a standard LDR value.
If true, allows the user to set an alpha value for the color. If false, hides the alpha component.
If true, the color picker will show the eyedropper control. If false, the color picker won't show the eyedropper control.


Color picking

You can use the eyedropper button to pick color values from anywhere on the screen.

To pick a color, click the eyedropper button next to a color property, then click anywhere on the screen. Unity sets the color property to the color of the pixel you clicked.

You can save the colors you set in reusable swatch libraries that you can share between projects.

An animated example of an eyedropper button picking a color from a random part of the screen
Color picking with the eyedropper button
Color picker modals
Standard color pickers in light and dark themes

Click the color swatch field to open a standard or a High Dynamic Range (HDR) color picker, depending on the context.

For example, Unity displays the HDR Color Picker window when you edit the emission color property in the standard shader.

An animated illustration of opening a color picker by clicking on the color swatch field
Color picking with the color picker modal


Anatomy and layout

A color picker and its parts

A color field consists of the following parts:

  • Color swatch field
  • Alpha swatch field
  • Eyedropper button
  • Color picker modal

Interaction states

Interactive states of a color picker

Idle state of a color field.


When hovered, color field borders are highlighted.

Color picking focus

When color picking with the eyedropper button, color field borders are highlighted in blue.

Color picker modal focus

When the color swatch field is clicked, the color field will display Color Picker Modal.


Color values of a color pickers parts
1. border
The border color for an object field control
The border color for an object field control when it has focus
The border color for an object field control when the mouse pointer hovers over it
2. border-color
The background color for a button in the main toolbar
The background color for the button in an object field control when the mouse pointer hovers over it

Code samples