Liferay.Design / Lexicon
Get StartedResources
Part of Liferay, IncPowered by Gatsby and Netlify

Color Picker

Sign In

Color picker lets users select a color from a predefined palette, specify a color via its hexadecimal value, sample a color, and explore color values to create a custom color variation.

Color picker field

This pattern offers two variations, depending on the required usage. Please see the Variations section below for more information.



Color picker field

This field has two key areas: The leftmost, or color square, opens the predefined palette panel; The rightmost, or field, lets the user input a color's hexadecimal value.

Predefined Palette Panel

Color picker open at predefined panel

The predefined palette panel provides a set of predefined colors, as well as lets users create new colors to access in the "Custom color panel."

The available colors can be modified via API. Lexicon provides the default color palette shown in the previous image.

The color palette can contain as many colors as you require, but we recommend that you provide at least seven colors.

3 predefined color picker palette panels with different lengths

Custom Color Panel

Color picker with 7 points to describe the different elements. Explained below.

  1. Custom colors label
  2. Color drop button
    • The sampled color is displayed in the predefined palette panel
    • Note that the sampled color is not preselected in the predefined palette panel
  3. Color cells set
  4. Color definition box
  5. RGB form set
  6. Color HUE slider
  7. Hexadecimal text field

Inputs 4, 5, 6 and 7 automatically update each time one of them is modified to reflect the same value.


Predefined palette panel layout and dimensions:

Predefined palette panel measures and distances

Custom panel layout and dimensions:

Custom panel measures and distances



The unrestricted variation provides the complete set of color selection options for the user.

Color picker at its restricted version where only a predefined color palette is shown


The restricted variation only provides the predefined color palette values for the user to choose.

Color picker at its restricted version where only a predefined color palette is shown

How can this be improved? Contribute today!