🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library.

Overview

Logo

Flat, Simple, Hackable Color-Picker.


gzip size brotli size Build Status Download count No dependencies JSDelivr download count Current version Support me Gitpod Ready-to-Code


Fully Featured demo



Get 700+ Material components for the latest Bootstrap 5 for free.

This component is also available as ready-to-use solution in MDB UI Kit. Learn more about Bootstrap Color Picker here.


Features

  • Themes
  • Simple usage
  • Zero dependencies
  • Multiple color representations
  • Color comparison
  • Opacity control
  • Detail adjustments via. mouse-wheel
  • Responsive and auto-positioning
  • Supports touch devices
  • Swatches for quick-selection
  • Fully accessible and i18n
  • Shadow-dom support

Status of this project

This project might continue to get important security- and bug-related updates but its feature set is frozen, and it's highly unlikely that it'll get new features or enhancements.

The reason behind this decision is the way this tool has been build (monolithic, the core is one single file, everything is in plain JS etc.) which makes it incredible hard to maintain, tests become impossible at this stage without a complete rewrite, and the fun is gone at such a level of cramped complexity.

Personally I recommend building these UI-Related "widgets" directly into the app with the framework you're using which takes more time but in return gives you full power of how it should work and look like. Frameworks such as (p)react, vue and svelte will make it a breeze to develop such things within a day.

Update

This project will be archived at the end of 2021! After this there will be no more bug / security fixes or feature requests.

Themes

Classic Monolith Nano
Classic theme Monolith Nano

Nano uses css-grid thus it won't work in older browsers.

Getting Started

Node

Note: The readme is always up-to-date with the latest commit. See Releases for installation instructions regarding to the latest version.

Install via npm:

$ npm install @simonwep/pickr

Install via yarn:

$ yarn add @simonwep/pickr

Include code and style:

// One of the following themes
import '@simonwep/pickr/dist/themes/classic.min.css';   // 'classic' theme
import '@simonwep/pickr/dist/themes/monolith.min.css';  // 'monolith' theme
import '@simonwep/pickr/dist/themes/nano.min.css';      // 'nano' theme

// Modern or es5 bundle (pay attention to the note below!)
import Pickr from '@simonwep/pickr';
import Pickr from '@simonwep/pickr/dist/pickr.es5.min';

Attention: The es5-bundle (e.g. legacy version) is quite big (around a triple of the modern bundle). Please take into consideration to use the modern version and add polyfills later to your final bundle! (Or better: give a hint to users that they should use the latest browsers). Browsers such as IE are not supported (at least not officially).

Browser

jsdelivr:

">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css"/> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css"/> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css"/> 


<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js">script>

Be sure to load the pickr.min.js (or the es5 version) after pickr.min.css. Moreover the script tag doesn't work with the defer attribute.

Usage

// Simple example, see optional options for more configuration.
const pickr = Pickr.create({
    el: '.color-picker',
    theme: 'classic', // or 'monolith', or 'nano'

    swatches: [
        'rgba(244, 67, 54, 1)',
        'rgba(233, 30, 99, 0.95)',
        'rgba(156, 39, 176, 0.9)',
        'rgba(103, 58, 183, 0.85)',
        'rgba(63, 81, 181, 0.8)',
        'rgba(33, 150, 243, 0.75)',
        'rgba(3, 169, 244, 0.7)',
        'rgba(0, 188, 212, 0.7)',
        'rgba(0, 150, 136, 0.75)',
        'rgba(76, 175, 80, 0.8)',
        'rgba(139, 195, 74, 0.85)',
        'rgba(205, 220, 57, 0.9)',
        'rgba(255, 235, 59, 0.95)',
        'rgba(255, 193, 7, 1)'
    ],

    components: {

        // Main components
        preview: true,
        opacity: true,
        hue: true,

        // Input / output Options
        interaction: {
            hex: true,
            rgba: true,
            hsla: true,
            hsva: true,
            cmyk: true,
            input: true,
            clear: true,
            save: true
        }
    }
});

You can find more examples here.

Events

Since version 0.4.x Pickr is event-driven. Use the on(event, cb) and off(event, cb) functions to bind / unbind eventlistener.

Event Description Arguments
init Initialization done - pickr can be used PickrInstance
hide Pickr got closed PickrInstance
show Pickr got opened HSVaColorObject, PickrInstance
save User clicked the save / clear button. Also fired on clear with null as color. HSVaColorObject or null, PickrInstance
clear User cleared the color. PickrInstance
change Color has changed (but not saved). Also fired on swatchselect HSVaColorObject, eventSource, PickrInstance
changestop User stopped to change the color eventSource, PickrInstance
cancel User clicked the cancel button (return to previous color). PickrInstance
swatchselect User clicked one of the swatches HSVaColorObject, PickrInstance

Example:

