Color picker

Description

This component is used for users, from the UI side, to choose a desired particular color for the targeted element.

Component structure

Near the Color input, there is a Color picker widget popup, marked with a different color-picker rounded icon.

Once clicked, the popup will be prompted in the UI. The popup has the following components:

  • Main HTML color code input field - for typing the HTML color code with the hashtag symbol (#).

  • Colorized square - area of all the color palette, once the mouse cursor is hovering in any place in the square, the cursor becomes a plus icon (+). Once clicked, the main Color input will be stored with the HTML color code and the input will be colorized with the particular selected color.

  • 10 color previews - 10 squares with different color previews for faster color choosing.

  • Popup Input field - for typing the HTML color code with the hashtag symbol (#) in the popup.

For example, #ffffff value indicates white color. Read more about the HTML color values.

PreviousFormsNextText Editing Tools list

Last updated