LTS 2022.3

Color Field

Color Fields in Figma ->

A color field allows the user to select a color and an associated alpha value to define the color’s transparency.

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

UI Builder

About UI Builder ->

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.

Color Field in UI Toolkit

For more information about properties in the Unity Manual go to Color Field in IU Toolkit ->

Color Field in IMGUI

For more information about properties in the Unity Manual go to Color Field in IMGUI ->

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

Color field and modals in Figma

To start using color field and color picker modals go to the Editor Foundations Figma Toolkit ->

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

Variable name

Variable description

Light theme

Dark theme

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

Variable name

Variable description

Light theme

Dark theme

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

Icon indicating link goes to a page with foundational content

Editor Color Palette

For information about color use in the Editor go to Foundations > Color Palette ->

Code samples

Code references

Scripting references for

UI Toolkit

ColorField

Makes a field for selecting a color in UIT.

Scripting References

Arrow icon indicating link goes to an external source

Scripting references for

IMGUI

EditorGUI.ColorField

Makes a field for selecting a color in IMGUI.

Scripting References

Resources and related

Resources

Unity Docs

Editor Documentation, including scripting references.

docs.unity3d.com

Figma UI Toolkit

Get started in Figma with Editor Foundations UI Toolkit

Figma library

View all ->

Color Palette

Color system to assist our users creating consistent experiences across the Editor.

Dropdown

A dropdown is a clickable menu element that displays multiple related action options or settings.

UIT

IMGUI

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 Field

Implementation references

Scripting API and implementation references.

UI Toolkit

IMGUI

Overview

Color field APIs

Color field in UI Toolkit

UI Builder

U Toolkit

IMGUI

Guidance

Properties

Properties

Behavior

Color picking

Color picker modals

Formatting

Anatomy and layout

Anatomy

Interaction states

Default

Hovered

Color picking focus

Color picker modal focus

Color

1. border

2. border-color

Code samples

Code references

Scripting references for

Scripting references for

Resources and related

Resources

Unity Docs

Figma UI Toolkit

See also

Color Palette

Dropdown

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.