Author: | EastDesire |
---|---|
Views Total: | 738 views |
Official Page: | Go to website |
Last Update: | January 31, 2023 |
License: | MIT |
Preview:

Description:
jscolor is a cross-browser, framework-agnostic, mobile-friendly, and highly-customizable color picker built using plain JavaScript.
More Features:
- Supports HEXa and RGBa.
- Customizable color palette.
- Lots of configurations.
- Licensed under the GNU GPL v3.
How to use it:
1. Download and import the jscolor.js.
<script src="jscolor.js"></script>
2. Attach the color picker to an input field or a button
<!-- Hex --> <input value="3399FF" data-jscolor="{}"> <!-- With Alpha --> <input value="3399FF80" data-jscolor="{}"> <!-- RGBa --> <button data-jscolor="{value:'rgba(51,153,255,0.5)'}"> Select color </button>
3. Available Color Picker options.
jscolor.presets.default: { width: 181, height: 101, mode: 'HSV', // 'HSV' | 'HVS' | 'HS' | 'HV' alphaChannel: 'auto', // 'auto' | true | false position: 'bottom', // 'left' | 'right' | 'top' | 'bottom' smartPosition: true, showOnClick: true, hideOnLeave: true, palette: [], // colors to be displayed in the palette paletteCols: 10, // number of columns in the palette paletteSetsAlpha: 'auto', // 'auto' | true | false paletteHeight: 16, paletteSpacing: 4, hideOnPaletteClick: false, sliderSize: 16, crossSize: 8, closeButton: false, closeText: 'Close', buttonColor: 'rgba(0,0,0,1)', buttonHeight: 18, padding: 12, backgroundColor: 'rgba(255,255,255,1)', borderWidth: 1, borderColor: 'rgba(187,187,187,1)', borderRadius: 8, controlBorderWidth: 1, controlBorderColor: 'rgba(187,187,187,1)', shadow: true, shadowBlur: 15, shadowColor: 'rgba(0,0,0,0.2)', pointerColor: 'rgba(76,76,76,1)', pointerBorderWidth: 1, pointerBorderColor: 'rgba(255,255,255,1)', pointerThickness: 2, zIndex: 5000, container: undefined, }
4. Available general options that can be passed via data-jscolor
attribute:
{ format: 'auto', // 'auto' | 'any' | 'hex' | 'hexa' | 'rgb' | 'rgba' value: undefined, // INITIAL color value alpha: undefined, // INITIAL alpha value random: false, // randomize the initial color. Either true | false, or an array of ranges: [minV, maxV, minS, maxS, minH, maxH, minA, maxA] onChange: undefined, // called when color changes onInput: undefined, // called repeatedly as the color is being changed valueElement: undefined, // element to display and input the color value alphaElement: undefined, // element to display and input the alpha (opacity) value previewElement: undefined, // element that will preview the picked color using CSS background previewPosition: 'left', // 'left' | 'right' previewSize: 32, previewPadding: 8, required: true, hash: true, // prefix the HEX color code with # symbol uppercase: true, forceStyle: true, // overwrite CSS style of the previewElement using !important flag }