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.

Implementation references

Scripting API and implementation references.

UI Toolkit
IMGUI

Overview

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}
U Toolkit
Color field in IMGUI
IMGUI

Guidance

Properties

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

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

Behavior

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

Formatting

Anatomy and layout

Anatomy
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
Default

Idle state of a color field.

Hovered

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

Color values of a color pickers parts
1. border
--unity-colors-object_field-border
The border color for an object field control
#B0B0B0
#202020
--unity-colors-object_field-border-focus
The border color for an object field control when it has focus
#1D5087
#3A79BB
--unity-colors-object_field-border-hover
The border color for an object field control when the mouse pointer hovers over it
#6C6C6C
#656565
2. border-color
--unity-colors-app_toolbar_button-background
The background color for a button in the main toolbar
#C8C8C8
#383838
--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

Code samples