Color Picker
Installation
You can simply import the module and create a new object with it.
import ColorPicker from '@cevad-tokatli/color-picker';const picker = new ColorPicker({ elm: '#demo-picker'});Properties
Color
- Value Type : String
- Default Value : #FF0000
The picker's initial value. You can specify the picker's initial value by setting a value to this property.
<div id="color-red"></div><div id="color-blue"></div><script> new ColorPicker({ elm: '#color-red', color: 'red' }); new ColorPicker({ elm: '#color-blue', color: 'blue' });</script>Color Format
- Value Type : String
- Default Value : hex
The format of the picker's value. ColorPicker supports three types of formats: HEX, RGB and HSL. If the opacity is less than 1, HSL is automatically converted to HSLA, HEX and RGB are automatically converted to RGBA.
<div id="color-format-hex"></div><div id="color-format-hsl"></div><script> new ColorPicker({ elm: '#color-format-hex', color: '#0f9aef', colorFormat: 'hex' }); new ColorPicker({ elm: '#color-format-hsl', color: '#0f9aef', colorFormat: 'hsl' });</script>Picker Style
- Value Type : Number
- Default Value : 0
ColorPicker comes with two style options. In the first style, the main box allows setting the saturation and lightness of the color and the second box allows setting the color; this is the default. In the second style, the main box allows setting the color and the second box allows setting the saturation and lightness.
<div id="picker-style-0"></div><div id="picker-style-1"></div><script> new ColorPicker({ elm: '#picker-style-0', color: '#007bff', colorFormat: 'hex', pickerStyle: 0 }); new ColorPicker({ elm: '#picker-style-1', color: '#007bff', colorFormat: 'rgb', pickerStyle: 1 });</script>Embed
- Value Type : Boolean
- Default Value : true
A boolean value that indicates whether the picker is shown when a button is clicked or embedded into the page directly. If it is false, a button is displayed that allows users to show the picker.
<div id="embed-true"></div><div id="embed-false"></div><script> new ColorPicker({ elm: '#embed-true', color: '#ebb512', colorFormat: 'hex', pickerStyle: 0, embed: true }); new ColorPicker({ elm: '#embed-false', color: '#ebb512', colorFormat: 'rgb', pickerStyle: 1, embed: false });</script>Size
- Value Type : String
- Default Value : medium
The picker's size. Three options available : Small, Medium, Large.
<div id="size-small"></div><div id="size-medium"></div><script> new ColorPicker({ elm: '#size-small', color: '#1c2b36', pickerStyle: 0, size: 'small' }); new ColorPicker({ elm: '#size-medium', color: '#1c2b36', pickerStyle: 1, size: 'medium' });</script>Allow Opacity
- Value Type : Boolean
- Default Value : true
A boolean value that indicates whether the opacity bar is visible or not.
<div id="opacity-true"></div><div id="opacity-false"></div><script> new ColorPicker({ elm: '#opacity-true', color: '#36a53b', pickerStyle: 0, allowOpacity: true }); new ColorPicker({ elm: '#opacity-false', color: '#36a53b', pickerStyle: 1, allowOpacity: false });</script>Allow Clear Color
- Value Type : Boolean
- Default Value : false
A boolean value that indicates whether the clear color button (an eraser icon that allows clear selection) is visible or not.
<div id="clear-true"></div><div id="clear-false"></div><script> new ColorPicker({ elm: '#clear-true', color: '#8c8f92', pickerStyle: 0, allowClearColor: true }); new ColorPicker({ elm: '#clear-false', color: '#8c8f92', pickerStyle: 1, allowClearColor: false });</script>Show Color Value
- Value Type : Boolean
- Default Value : true
A boolean value that indicates whether the color value box is visible or not. Color value box allows you to set a color by typing its name or code. All of the CSS color formats are supported (HEX, RGB, RGBA, HSL, HSLA).
<div id="color-value-true"></div><div id="color-value-false"></div><script> new ColorPicker({ elm: '#color-value-true', color: '#f23e30', pickerStyle: 0, showColorValue: true }); new ColorPicker({ elm: '#color-value-false', color: '#f23e30', pickerStyle: 1, showColorValue: false });</script>Show Buttons
- Value Type : Boolean
- Default Value : true
A boolean value that indicates whether the buttons are visible or not. If the "embed" property is false, the only way to close the picker is to click on the Save or Cancel button.
<div id="buttons-true"></div><div id="buttons-false"></div><script> new ColorPicker({ elm: '#buttons-true', color: '#23c3d7', pickerStyle: 0, showButtons: true }); new ColorPicker({ elm: '#buttons-false', color: '#23c3d7', pickerStyle: 1, showButtons: false });</script>Show Palette
- Value Type : Boolean
- Default Value : true
A boolean value that indicates whether the color table is visible or not. Color table allows you to show pre-defined colors. It is also possible for users to save colors for later use by adding this table.
<div id="palette-true"></div><div id="palette-false"></div><script> new ColorPicker({ elm: '#palette-true', color: '#25282a', pickerStyle: 0, showPalette: true }); new ColorPicker({ elm: '#palette-false', color: '#25282a', pickerStyle: 1, showPalette: false });</script>Palette Colors
- Value Type : String[]
- Default Value : #FFFFB5, #FBBD87, #F45151, #7AEA89, #91C8E7, #8EB4E6, #B0A7F1
An array that holds the name or codes of the colors that will be shown in the Color Table as default.
<div id="default-palette-colors"></div><div id="rainbow-palette-colors"></div><script> new ColorPicker({ elm: '#default-palette-colors', color: '#eee', pickerStyle: 0, paletteColors: ['#FFFFB5', '#FBBD87', '#F45151', '#7AEA89', '#91C8E7', '#8EB4E6', '#B0A7F1'] }); new ColorPicker({ elm: '#rainbow-palette-colors', color: '#eee', pickerStyle: 1, paletteColors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'] });</script>Allow Palette Add Color
- Value Type : Boolean
- Default Value : true
A boolean value that indicates whether users can add a color to the color table or not.
<div id="palette-add-color-true"></div><div id="palette-add-color-false"></div><script> new ColorPicker({ elm: '#palette-add-color-true', color: '#8c8f92', pickerStyle: 0, allowPaletteAddColor: true }); new ColorPicker({ elm: '#palette-add-color-false', color: '#8c8f92', pickerStyle: 1, allowPaletteAddColor: false });</script>Events
- Open : Fires when the picker is open.
- Close : Fires when the picker is closed.
- Save : Fires when the selection is saved.
- Cancel : Fires when the picker is closed without being saved.
- Changed : Fires when the color is changed.
<div id="events"></div><script>var picker = new ColorPicker({ elm: '#events', color: '#EE82EE', embed: false});picker.el.addEventListener('open', function() { alert('OPEN EVENT FIRES');});picker.el.addEventListener('close', function() { alert('CLOSE EVENT FIRES');});picker.el.addEventListener('save', function() { alert('SAVE EVENT FIRES');});picker.el.addEventListener('cancel', function() { alert('CANCEL EVENT FIRES');});picker.el.addEventListener('changed', function() { console.log('CHANGED EVENT FIRES');});</script>Methods
- Get : Returns the current color.
- Set : Changes the current color.
- Show : Shows the picker.
- Hide : Hides the picker.
- Save : Saves the selection.
- Cancel : Cancels the selection.
<div id="methods"></div><script> var methodPicker = new ColorPicker({ elm: '#methods', color: '#8EB4E6', embed: true }); function get() { alert(methodPicker.get().value); } function set() { var newColor = prompt('Enter the new color'); methodPicker.set(newColor); } function show() { methodPicker.show(); } function hide() { methodPicker.hide(); } function save() { methodPicker.save(); } function cancel() { methodPicker.cancel(); }</script>