This color picker can work internally in the CIE Lab color space, represented with the CIE Lch color model. The benefit is the consistent lightness and chroma values between the different colors, so it can represent yellow and blue with the same human perceived lightness. This is not the case with the more known RGB or HSL color models, where yellow is much brighter than blue. Altough, this color picker supports them as well, due to the fact that these are the supported color representations in CSS3.
In CIE Lch model, there are colors that can not be converted to RGB values (for example there is no dark yellow color with high chroma value). When there is an Lch variation that can not be represented in the RGB color space, then the color picker searches for the highest possible chroma value for that particular color (for example the only valid chroma value for black or white colors is 0), and uses the lowered chroma value for conversion. This way the color's hue and the lightness will not distorted.
The position markers on the sliders are always shows an exclamation mark when the actual Lch setting can not be converted to an RGB value, but there is more to it! You can make the invalid colors invisible or semi-transparent using the invalidcolorsopacity setting. This way it is easier to find different hues or lightness with the same chroma.
You can notice that the preview shows the actual color with the highest possible chroma value. See it in action:
<span class="cielch-demo2"></span>
$(".cielch-demo2").ColorPickerSliders({
flat: true,
invalidcolorsopacity: 0.2,
order: {
cie: 1,
preview: 2
}
});
The following demo uses the RGB and opacity sliders.
<span class="rgb-demo"></span>
$(".rgb-demo").ColorPickerSliders({
flat: true,
order: {
rgb: 1,
opacity: 2
}
});
The following demo uses the HSL sliders with preview.
<span class="hsl-demo"></span>
$(".hsl-demo").ColorPickerSliders({
flat: true,
order: {
hsl: 1,
preview: 2
}
});
The following example is linked to different elements and rendered in popups.
<input id="color" type="text" class="demo-popup" value="#56B29A" data-color-format="hex">
<button type="button" class="demo-popup">button</button>
<span class="demo-popup">span</span>
<a class="demo-popup">link</a>
$('.demo-popup').ColorPickerSliders({
previewontriggerelement: true,
flat: false,
color: '#cf966f',
order: {
rgb: 1,
preview: 2
}
});
The following demo uses all the sliders, and connects to a bunch of inputs to show the actual color values in different formats. The color format can be set on the inputs data-color-format property.
The color can be updated via the connected inputs. The plugin uses the excellent Tiny Color plugin, so it can handle all valid CSS color formats.
<input type="text" class="full-demo-input" data-color-format="hsl">
<input type="text" class="full-demo-input" data-color-format="hex">
<input type="text" class="full-demo full-demo-input" data-color-format="rgb">
$(".full-demo").ColorPickerSliders({
flat: true,
invalidcolorsopacity: 0,
connectedinput: '.full-demo-input'
});
colorconnectedinputselector or jQuery object: The connected input elements value will be automatically updated in sync with the color picker. The color format which the color is represented i the input can be set via the data-color-format property. It can be any of hex, hsl or rgb. If it is hex, then the opacity will be discarded.flatfalse: The color picker is rendered in a popup, which is shown on focus of the connected element.true: The color picker is rendered right after the connected element, and is always visible.previewontriggerelementtrue: Preview of the color on the connected element's background.false: No preview on the connected element.previewcontrasttreshold30: If previewontriggerelement is enabled, then if the lightness is below of this value, the element's text color will be white. Otherwise the text is black.erroneousciecolormarkerstrue: Unconvertable CIE colors are marked with an exclamation mark on the CIE sliders level marker.false: No exclamation mark on the markers.
invalidcolorsopacity1: Opacity of the invalid (unconvertable) area of the CIE sliders.finercierangeedgestrue: Sharper, more accurate edges of the valid CIE ranges on the sliders.false: Smoother edges of the valid CIE ranges on the sliders.onchangefunction(container, color): This function is triggered when the color is changed with the sliders or via a connected input. The color parameter holds the actual color object in the following formats: rgb object, hsl object, cie lch object, Tiny Color object.