v3:Features

SUPPORTED COLORS

This plugin supports the following color modes:

• RGB
• HSV
• HSB
• Alpha channel

MULTIPLE FORMATS

There are numbers of formats which the color picker can display its value:

• hex format, e.g. ffffff
• CSS-style hex format, e.g. #ffffff
• rgb format, e.g. rgb(255, 255, 255)
• rgba format, e.g. rgba(255, 255, 255, 1)
• rgb% format, e.g. rgb(100%, 100%, 100%)
• rgba% format, e.g. rgb(100%, 100%, 100%, 100%)
• hsv format, e.g. hsv(360, 1, 1)
• hsva format, e.g. hsva(360, 1, 1, 1)
• hsv% format, e.g. hsv(100%, 100%, 100%)
• hsva% format, e.g. hsva(100%, 100%, 100%, 100%)
• hsb format, e.g. hsb(360, 1, 1)
• hsba format, e.g. hsba(360, 1, 1, 1)
• hsb% format, e.g. hsb(100%, 100%, 100%)
• hsba% format, e.g. hsba(100%, 100%, 100%, 100%)

INDIVIDUAL SLIDERS

The color picker can be set to display slider for each individual color channel.

COMPONENT COLOR RETRIEVAL

Get only the R, G, B, H, S, V or A value from the selected color.

THEMING CAPABILITY

The color picker appearance can be customized using CSS. This package already contains two CSS variants which can be used as starting point to make your own theme.

POPUP / BLOCK LAYOUT

Whether you want to attach a popup, dropdown-like, color picker to an input element, or convert a plain input into color picker box to display it at all times, the Wheel Color Picker plugin has this feature.

ADJUSTABLE QUALITY

Whether you want to target modern browsers or the ones with older systems, there's options to adjust quality for performance boost.

COLOR CONVERSION UTILITIES

This plugin includes color conversion utilities such as:

1. RGB to HSV conversion $.fn.wheelColorPicker.rgbToHsv({ r:1, g:1, b:1 })
2. HSV to RGB conversion $.fn.wheelColorPicker.HsvToRgb({ h:1, s:1, v:1 })
3. Color Object to String conversion $.fn.wheelColorPicker.colorToStr({ r:1, g:1, b:1 })
4. Color String to Object conversion $.fn.wheelColorPicker.strToColor("#ffffff")

ADJUSTABLE COLOR PICKER SIZE

The color picker size can be programmatically resized with by setting autoResize option to false and defining width and height in CSS.

MOBILE FRIENDLY LAYOUT

When opened in mobile browsers, the color picker can automatically adjust to fit the limited screen.