LuxColorPicker: a better JavaFX color picker 2018-02-19

LuxColorPicker is a simple HSV color picker for JavaFX with a highly usable interface. The main features of LuxColorPicker are:

  • Only one color selection mode: Hue/Saturation/Value.
  • Large components improve usability.
  • Minimalistic design: no unnecessary components or text to distract users.

LuxColorPicker is easy to integrate in new JavaFX projects. The code is at GitHub.

This is a screenshot of the color picker in action:

Why LuxColorPicker?

JavaFX already has a built-in color picker component, so you might wonder why LuxColorPicker is needed. In my opinion the standard JavaFX color picker is functional but flawed: I don’t like its default color selection mode, and it has unnecessarily small components which make it fiddly to use.

If you agree with these points, then LuxColorPicker might be the right color picker for you.

Only HSV

Unlike many other color pickers, LuxColorPicker has only one color selection mode: Hue/Saturation/Value (HSV). In my opinion the HSV mode is the best selection mode, making all others useless.

Large Components

Small interface components are fiddly and less visible than large components. The smaller a component is, the longer it will take to accurately hit with the mouse (unless the component touches the edge of the screen). This is not my opinion, it’s UX science.

In LuxColorPicker, all components are oversized compared to most other color pickers. This not only makes the components easier to use, but also increases the visibility of the colors on display. In particular the hue selection bar is much larger than I have seen in other programs. I made the hue bar this large because it helps in making the available hues clearly visible.

The preview color swatch is large for the same reason: it is important to clearly see the current selected color.


There is a “Save” button to confirm the current color selection, but the user does not need to click it. LuxColorPicker is non-modal and focus-shy: simply clicking outside the color picker closes it and confirms the selection. Pressing escape cancels the current selection and closes the color picker. The buttons are there just for users who have not yet learned the optimal interactions.

History and Random Swatches

The only nonessential embellishments in LuxColorPicker are the color swatches below the preview swatch. These are the history and random swatches. The random swatches show random colors close to the current selected color, and the history swatches contain the previously selected colors.

The random colors are useful when you don’t know exactly what color you want to pick – maybe one of the random colors will look nice.

Categories: Uncategorized

Leave a Reply

Your email address will not be published. Required fields are marked *