{ console.log('Event: "hide"', instance); }).on('show', (color, instance) => { console.log('Event: "show"', color, instance); }).on('save', (color, instance) => { console.log('Event: "save"', color, instance); }).on('clear', instance => { console.log('Event: "clear"', instance); }).on('change', (color, source, instance) => { console.log('Event: "change"', color, source, instance); }).on('changestop', (source, instance) => { console.log('Event: "changestop"', source, instance); }).on('cancel', instance => { console.log('Event: "cancel"', instance); }).on('swatchselect', (color, instance) => { console.log('Event: "swatchselect"', color, instance); });">
pickr.on('init', instance => {
    console.log('Event: "init"', instance);
}).on('hide', instance => {
    console.log('Event: "hide"', instance);
}).on('show', (color, instance) => {
    console.log('Event: "show"', color, instance);
}).on('save', (color, instance) => {
    console.log('Event: "save"', color, instance);
}).on('clear', instance => {
    console.log('Event: "clear"', instance);
}).on('change', (color, source, instance) => {
    console.log('Event: "change"', color, source, instance);
}).on('changestop', (source, instance) => {
    console.log('Event: "changestop"', source, instance);
}).on('cancel', instance => {
    console.log('Event: "cancel"', instance);
}).on('swatchselect', (color, instance) => {
    console.log('Event: "swatchselect"', color, instance);
});

Where source can be

  • slider - Any slider in the UI.
  • input - The user input field.
  • swatch - One of the swatches.

Options

const pickr = new Pickr({

    // Selector or element which will be replaced with the actual color-picker.
    // Can be a HTMLElement.
    el: '.color-picker',

    // Where the pickr-app should be added as child.
    container: 'body',

    // Which theme you want to use. Can be 'classic', 'monolith' or 'nano'
    theme: 'classic',

    // Nested scrolling is currently not supported and as this would be really sophisticated to add this
    // it's easier to set this to true which will hide pickr if the user scrolls the area behind it.
    closeOnScroll: false,

    // Custom class which gets added to the pcr-app. Can be used to apply custom styles.
    appClass: 'custom-class',

    // Don't replace 'el' Element with the pickr-button, instead use 'el' as a button.
    // If true, appendToBody will also be automatically true.
    useAsButton: false,

    // Size of gap between pickr (widget) and the corresponding reference (button) in px
    padding: 8,

    // If true pickr won't be floating, and instead will append after the in el resolved element.
    // It's possible to hide it via .hide() anyway.
    inline: false,

    // If true, pickr will be repositioned automatically on page scroll or window resize.
    // Can be set to false to make custom positioning easier.
    autoReposition: true,

    // Defines the direction in which the knobs of hue and opacity can be moved.
    // 'v' => opacity- and hue-slider can both only moved vertically.
    // 'hv' => opacity-slider can be moved horizontally and hue-slider vertically.
    // Can be used to apply custom layouts
    sliders: 'v',

    // Start state. If true 'disabled' will be added to the button's classlist.
    disabled: false,

    // If true, the user won't be able to adjust any opacity.
    // Opacity will be locked at 1 and the opacity slider will be removed.
    // The HSVaColor object also doesn't contain an alpha, so the toString() methods just
    // print HSV, HSL, RGB, HEX, etc.
    lockOpacity: false,

    // Precision of output string (only effective if components.interaction.input is true)
    outputPrecision: 0,

    // Defines change/save behavior:
    // - to keep current color in place until Save is pressed, set to `true`,
    // - to apply color to button and preview (save) in sync with each change
    //   (from picker or palette), set to `false`.
    comparison: true,

    // Default color. If you're using a named color such as red, white ... set
    // a value for defaultRepresentation too as there is no button for named-colors.
    default: '#42445a',

    // Optional color swatches. When null, swatches are disabled.
    // Types are all those which can be produced by pickr e.g. hex(a), hsv(a), hsl(a), rgb(a), cmyk, and also CSS color names like 'magenta'.
    // Example: swatches: ['#F44336', '#E91E63', '#9C27B0', '#673AB7'],
    swatches: null,

    // Default color representation of the input/output textbox.
    // Valid options are `HEX`, `RGBA`, `HSVA`, `HSLA` and `CMYK`.
    defaultRepresentation: 'HEX',

    // Option to keep the color picker always visible.
    // You can still hide / show it via 'pickr.hide()' and 'pickr.show()'.
    // The save button keeps its functionality, so still fires the onSave event when clicked.
    showAlways: false,

    // Close pickr with a keypress.
    // Default is 'Escape'. Can be the event key or code.
    // (see: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)
    closeWithKey: 'Escape',

    // Defines the position of the color-picker.
    // Any combinations of top, left, bottom or right with one of these optional modifiers: start, middle, end
    // Examples: top-start / right-end
    // If clipping occurs, the color picker will automatically choose its position.
    // Pickr uses https://github.com/Simonwep/nanopop as positioning-engine.
    position: 'bottom-middle',

    // Enables the ability to change numbers in an input field with the scroll-wheel.
    // To use it set the cursor on a position where a number is and scroll, use ctrl to make steps of five
    adjustableNumbers: true,

    // Show or hide specific components.
    // By default only the palette (and the save button) is visible.
    components: {

        // Defines if the palette itself should be visible.
        // Will be overwritten with true if preview, opacity or hue are true
        palette: true,

        preview: true, // Display comparison between previous state and new color
        opacity: true, // Display opacity slider
        hue: true,     // Display hue slider

        // show or hide components on the bottom interaction bar.
        interaction: {

            // Buttons, if you disable one but use the format in default: or setColor() - set the representation-type too!
            hex: false,  // Display 'input/output format as hex' button  (hexadecimal representation of the rgba value)
            rgba: false, // Display 'input/output format as rgba' button (red green blue and alpha)
            hsla: false, // Display 'input/output format as hsla' button (hue saturation lightness and alpha)
            hsva: false, // Display 'input/output format as hsva' button (hue saturation value and alpha)
            cmyk: false, // Display 'input/output format as cmyk' button (cyan mangenta yellow key )

            input: false, // Display input/output textbox which shows the selected color value.
                         // the format of the input is determined by defaultRepresentation,
                         // and can be changed by the user with the buttons set by hex, rgba, hsla, etc (above).
            cancel: false, // Display Cancel Button, resets the color to the previous state
            clear: false, // Display Clear Button; same as cancel, but keeps the window open
            save: false,  // Display Save Button,
        },
    },

    // Translations, these are the default values.
    i18n: {

        // Strings visible in the UI
       'ui:dialog': 'color picker dialog',
       'btn:toggle': 'toggle color picker dialog',
       'btn:swatch': 'color swatch',
       'btn:last-color': 'use previous color',
       'btn:save': 'Save',
       'btn:cancel': 'Cancel',
       'btn:clear': 'Clear',

       // Strings used for aria-labels
       'aria:btn:save': 'save and close',
       'aria:btn:cancel': 'cancel and close',
       'aria:btn:clear': 'clear and close',
       'aria:input': 'color input field',
       'aria:palette': 'color selection area',
       'aria:hue': 'hue selection slider',
       'aria:opacity': 'selection slider'
    }
});

