The ColorPicker Class

Overview

The ColorPicker class creates a control that allows the user to pick a color from a standard palette of colors or pick a custom color by choosing specific values. 

Initially the ColorPicker control looks like a ChoiceBox (or ComboBox) with the default option of White selected (this is represented by a small icon of the color and its name next to it). When the control is clicked by the user a drop-down window appears with a palette of standard color choices.


 

The palette windows is a grid of small squares, each one representing a particular color, that the user can click on to pick a color. If the user clicks on one of the squares the palette window disappears and the control goes back to its initial look of a ChoiceBox. The button part of the control will have changed to reflect the choice of color. The colors are a predefined set that span the full color spectrum.

Below the palette is a link called Custom Color. If the user clicks on this link a pop-up showing the user a modal dialog window containing different settings for choosing a color. 

The Custom Color dialog window has several parts:

• A color square with a circle pointer on it. The user can drag the pointer anywhere on the square to fine tune the color they want.
• A vertical color band which has a rectangular pointer on it. This pointer shows the small color range the color square is displaying. The user can pull the pointer up and down the band to change the color.
• A set of tabs that offer the user a choice of specifying the color as a HSB, RGB or Web value. The HSB (Hue, Saturation and Brightness) tab creates a color based on those three values. Likewise the RGB (Red, Green Blue) tab creates the color based on the balance of red, green and blue. Lastly the web color is a hash code where every color corresponds to a particular 6 digit hexadecimal number.

• An opacity slider which the user can use to set the transparency of the custom color.

Import Statement

import javafx.scene.control.ColorPicker;

Constructors

There are two constructors for the ColorPicker control. The first creates a default ColorPicker with the color being set to white:

ColorPicker colors = new ColorPicker();
The second constructor allows the passing of a color value. This color value can be a constant from the Color class:

ColorPicker colors = new ColorPicker(Color.BLANCHEDALMOND);
or a specfic RGB value:

ColorPicker colors = new ColorPicker(Color.rgb(120, 68, 92));
or a specific HSB value:

ColorPicker colors = new ColorPicker(Color.hsb(12, 0.5, 0.8));
or a specific web value:

ColorPicker colors = new ColorPicker(Color.web("#FF00FF"));

Useful Methods

The ColorPicker can be customized to change it's initial appearance away from the ChoiceBox look. Instead it can be made to look like a button or a split menu button (the button part of the control is split from the drop-down part of the control).

To change the look use the getStyleClass method and add a CSS class. For the split menu button look use the "split-button" class:

colors.getStyleClass().add("split-button");
For the button look use the "button" class:

colors.getStyleClass().add("button");
To find out about other JavaFX controls have a look at JavaFX User Interface Controls.