ColorSpacePicker

Overview

A color picker that supports selection via the HSV, HSL, and RGB color spaces.

Creating the ColorSpacePicker

The component extends SkinnableComponent, so the picker can be added to any container that supports IVisualElementContainer.

Using the ColorSpacePicker

The picker supports selection along 3 color spaces: HSV, HSL, and RGB.

HSV = Hue, Saturation, Value
HSL = Hue, Saturation, Luminosity
RGB = Red, Green, Blue

Change the color space via the "colorSpace" property. The first three letters denote the color space used ("HSV", "HSL", "RGB"), and the letter after the hyphen denotes the color vector that will be set via the secondary spectrum. E.G. for HSV-H, the color space used will be HSV and the secondary spectrum will display the hue, while the primary spectrum will display the saturation and value.

Get the selected color via the "selectedColor" property. The selected color is stored as a uint RGB value and the property is bindable.

The selected color can also be set via the "selectedColor" property directly. To set the selected color via a HSL or HSV color definition, use the "setSelectedHSLColor()" or "setSelectedHSVColor()" methods. The advantage to using these methods is that it is not necessary to convert your HSL/HSV color to RGB before updating the selected color. Also, if you set the selectedColor via these methods, the exact HSL/HSV color information can be retrieved via the read-only properties: "selectedHSLColor" and "selectedHSVColor".

Color Space Considerations

Conversion between color spaces can lose information. Converting a HSL color to RGB and back to HSL (or HSV) may not end up as the same color. Also, color information can be lost. For example: assume a HSL color has a hue of 0 and a saturation and lightness of 50. When this color is converted to RGB, the uint RGB value is 0. If this RGB value is converted back to HSL, the saturation and lightness are lost and the new HSL color is hue 0, saturation 0, and lightness 0.

This can lead to problems when a user defines a color using HSL or HSV, converts it to RGB and sets the "selectedColor" property to the converted RGB value (selectedColor only accepts uint RGB values). This class will then convert the new RGB selected color to HSL and HSV which may be different than the HSL or HSV color the user just tried to set.

To avoid this problem, if you have defined a color using the HSV or HSL color space, set the selected color via the appropriate set function ("setSelectedHSVColor()" or "setSelectedHSLColor()"). These functions will store the set color perfectly in the contextual color space and convert it to the other color spaces. Then the exact HSL or HSV color can be retrieved via the read-only properties: "selectedHSLColor" and "selectedHSVColor".

Keep this conversion problem in mind when converting the RGB "selectedColor" to other color spaces in the application.

Layout

Set the width of the secondary spectrum via the "secondarySpectrumWidth" property and the gap between the secondary and primary spectrum via the the "spectrumGap" property.

The primary spectrum will fill the leftover available space.

Animations & Effects

Supports animating the primary and secondary markers via a Move animation. Users can change the duration and easer. Set the duration to 0 to skip the animation altogether.

Accessibility

Not accessible but the provided examples integrate form fields that allow a user to set the selectedColor directly via accessible keyboard navigation.

Custom Events

Dispatches 2 events:

VALUE_COMMIT
mx.events.FlexEvent
Dispatched when the "selectedColor" property changes for any reason.

CHANGE
ardisia.components.colorSpacePicker.events.ColorSpacePickerEvent
Dispatched when the "selectedColor" property changes due to user interaction.

Custom Styles

2 Custom styles:

borderColor
Color of the border.

borderAlpha
Alpha of the border.

Themes & Skinning

A single skin is provided for the spark theme.

Example

See the ColorSpacePicker application for example code.

Back To Top