Selection through a Shadow-DOM

Example setup:

#shadow-root
#shadow-root
">
<div class="entry">
  #shadow-root
    <div class="innr">
       <div class="another">
         #shadow-root
           <div class="pickr">div>
       div>
    div>
div>

To select the .pickr element you can use the custom >> shadow-dom-selector in el:

el: '.entry >> .innr .another >> .pickr'

Every ShadowRoot of the query-result behind a >> gets used in the next query selection. An alternative would be to provide the target-element itself as el.

The HSVaColor object

As default color representation is hsva (hue, saturation, value and alpha) used, but you can also convert it to other formats as listed below.

  • hsva.toHSVA() - Converts the object to a hsva array.
  • hsva.toHSLA() - Converts the object to a hsla array.
  • hsva.toRGBA() - Converts the object to a rgba array.
  • hsva.toHEXA() - Converts the object to a hexa-decimal array.
  • hsva.toCMYK() - Converts the object to a cmyk array.
  • hsva.clone() - Clones the color object.

The toString() is overridden, so you can get a color representation string.

hsva.toRGBA(); // Returns [r, g, b, a]
hsva.toRGBA().toString(); // Returns rgba(r, g, b, a) with highest precision
hsva.toRGBA().toString(3); // Returns rgba(r, g, b, a), rounded to the third decimal

