Skip to content

ColorPicker

ColorPicker chooses one colour. It has three tabs: swatches, a saturation and brightness square with a hue slider, and sliders for each channel of a colour model. GradientPicker uses it to edit the stops of a gradient.

Usage

Call Components.ColorPicker with a scope and a table of properties:

local color = scope:Value(Color3.fromRGB(0, 105, 92))

C.ColorPicker(scope, {
    Value = color, -- (1)!
    OnChange = function(newColor, alpha)
        print(newColor, alpha)
    end,
})
  1. Value is a Color3 or a Value<Color3>. A Value and the picker follow each other: setting the state moves the picker, and moving the picker sets the state.

Tabs

  • Grid shows swatches. Palette replaces them.
  • Spectrum is a saturation and brightness square with a hue slider. With Area = "Wheel" it is a hue ring around the square instead. The ring needs conical gradients and falls back to the square without them.
  • Sliders has one slider for each channel of a model: "RGB", "HSB" (also "HSV"), "HSL", "LAB" or "Hex". The models show as chips under the tabs.

Sliders and thumbs

Each slider is filled with the gradient of its channel and has a number field. The thumb is small at rest and grows to the height of the track while it is pressed. The handles on the square and the ring behave the same way.

Alpha

There is an alpha slider over a checkerboard on every tab. Set ShowAlpha = false to remove it.

Properties

Name Type Required Default Description
Theme ThemeRef ❌ The contextual theme Theme to use for this component instead of the one from Theme.Provide.
LayoutOrder UsedAs<number> ❌ 0 Position in a parent UIListLayout or UIGridLayout.
Size UsedAs<UDim2> ❌ - Size of the component.
Value UsedAs<Color3> ❌ Color3.fromRGB(0, 105, 92) The colour, as a Color3 or a Value<Color3>. A Value is followed, and is set when the user changes the colour.
Alpha UsedAs<number> ❌ 1 Opacity from 0 to 1. A Value is followed, and is set when the user changes it.
ShowAlpha boolean ❌ true Show the alpha slider.
Modes { string } ❌ { "Grid", "Spectrum", "Sliders" } The tabs, in order, from "Grid", "Spectrum" and "Sliders".
Mode string ❌ The first mode Tab to show first.
Models { string } ❌ { "RGB", "HSB", "HSL", "LAB", "Hex" } The colour models offered on the Sliders tab, from "RGB", "HSB", "HSV", "HSL", "LAB" and "Hex".
Model string ❌ The first model Model to show first.
Area "Square" \| "Wheel" ❌ "Square" "Square" or "Wheel" for the Spectrum tab.
Palette { Color3 } ❌ A grey ramp and a grid of hues Swatches for the Grid tab.
Footer boolean ❌ true Show the swatch, hex field and alpha readout at the bottom.
Background Color3 ❌ Colors.Surface Fill colour of the picker.
Id string ❌ - Key that identifies this component when state is kept across rebuilds. See Persist.

Callbacks

Name Description
OnChanged: (Color3) -> () Runs with the colour when it changes.
OnAlphaChanged: (number) -> () Runs with the alpha when it changes.
OnChange: (Color3, number) -> () Runs with the colour and the alpha when either changes.

See also