Introduction:

What is it?

A simple color picker with all basic tools for color selection. That includes Red/Green/Blue sliders with input fields and additional Alpha channel that can be disabled in the inspector, Dropper tool, HSV palette and selecting color with its Hex value.

How to use it?

Depending on your UI structure, you may want to use either the LayoutGroup prefab or RectTransform anchored prefab. They both scale in a different way, so you may want to try both to get the best results. You will find more detailed description of the prefabs below.

To add it to your project, simply put the prefab of your choosing inside your UI canvas and assign it to your script. You can access the color selected in ColorPicker with the SelectedColor property or by subscribing to the ColorUpdated event. The event is fired after a color is selected in the ColorPicker.

You can choose whether the alpha channel should be visible or not in the Inspector. You can also select the default color.

Components:

Selected Color:

Displays currently selected color and it’s alpha value.

HSV Palette:

Saturation/Brightness palette for the current Hue slider value. You can select the hue value with the Hue slider and then pick the color from the palette by mouse clicking/dragging.

R/G/B/A Controls:

Red, Green, Blue and alpha controls allow you to specify each color value separately. You can do that either with the input fields or with the sliders.

Hex Input.

Allows selecting color with its hexadecimal equivalent. It works exactly as in Unity3d:

• entering 3 characters (i.e. RGB) will result in RRGGBBFF color (alpha is 1)

• entering 4 characters (i.e. RGBA) will result in  RRGGBBAA color

• entering 6 characters (i.e. RRGGBB) will result in RRGGBBFF color (alpha is 1)

• entering 8 characters (i.e. RRGGBBAA) will result in RRGGBBAA color

For strings of other length or when the Escape key is pressed the value will not be set (value from before selecting the input field will be restored).

Prefabs Details:

Layout Group prefab

This prefab is built with UnityUI's Horizontal and Vertical Layout Group and Layout Element components. Its values are adjusted for 1920x1080 screen size and 100pixels per unit Canvas scaling.

To change the way it scales will have to change the minimum and prefered values in Layout Element components of Sliders, Hex, Palette and SelectedColor rows as well as Layout Groups' Padding. Each row has 3 columns that also needs to be adjusted (Hex row has only 2 columns, its left margin is set in the Padding section of HorizontalLayoutGroup).

Anchor Prefab

This prefab's scaling is achieved by adjusting all its components' anchors. For example: the bottom margin is 5% or 0.05 Min Anchor y value in Hex RectTransform. To change the bottom margin to be at 10% of the windows height, you will have to change Hex RectTransform's Min Anchor Y value to 0.1, its Max Anchor Y value to 0.15 (if you want the Hex component to be occupy 5% of the window's height) and move all other component in the same manner. This is a lot of micro management, but it's worth the time as it will work with any Canvas Scaler setting.