Methods

  • pickr.setHSVA(h:Number,s:Number,v:Number,a:Float, silent:Boolean) - Set an color, returns true if the color has been accepted.
  • pickr.setColor(str: :String | null, silent:Boolean):Boolean - Parses a string which represents a color (e.g. #fff, rgb(10, 156, 23)) or name e.g. 'magenta', returns true if the color has been accepted. null will clear the color.

If silent is true (Default is false), the button won't change the current color.

  • pickr.on(event:String, cb:Function):Pickr - Appends an event listener to the given corresponding event-name (see section Events).
  • pickr.off(event:String, cb:Function):Pickr - Removes an event listener from the given corresponding event-name (see section Events).
  • pickr.show():Pickr - Shows the color-picker.
  • pickr.hide():Pickr - Hides the color-picker.
  • pickr.disable():Pickr - Disables pickr and adds the disabled class to the button.
  • pickr.enable():Pickr - Enables pickr and removes the disabled class from the button.
  • pickr.isOpen():Pickr - Returns true if the color picker is currently open.
  • pickr.getRoot():Object - Returns the dom-tree of pickr as tree-structure.
  • pickr.getColor():HSVaColor - Returns the current HSVaColor object.
  • pickr.getSelectedColor():HSVaColor - Returns the currently applied color.
  • pickr.destroy() - Destroys all functionality.
  • pickr.destroyAndRemove() - Destroys all functionality and removes the pickr element including the button.
  • pickr.setColorRepresentation(type:String):Boolean - Change the current color-representation. Valid options are HEX, RGBA, HSVA, HSLA and CMYK, returns false if type was invalid.
  • pickr.getColorRepresentation():String - Returns the currently used color-representation (eg. HEXA, RGBA...)
  • pickr.applyColor(silent:Boolean):Pickr - Same as pressing the save button. If silent is true the onSave event won't be called.
  • pickr.addSwatch(color:String):Boolean - Adds a color to the swatch palette. Returns true if the color has been successful added to the palette.
  • pickr.removeSwatch(index:Number):Boolean- Removes a color from the swatch palette by its index, returns true if successful.

Static methods

Pickr

  • create(options:Object):Pickr - Creates a new instance.

Pickr.utils

  • once(element:HTMLElement, event:String, fn:Function[, options :Object]) - Attach an event handle which will be fired only once
  • on(elements:HTMLElement(s), events:String(s), fn:Function[, options :Object]) - Attach an event handler function.
  • off(elements:HTMLElement(s), event:String(s), fn:Function[, options :Object]) - Remove an event handler.
  • createElementFromString(html:String):HTMLElement - Creates an new HTML Element out of this string.
  • eventPath(evt:Event):[HTMLElement] - A polyfill for the event-path event propery.
  • createFromTemplate(str:String) - See inline doumentation.
  • resolveElement(val:String|HTMLElement) - Resolves a HTMLElement, supports >>> as shadow dom selector.
  • adjustableInputNumbers(el:InputElement, mapper:Function) - Creates the possibility to change the numbers in an inputfield via mouse scrolling. The mapper function takes three arguments: the matched number, an multiplier and the index of the match.

Use this utils carefully, it's not for sure that they will stay forever!

Static properties

  • version - The current version.
  • I18N_DEFAULTS - i18n default values.
  • DEFAULT_OPTIONS - Default options (Do not override this property itself, only change properties of it!).

FAQ

How do I initialize multiple pickr's? Can I access the instance via class or id?

No, you can't. You need to keep track of your instance variables - pickr is (not yet) a web-component. The best option would be to create new elements via document.createElement and directly pass it as el. example.

I want to use pickr in a form, how can I do that?

You can use useAsButton: true and pass a reference (or selector) of your input-element as el. Then you can update the input-element whenever a change was made. example.

I want to update options after mounting pickr, is that possible?

Unfortunately not. The core-code of this project is rather old (over 2 years), and I made it in my early js-days - the widget is not able to dynamically re-render itself in that way. You have to destroy and re-initialize it.

Contributing

If you want to open a issue, create a Pull Request or simply want to know how you can run it on your local machine, please read the Contributing guide.

Comments
  • Pickr Browser Compatibility

    Pickr Browser Compatibility

    I'm having problems getting it running in IE 11. What is the browser compatibility for this widget? So far I've had to Polyfill Object.assign. Next problem I'm having isSymbol is undefined. Is there a way to polyfill this?

    Pickr-version: 0.2.4
    Browser-version: Internet Explorer 11
    Operating-system: Windows 8.1
    
    good first issue question browser quirk setup 
    opened by pbougie 26
  • Saving Selected Color in input

    Saving Selected Color in input

    Hi Again,!!

    i used this library in my framework and found that it dose not support input[type=text] element. so i created a div and was able to get it working.

    and then i found i can't even link input field to this library so it can update the selected color.

    so for that i created a small workaround as below

    let $save_color = ( $color, $instance ) => {
    	let $value = $color.toHEXA().toString();
    		if( !window.wponion._.isUndefined( $instance._representation ) ) {
    			switch( $instance._representation ) {
    				case 'HEXA':
    					$value = $color.toHEXA().toString();
    					break;
    				case 'RGBA':
    					$value = $color.toRGBA().toString();
    					break;
    				case 'HSLA':
    					$value = $color.toHSLA().toString();
    					break;
    				case 'HSVA':
    					$value = $color.toHSVA().toString();
    					break;
    				case 'CMYK':
    					$value = $color.toCMYK().toString();
    					break;
    			}
    		}
    	this.element.find( 'input.wponion-color-picker-element' ).val( $value );
    };
    
    $instance.on( 'save', $save_color );
    $instance.on( 'change', $save_color );
    $instance.on( 'swatchselect', $save_color );
    

    So i would like to know if there is a chance that you could support input field or even provide a custom argument where i can link my input field to get the values updated.

    improvement feature request 
    opened by varunsridharan 19
  • Gradient Support

    Gradient Support

    Do you want to request a feature or report a bug?

    Feature Request

    Do you have any idea for adding gradient support ? if so when it could be ?

    Example

    image

    http://tutsville.com/docs/coloringpick-jquery-gradient-color-picker/

    wontfix feature request 
    opened by varunsridharan 18
  • Add cancel button

    Add cancel button

    Do you want to request a feature or report a bug?

    Feature

    What is the current behavior?

    At the moment it is only possible the reset the color to the current selected color in the themes Classic and Monolith, but not in the theme Nano.

    If the current behavior is a bug, please provide the steps to reproduce and create a JSFiddle.

    What is the expected behavior?

    It would be great to be able to add a cancel button, similar to the cancel button in Spectrum color picker https://bgrins.github.io/spectrum/ When clicking this button it reset to the original selected color and close the dialog/overlay. It should of course be possible to customize/localize the button text as it is for the other buttons.

    Your environment:

    Pickr-version (see Pickr.version): 1.0.0-beta
    Used Pickr-bundle (es5 or normal one): Normal
    Browser-version: Version 75.0.3770.90
    Operating-system: Windows 10
    
    feature request 
    opened by bjarnef 15
  • Empty or clear color and issues with setColor

    Empty or clear color and issues with setColor

    Hi, I am running into situation in app where i am using pickr to apply colors to different curves.

    problem is pickr should have

    1. pickr.clear() function so that color`s value is empty string
    2. clear() button click should apply value empty string , currently it is applying #0000 which is again a black color and there is no way of telling if it was cleared
    3. there is no way of telling from }).on('hide', instance => { that hide was triggered from buttonclick, programatic call , clear button click etc
    bug feature request 
    opened by mafar 13
  • Highlight color swatch if it match current selected color

    Highlight color swatch if it match current selected color

    Do you want to request a feature or report a bug?

    Feature

    What is the current behavior?

    Selecting a color from the color swatches updates the input field color code and preview and highlight the selected color swatch, but the color swatch is not selected when re-open the color picker

    If the current behavior is a bug, please provide the steps to reproduce and create a JSFiddle.

    Can be reproduced here https://jsfiddle.net/Simonwep/qx2Lod6r/ and here https://simonwep.github.io/pickr/ Select a color from the color swatches. The color swatch is marked as selected with a border. When clicking save and re-open the color picker afterwards the selection is gone.

    What is the expected behavior?

    The color swatch should stay selected after re-open the color picker. It would also be great if the color swatch was highlighted when manually enter a color code in the input field which match a color code of one of the color swatches, e.g. #3F51B5CC. It seems the selection at the moment only is a focus state. If the selected color swatch has a class, it could e.g. have an "checkmark" inside the box to mark is as selected? (without using a library like font awesome it could use css, e.g. styled via :before pseudo element background image using svg: and https://iconmonstr.com/check-mark-1-svg/ so changing focus via tab still makes it clear which has focus and which is selected.

    Your environment:

    Version (see Pickr.version): 1.2.7
    Used bundle (es5 or normal one): Normal
    Used theme (default is classic): Classic
    Browser-version: Version 76.0.3809.100
    Operating-system: Windows 10
    
    feature request 
    opened by bjarnef 13
  • Feature request: shadow DOM support

    Feature request: shadow DOM support

    Do you want to request a feature or report a bug?

    I'm not sure if it's a feature request or if it's actually meant to work with the shadow DOM, but Pickr currently has trouble working inside the shadow DOM.

    What is the current behavior?

    Named/default imports don't work. I kept getting the following error: image

    To fix it, I had to import the files as follows:

    import '@simonwep/pickr/dist/pickr.min.js'; 
    //Workaround for styles not being applied completely
    import { PickrDefaultStyles } from './pickr-default-styles';
    

    Getting the styles to work wasn't too much of a hassle. I use lit-element as my component library, which provides a handy CSS utility. I simply create a new file and wrap the CSS inside the following:

    import { css } from 'lit-element';
    export const PickrDefaultStyles = css`
         //css goes here
    `;
    

    Although the files load correctly, Pickr.create doesn't work with selectors. You have to use actual DOM elements. No big deal, but this leads to the final error. Pickr crashes when calling replaceChild. Apparently parentElement doesn't exist or isn't accessible. Here's the error: image

    Finally, I replaced all instances of parentElement with parentNode and it works as expected. Kind of. Unfortunately, it doesn't respond to clicks or taps. Loading the css through the CDN in my index file makes it work. If I remove the mentioned CSS import, the pickr-button isn't styled correctly, so I have to load both instances of the stylesheet, once in my index file and the second inside the component.

    In conclusion, to make it work I had to:

    1. Import pickr without named/default imports
    2. Import CSS through both CDN in my index file and inside component.
    3. Use an actual DOM element in Pickr.create, not a selector.
    4. Replace parentElement with parentNode inside the pickr js file.

    Here's the JSFiddle containing the closest representation of my environment. I'm simulating the CSS import by creating a constant inside the component and treating that as if it had been imported. I also left the original Pickr element to demonstrate that the files have indeed been loaded.

    Pickr-version (see Pickr.version): 0.4.11
    Used Pickr-bundle (es5 or normal one): normal one
    Browser-version:  Chrome 73.0.3683.103
    Operating-system:  Windows 10
    
    enhancement feature request 
    opened by kr05 13
  • Feature Request: Configurable width for .pcr-app

    Feature Request: Configurable width for .pcr-app

    Do you want to request a feature or report a bug?

    Feature

    What is the current behavior?

    The width of the pickr is fixed at 28.5rem. When displaying only swatches it is rather wide. I would like the option to be able to customise the width.

    Currently like this:

    Screenshot 2019-05-12 at 12 11 44

    What is the expected behavior?

    I would like to be able to set a narrower width like this:

    Screenshot 2019-05-12 at 12 12 50

    improvement feature request 
    opened by elgordino 12
  • Saving behaviour

    Saving behaviour

    Love the picker and its simplicity!

    Would like the ability to save on change though.

    Currently the picker crashes if setColor is called within the onChange event. And there is no way to trigger an event when the picker is closed/hidden, which makes it tricky to achieve the behaviour with the current setup.

    feature request 
    opened by okydk 11
  • Append to body

    Append to body

    Thanks for this library, looks fantastic!

    The problem is that we can't use it with elements that are with overflow hidden, there are any plans to add an option for append to the body?

    Thanks in advance.

    enhancement improvement 
    opened by ArielGueta 11
  • Accepting null as default color

    Accepting null as default color

    What is the current behavior?

    When initiating the Color Picker without a default color and without color conversion interactions (e.g hex, rgba etc...), the following unwanted behavior occurs:

    1. The result input (pcr-result) stays empty even after I assign a color in the color palette
    2. The Color Palette is empty (without any color) before selecting a color, as you can see below: image
    3. The opacity and hue slider handles are unselected (without a fill)

    Please provide the steps to reproduce and create a JSFiddle.

    https://jsfiddle.net/4tvadnqp/ Bug reproduces in this link ^

    What is the expected behavior?

    1. The result input should change after I specify a color in the palette or in the swatches
    2. The color palette should present a range of colors to pick from

    Thanks!

    question 
    opened by shilo-ey 10
  • how to drag

    how to drag

    What is the current behavior?

    Please provide the steps to reproduce and create a JSFiddle.

    What is the expected behavior?

    Your environment:

    Version (see Pickr.version):
    Used bundle (es5 or normal one):
    Used theme (default is classic): 
    Browser-version:  
    Operating-system:  
    
    unconfirmed 
    opened by FN20200222 0
  • input not working in bootstrap 5 modal

    input not working in bootstrap 5 modal

    I am using the plugin with the bootstrap 5 modal and when I click inside the input is not working, instead, the modal's X button is selected. Here is an example of the issue https://codepen.io/s3739/pen/popxvJd

    unconfirmed 
    opened by Shinsekai7 0
  • fix: webpack 5 deprecation warnings

    fix: webpack 5 deprecation warnings

    Hello Simon,

    during Webpack process via npm run build are displayed deprecation warnings:

    [DEP_WEBPACK_CHUNK_HAS_ENTRY_MODULE] DeprecationWarning: Chunk.hasEntryModule: Use new ChunkGraph API
    [DEP_WEBPACK_CHUNK_ENTRY_MODULE] DeprecationWarning: Chunk.entryModule: Use new ChunkGraph API
    [DEP_WEBPACK_MODULE_INDEX] DeprecationWarning: Module.index: Use new ModuleGraph API
    

    This happens because is used outdated the webpack-fix-style-only-entries.

    Warning

    This plugin is not compatible with webpack 5. There is a fork here that is compatible: webpack-remove-empty-scripts

    This PR replace the webpack-fix-style-only-entries with webpack-remove-empty-scripts package.

    opened by webdiscus 0
  • How to add a Custom Template below the color Pickr

    How to add a Custom Template below the color Pickr

    Is their any way to add a custom template, Like on the pic given below. The library is very good and customizable but the only things is to add a custom template.

    The-Retail-Curator

    Version (see Pickr.version): 1.8.2 Used bundle (es5 or normal one): Normal Used theme (default is classic): Classic Browser-version: Chrome 103.0.5060.66 Operating-system: Windows 10

    question 
    opened by Kumaravel-A 0
  • github dependabot security

    github dependabot security

    What is the current behavior?

    We encounter a couple of security issues with pickr-1.8.2 as reported by gitub dependabot alerts. Any solution for this?

    Samples

    Inefficient Regular Expression Complexity in chalk/ansi-regex [High]
    #31 opened 21 days ago • Detected in ansi-regex (npm)
    
    Improper Verification of Cryptographic Signature in `node-forge` Moderate
    #30 opened 21 days ago • Detected in node-forge (npm)
    
    Improper Verification of Cryptographic Signature in node-forge [High]
    #29 opened 21 days ago • Detected in node-forge (npm)
    
    Improper Verification of Cryptographic Signature in node-forge [High]
    #28 opened 21 days ago • Detected in node-forge (npm)
    
    Uncontrolled Resource Consumption in ansi-html [High]
    #27 opened 21 days ago • Detected in ansi-html (npm)
    
    Open Redirect in node-forge [Moderate]
    #26 opened 21 days ago • Detected in node-forge (npm)
    
    Prototype Pollution in node-forge debug API. [Low]
    #25 opened 21 days ago • Detected in node-forge (npm)
    
    URL parsing in node-forge could lead to undesired behavior. [Low]
    #24 opened 21 days ago • Detected in node-forge (npm)
    
    json-schema is vulnerable to Prototype Pollution [Moderate]
    #23 opened 21 days ago • Detected in json-schema (npm)
    

    Please provide the steps to reproduce and create a JSFiddle.

    github > Project page > Security > dependabot

    What is the expected behavior?

    As few messages as possible

    Your environment:

    Version (see Pickr.version): 1.8.2
    Used bundle (es5 or normal one): normal
    Used theme (default is classic): nano.min.css
    Browser-version:  Chrome 101.0.4951.67
    Operating-system:  Windows 10 and Linux
    
    unconfirmed 
    opened by waj-vx 0
Releases(1.8.2)
  • 1.8.2(Jun 27, 2021)

    Fixes

    • Fix broken comparison option due to switch to css variables (#286).
    • Fix broken clear button (#283).

    Improvements

    • Dependency upgrades.
    • Upgrade to webpack 5.
    • Switch to GitHub actions.
    • Cleanups.
    Source code(tar.gz)
    Source code(zip)
  • 1.8.1(May 13, 2021)

    Fixes

    • Add missing types for the i18n properties (#274).
    • Emit correct color when clicking on the previous color (#272).
    • Fix possible stackoverflow in hide and show functions.

    Improvements

    • Use CSS Variables for all sorts of color propagation.
    Source code(tar.gz)
    Source code(zip)
  • 1.8.0(Dec 5, 2020)

    Breaking changes

    • change and changeStop now have different arguments, see events for more information. #245 #193

    Fixes

    • Fix possible issue when pickr gets destroyed before initialization. #233
    Source code(tar.gz)
    Source code(zip)
  • 1.7.4(Sep 6, 2020)

  • 1.7.3(Sep 5, 2020)

  • 1.7.2(Jul 13, 2020)

    • Fix: Misconfigured nanopop configuration leading to wrong positioning (#231)
    • Fix: Initialization issue if pickr is not visible (#226, still in discussion - see #229)
    • Update: Dependencies
    Source code(tar.gz)
    Source code(zip)
  • 1.7.1(Jun 17, 2020)

  • 1.7.0(May 23, 2020)

    • Add: Pickr.DEFAULT_OPTIONS can be modified to change the default-options globally
    • Remove: Validation of arguments passed to on has been removed.
    • Update: Pickr is now using NanoPop internally 🎉
    • Update: The browser-target for the ES5 bundle has been updated, it's still a WIP (see #210) but this should fix compatibility issues with older browsers. (bbc87c53326d9e66abda17d888e0e0699bdeaea7, bd9325e7bc7253ea2ad61acce919a6925722111a)
    Source code(tar.gz)
    Source code(zip)
  • 1.6.0(May 6, 2020)

    • Update: new i18n option to fully customize all strings. [Breaking Change]
    • Update: See #206 and #207, thanks to @DEfusion.
    • Add: Add missing aria-label, see #202, thanks to @adityatoshniwal
    Source code(tar.gz)
    Source code(zip)
  • 1.5.1(Feb 5, 2020)

  • 1.5.0(Jan 8, 2020)

  • 1.4.8(Dec 17, 2019)

  • 1.4.7(Nov 8, 2019)

  • 1.4.6(Oct 25, 2019)

  • 1.4.5(Oct 16, 2019)

  • 1.4.4(Oct 15, 2019)

  • 1.4.3(Oct 8, 2019)

  • 1.4.2(Sep 6, 2019)

  • 1.4.1(Sep 2, 2019)

  • 1.4.0(Aug 23, 2019)

    Changelog:

    • Add: New getSelectedColor() function to get the currently selected color. Can be null if no color was selected.
    • Add: container option to specify the parent of pcr-app #138 .
    • Change: Export resolveElement function which supports >>> as shadow-dom selector.
    Source code(tar.gz)
    Source code(zip)
  • 1.3.0(Aug 13, 2019)

    Changelog:

    • Add: All themes now have vendor-prefixes.
    • Add: Auto-detect swatch and select it.
    • Fix: Broken .hide() and .show() functions if inline: true.
    Source code(tar.gz)
    Source code(zip)
  • 1.2.7(Aug 9, 2019)

  • 1.2.6(Jul 30, 2019)

  • 1.2.4(Jul 26, 2019)

  • 1.2.3(Jul 21, 2019)

    Changelog:

    • Add: New clear and cancel events.
    • Change: change gets fired on swatchselect.
    • Fix: Pickr does not stick somewhere if repositioning fails.
    • Fix: Update local representation (used by getColorRepresentation) on setColor.
    Source code(tar.gz)
    Source code(zip)
  • 1.2.2(Jul 19, 2019)

    Changelog:

    • Add: Export Moveable, Nanopop, Selectable and HSVaColor in Pickr.libs.
    • Add: swatchselect also fires change.
    • Fix: Space-consuming if invisible or not yet re-positioned.
    • Fix: Possible error on destroyAndRemove if useAsButton is true.
    Source code(tar.gz)
    Source code(zip)
  • 1.2.1(Jul 7, 2019)

    Changelog:

    • Add: New autoReposition option #115
    • Improve: Hide opacity bar if lockOpacity is true #117
    • Fix: Issue with floating-point RGBA in safari.
    Source code(tar.gz)
    Source code(zip)
  • 1.2.0(Jun 28, 2019)

    Changelog:

    • Add: New lockColor option to move pickr in a non-alpha mode. #107
    • Improve: Better color parsing, prevent entering alpha values on non-alpha types (e.g. rgb).
    • Fix: Better swatch alignment if not that many where added.
    Source code(tar.gz)
    Source code(zip)
  • 1.1.2(Jun 25, 2019)

    Changelog:

    • Change: Rename default.min.css to classic.min.css #111
    • Fix: Take x- and y-scrolling into account, fixing strange behavior #112
    Source code(tar.gz)
    Source code(zip)
  • 1.1.1(Jun 24, 2019)

    Changelog:

    • Add: New outputPrecision option to control the decimal places on the input field.
    • Add: All toString methods (except toHEX) accept a number as parameter to specify the floating-point precision.
    • Fix: Numbers with decimal places can now be adjusted with the mouse-wheel.
    Source code(tar.gz)
    Source code(zip)
Owner
Simon
Web enthusiast, deep-diving into web technologies 🏊‍♀️
Simon
Flat and simple color-picker library. No dependencies, no jquery.

Flat and simple color-picker Fully Featured demo Features Simple: The interface is straight forward and easy to use. Practical: Multiple color represe

Ivan Matveev 15 Nov 14, 2022
Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr Colr Pickr, a vanilla JavaScript color picking component built with SVGs, with features like saving colors. Similar design to the chrome-de

TEK 27 Jun 27, 2022
Superlight vanilla javascript plugin, for modern web dropdowns. Supporting multi-options, search and images. Designed to be seamlessly themed

Superlight vanilla javascript dropdowns by LCweb Need to jump off of jQuery (or any other) dependency? Other packages are too heavy to just tweak sele

Luca 10 Dec 26, 2022
A simple color picker application written in pure JavaScript, for modern browsers.

Color Picker A simple color picker application written in pure JavaScript, for modern browsers. Has support for touch events. Touchy… touchy… Demo and

Taufik Nurrohman 207 Dec 14, 2022
A Hackable Markdown Note Application for Programmers. Version control, AI completion, mind map, documents encryption, code snippet running, integrated terminal, chart embedding, HTML applets, plug-in, and macro replacement.

Yank Note A hackable markdown note application for programmers Download | Try it Online >>> Not ecommended English | 中文说明 [toc]{level: [2]} Highlights

洋子 4.3k Dec 31, 2022
A simple 2D jungle-themed fighting game

?? ?? 2D Jungle Fighting Game ?? ?? This is a simple 2D fighting game made with JavaScript and HTML Canvas. It's meant to be played on desktop, with a

Ale 17 Jan 7, 2023
A hackable C# based scripting environment for 3D modeling running in the web browser.

A hackable C# based scripting environment for 3D modeling running in the web browser. Background Script based 3D modeling software running in the web

Emil Poulsen 49 Nov 28, 2022
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.

Bootstrap Colorpicker Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4. THIS PROJECT IS NOT MAINTAINED ANYMORE. After almost 10

Javi Aguilar 1.4k Dec 22, 2022
Nepali Multi Date Picker for jQuery. Supports both single date selections and multiple date selection.

Nepali Multi Date Picker A simple yet powerful date picker based in Nepali calendar. Supports both single date selections and multiple date selection.

Sanil Shakya 4 May 23, 2022
Simple utils to pack arrays, objects and strings to a flat object (and back again).

packrup Simple utils to pack (and unpack) arrays and strings to a flat object. Status: In Development Please report any issues ?? Made possible by my

Harlan Wilton 15 Dec 23, 2022
🤖 A programming-themed based-in-terminal clicker game!

Termi Clicker ?? A programming-themed clicker game for your terminal! ?? Usage npx termi-clicker@latest - install & play the game For now, global inst

Szymon Wiszczuk 6 Oct 3, 2022
A Notion themed portfolio developed with NextJS, deployed on Vercel.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Mackenzie 4 Jul 19, 2022
Simple, Fast, Secure, Flat-File CMS

Bludit Simple, Fast and Flexible CMS. Bludit is a web application to build your own website or blog in seconds, it's completely free and open source.

BLUDIT 1.1k Dec 30, 2022
Change the color of an image to a specific color you have in mind.

image-recolor Run it: https://image-recolor.vercel.app/ image.recolor.mov Acknowledgments Daniel Büchele for the algorithm: https://twitter.com/daniel

Christopher Chedeau 21 Oct 25, 2022
A little toy app to help you find the nearest match for a given color within a Figma Tokens color palette.

Hey Palette So you've got a color palette in Figma and you've used the Figma Tokens plugin to export that palette to JSON. Let's say you have a color

Kalo Pilato 5 Nov 15, 2022
A NodeJS package to convert any RGB color to HEX color or viceversa. Also supports HSL conversion.

Unhex ?? A NodeJS package to convert any RGB color to HEX, HSL color or viceversa. Example div { color: #fff; background-color: #0070f3; } After r

Arnau Espin 2 Oct 1, 2022
BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework

BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.

bootflat 4.3k Dec 25, 2022
Ordered lists, flat or nested, multiple formats ordered lists.

logseq-plugin-ol 有序列表,单级或多级、多种样式的有序列表。 Ordered lists, flat or nested, multiple formats ordered lists. 使用展示 (Usage) 在想要展示为有序列表的块上添加一个以 #.ol 开头的标签就可以了。有

Seth Yuan 25 Jan 1, 2023
This package enables you to define your routes using the flat-routes convention.

Remix Flat Routes This package enables you to define your routes using the flat-routes convention. This is based on the gist by Ryan Florence ?? Insta

Kiliman 180 Jan 3, 2023