🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!
Home Page: https://simonwep.github.io/pickr
License: MIT License
We're having a really bad day.
The Unicorns have taken over. We're doing our best to get them under control and get GitHub back up and running.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
It would be great if Pickr has an ability to select no color. "No color" is not the same as the fully transparent color. Selecting nothing can be used when there is a default color (e.g. page background) and a user can select either the default color or a custom color (to customise his background color).
Why do I follow the demo initialization plugin to find that opacity is not 1 but 0? What do I need to do?
default color is not applying to the pickr
Bug.
When setting "appendToBody: true", the popup does not open on click.
appendToBody: true, to gh-page/js/script.jsPopup should open.
Pickr-version: master (166ce8d6671be16cf81b7cefa7e29c7b73738490)
Browser-version: 68.0.3440.42 (Official Build) beta (64-bit)
Operating-system: MacOs
Pickr is great! Thank you so much!!
show https://simonwep.github.io/pickr/
open pickr
input C66016
click "HEX"
change input #C76117
Bug
When changing the text-hex value the color becomes transparent when only 3 characters are shown, instead of when there are 4
Disable alpha channel via opacity: false
Start removing characters from the displayed hex value
Nothing happens when there are 4 characters (but it should as it doubles to RRGGBBAA)
When there are 3 characters it suddenly shows transparency
Example color used: #FFAAFF
4 characters should represent transparency, 3 should be a solid color
Pickr-version: 0.2.4
Browser-version: Chrome 68.0.3440.106 (latest), same in FF
Operating-system: Win7
Bug.
When the background of any ancestor of the pickr is set, the pickr button's background (checkerboard pattern indicating transparent colors) is not visible.
background-color: white;The checkerboard pattern should be visible.
Pickr-version: 0.3.1
Browser-version: Chrome, Firefox, Edge, ... (version-independent)
Operating-system: Mac, Windows, ...
The problem is caused by the following style:
.pickr .pcr-button:before {
...
z-index: -1;
}I suggest using another element for the color selection and setting the checkerboard patter background to the .pcr-button itself.
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.
For use in Europe, the picker needs to be accessible.
A standard input[type=color] should maybe be polyfilled with the functionality provided, and WAI-ARIA used to tell screen readers what's going on. It also needs to be keyboard accessible.
:)
Is there a callback for closing?
I want to show a preview to the user on change, cancel removes the color and closing the picker revert back to default. This is what I currently have:
const el = document.querySelector('.picker-open');
const shape = document.querySelector('.picker-shape');
function updateShapeColor(color) {
if (color) {
shape.style.backgroundColor = color;
} else {
shape.style.backgroundColor = 'transparent';
}
}
var lastPickedColor;
const pickr = new Pickr({
el,
default: 'rgb(215, 223, 33)',
defaultRepresentation: 'RGBA',
onChange: function(hsva) {
if (hsva) {
updateShapeColor(hsva.toRGBA().toString());
}
},
onSave: function(hsva) {
if (hsva) {
lastPickedColor = hsva.toRGBA().toString();
updateShapeColor(lastPickedColor);
} else {
updateShapeColor('');
}
},
onClose: function() {
if (lastPickedColor) updateShapeColor(lastPickedColor);
},
components: {
preview: true,
opacity: true,
hue: true,
comparison: false,
interaction: {
hex: true,
rgba: true,
hsla: false,
hsva: false,
cmyk: false,
input: true,
clear: true,
save: true
}
},
strings: {
save: 'Select',
clear: 'Cancel'
}
});Hello Simonwep,
thanks for nice plugin!
I want to keep picker color always stay on the page without hide.
I tired use pickr.show() but when I click outside on body it will be hide picker color
thanks for your help!
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
feature
The current build is built for having a fixed poisition at all times, not allowing for the color picker to be inline without custom styling built around it.
Allow the developer configuring it to give a 'relative' position, which will bypass the fixed position and allow the user to have the color pickr act as a part of their form.
Pickr-version (see Pickr.version): Master (0.3.2 at time of writing)
Browser-version: Firefox/Chrome
Operating-system: Debian
Bug
A click inside the palette will close the color picker when pickr is created with useAsButton: false and parent: 'body'
const pickr = new Pickr({
el: '.color-picker',
default: '#42445A',
useAsButton: false,
parent: 'body',
components: {
preview: true,
opacity: true,
hue: true,
interaction: {
hex: true,
rgba: true,
hsva: true,
input: true,
clear: true,
save: true
}
}
});The palette is kept open on click. The pallete is closed when the Save button is clicked or the user clicks outside the color picker.
Pickr-version: master branch, latest commit: 954f46a
Browser-version: Chrome 72.0.3581.0 (Official Build) canary (64-bit)
Operating-system: Windows 10
bug
Pickr does not initialized with the given color(#42445A),color picker zone is transparent.After I moved .pcr-picker picker's color will appeared,but not I defined.
After test,I'm sure this behavior conflicts with my code,but I have not found the problem in my code(allthough my code may has problem),maybe some code in Pickr is not very perfect.
Initialize with the color I defined.
Pickr-version:0.2.2
Browser-version: Google Chrome68
Operating-system: windows10
Hi,
First of all this library is super cool 👍
Im wondering is there anyway I can use custom template or modify existing template. I see there is a static method createFromTemplate to create, but however I'm not sure how to use.
When I checked the source for createFromTemplate it seems fixed.
Any thoughts?
If click 'clear' does not fire event onChange with HSVa = null;
http://jsfiddle.net/egma4s9f/
(Watch console)
Why include Montserrat from Google Fonts and then use Source Sans Pro?
Wouldnt it be better using a native fontstack like below?
$font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Roboto",
"Helvetica Neue", Arial, sans-serif, !default;This is taken from Bootstrap but without the Emoji stuff.
https://getbootstrap.com/docs/4.1/content/reboot/#native-font-stack
Instead of using classes, consider using factory functions instead because then there would be no need for new and also by avoiding the use of this one would eliminate the need for _.bindClassUnderscoreFunctions(this); completely.
Overall should you consider using factory functions it may actually simplify the codebase and improve the code's portability as functions require no backwards transpilation to ES5 while at the same time improving composability by avoiding this and working only with plain objects instead of class instances.
No need to make everything a factory function but for something like the new Selectable(); helper it could be an improvement.
This is what the selectable.js helper would look like
import * as _ from './../lib/utils';
export default function Selectable(opt) {
const selectable = {
// Assign default values
options: Object.assign({
onchange: () => 0,
className: ''
}, opt),
_ontap(evt) {
const opt = selectable.options;
opt.elements.forEach(e => e.classList.remove(opt.className));
evt.target.classList.add(opt.className);
opt.onchange();
},
destroy() {
_.off(selectable.options.elements, 'click', selectable._ontap);
}
}
_.on(selectable.options.elements, 'click', selectable._ontap);
return selectable;
}Note: changing this file in the codebase as it stands to the above code will not be breaking as calling new (function () {}) does not cause an error.
Perhaps read this article from Eric Elliott for more information on factory functions.
Try to open the picker and try to select black color #000000
Color Code will be #-1-1-1
For some simple cases, just clicking on the color (or to be more precise, mouseup) to save it is better.
bug
The pickr does not initialize and throws an error.
Check the fiddle:
https://jsfiddle.net/hnwbqmLt/3/
Initialization and no errors... I guess it is related to #31 .
Pickr-version: 0.2.3 / master
Browser-version: Chrome 68
feature
The interaction options for colors are static, it is not configureable which interaction option is choosen initial. Currently, per default, HEX is selected.
Additional, the selected interaction option for color is not directly accessible when saving.
The initial selected color interaction option should be defineable in the options - or automatically determined on the default value.
I am using an input field next to the pickr widget where the user is allowed to enter an RGBa String or a HEX code, it is confusing opening the widget with HEX selected when a RGBa String was given.
Furthermore, the onSave or onChange method should be aware which interaction option is currently active. So the return value can be either HEX or a RGBa String in my case.
Pickr-version: 0.1.9
Browser-version: Chrome 68
feature
I'm doing integration with the react, since there is no way to clean the event handlers after this meaningless work (
When adding pickr inside a bootstrap collapse, it would be great to have a stop propagation option to prevent the collapse.
Of course, that option could be used in a lot more cases.
I've been getting this deprecation warning the last couple of months, and hope we can fix it before functionality breaks in the latest Chrome. :)
[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M71, around December 2018. Please use '%23' instead.
Pickr-version (see Pickr.version): 0.3.2
Browser-version: Chrome 71.0.3578.98
Operating-system: MacOS
Bug.
Color.parseToHSV("rgba(70,70,70,1)") returns null.
Color.parseToHSV("rgba(70,70,70,1)")
return the correct value.
This seems to be a regression introduced by 166ce8d
Pickr-version: latest master
Browser-version: Chrome 68 beta
Operating-system: MacOs
Just got layout bug. Reproduced on clean page (only Pickr included).
<div class="pcr-color-palette"> overlapped interaction bar.
Here is image:
This is my fix suggestion (cannot create PR right now, sorry):
line 213 of .css file
.pcr-app .pcr-selection .pcr-color-chooser, .pcr-app .pcr-selection .pcr-color-opacity, .pcr-app .pcr-selection .pcr-color-palette { position: relative; user-select: none; display: flex; /* ADDED */ flex-direction: column; /* ADDED */ }
This fixed problem for me
Pickr-version: 0.2.5
Browser-version: Chrome Version 69.0.3497.100 (Official Build) (64-bit)
Operating-system: macOs High Sierra 10.13.6
changing color code in .pcr-result input element didn't trigger onChange
feature
pickr doesn't offer swatches
Would you consider adding a swatches option to pickr?
When enabled, present a bunch of small, colored boxes that the user can click to select that color.
This is how it should work: https://labs.abeautifulsite.net/jquery-minicolors/ (have a look at the "swatches" example in the "More..." paragraph).
Here's an idea of what it could look like. There would be room for about 12 swatches, that's plenty.
Bug.
When calling pickr.setColor('#f00'), the color of the button is not updated correspondingly.
pickr.setColor('#f00')The button color should be updated as well.
Pickr-version: master (166ce8d6671be16cf81b7cefa7e29c7b73738490)
Browser-version: 68.0.3440.42 (Official Build) beta (64-bit)
Operating-system: MacOs
bug
Using the "dialog"-Tag as modal with a custom button results in an inaccessible pickr.
As noted in #22 the flag appendToBody is always true in that case. Which does not work with dialogs.
See: https://jsfiddle.net/xjvsfy0n/
Pickr should be open in front of the dialog.
Pickr-version: 0.1.9
Browser-version: Chrome 68
Operating-system:
Hi,
i 've some input fields, and add the color-picker class to each of them.
Only the first input field, will work with the picker. Is that not possible to use your picker for multiple fields at same page or did i something wrong?
best regards,
Rene
Bug
Pickr initializes with #NANNANNAN even though the default is set to #FF1294 (which you can see in the preview of the last color saved).
The sliders are 100% not working and when clicking the transparency one, the resulting hex value is negative because the selected point is somewhere completely different (no idea where).
I used the following code, and just appended the .pickr div before initializing Pickr with that element (which seems to work just fine).
import Pickr from "pickr-widget/dist/pickr.min";
new Pickr({
el: $(".pickr"),
default: "#FF1294",
components: {
preview: true,
opacity: true,
hue: true,
output: {
hex: true,
rgba: true,
hsva: true,
input: true
}
}
});The weird thing is that the demo at https://simonwep.github.io/pickr/ seems to work just fine...
I am not sure of the exact root cause of this problem.
I don't want to show much of my code, but it works fine when I execute it from Devtools (shows expected behavior) but not from JS.
I am using Rollup with CommonJS, and am importing the dist file directly via import Pickr from 'pickr-widget/dist/pickr.min';
The output color is completely normal and the sliders work properly.
Pickr-version: 61a7ff46a11d9fc84da428fd826a2d03634b9456
Browser-version: Google Chrome Version 68.0.3440.17 (Official Build) beta (64-bit)
Operating-system: macOS High Sierra 10.13.5
bug
onChange event fires immediately after creating a pickr object when specifying a default color using default in options
onChange should not fire when specifying a default color
Pickr-version (see Pickr.version): 0.3.2
Browser-version: Firefox 64
Operating-system: Linux
I want a new feature.
Currently it is not possible to replace the "pcr-button" with an icon or something else. The only option is to overwrite the css class and hide the button by setting the opacity to 0. Hiding the button does not work as it breaks the positioning of the component.
It would be nice if I could replace the button with an icon or disable it in the config like all other buttons.
Pickr-version: 0.1.7
bug, kinda...
Importing instructions for using pickr in node use currently a destructuring pattern that is not necessary and lead to an error ('Pickr' is undefined):
import {Pickr} from '/node_modules/pickr-widget/dist/pickr.min'; // JavascriptThe imported script already returns a function that represents the Pickr object, so destructuring is not needed.
import Pickr from '/node_modules/pickr-widget/dist/pickr.min'; // JavascriptPickr-version: 0.2.2
Node-version: v8.11.3
Operating-system: Windows 10, 1803
bug
Setting specific HEX codes for colors are changed in the preview for colors and for the onSave method.
Open https://jsfiddle.net/fs5re70h/
Initial default value is #D6A9DB
Opening the Pickr does display #D5A9DB
Clicking into the input field for manually setting a HEX code does change it to #D4A9DB
Use the button to set #D5A6DB
Opening the pickr widget will preview the HEX color code #D4A9DB.
The HEX color code should not change.
Pickr-version: 0.1.9, reproduced on 0.2.0 with the jsfiddle
Browser-version: Chrome 68
A bug.
If the color input has positions about right side. Browser displays horizontal scroll after initial pickr. If I open and close pickr the horizontal scroll leaves. Looks like the problem is pcr-app don't has display: none; property
Move input to the right side.
Without the horizontal scroll.
Pickr-version: 0.3.1
Browser-version: Firefox 63.0.3
Operating-system: Windows 7 64
Bug:
i added option swatches, but it is not working. it is not show in color-picker. hmmm
my code:
const pickr = new Pickr({
el: '.color-picker',
default: '#42445A',
swatches: [
'#F44336',
'#E91E63',
'#9C27B0',
'#673AB7',
'#3F51B5',
'#2196F3',
'#03A9F4',
'#00BCD4',
'#009688',
'#4CAF50',
'#8BC34A',
'#CDDC39',
'#FFEB3B',
'#FFC107'
],
components: {
preview: true,
opacity: true,
hue: true,
interaction: {
hex: true,
rgba: true,
hsva: true,
input: true,
clear: true,
save: true
}
}
});
Pickr-version (see Pickr.version):
Browser-version:
Operating-system:
How to create some color peakers? If I create some instance they crash page or stay on left top corner. Only first peaker work good.
Pickr-version: 0.2.0
Browser-version: Chrome 68.0.3440.106
Operating-system: ubuntu
Bug.
Clicking into either the Hue-palette, the luminosity slider or the transparency slider does not set the value to where the user clicked. Only once the user drags (even 1px), the color is updated.
Go to https://jsfiddle.net/dL0e569h/1/ or to the official demo https://simonwep.github.io/pickr/ and open the color picker. Click anywhere into the hue palette without moving the mouse while clicking. Nothing happens. But keep the mouse button pressed, and drag a few pixels, and the color is picked.
The color should be updated just by clicking, without dragging. The pcr-picker circle should move to where the user clicked.
Pickr-version: Newest from npm (0.2.4)
Browser-version: Google Chrome 69.0.34
Operating-system: Windows 10 Home
I'd be happy if someone could help me out or offer a workaround. Thanks!
bug
console.log when using appendToBody
https://github.com/Simonwep/pickr/blob/master/src/js/pickr.js#L299
Use appendToBody as config
No console log
Pickr-version: 0.1.9 - also present on master branch, see url
Browser-version: Chrome 68
Hello! You did a great job, your colorpicker is awesome.
But, here is some issues. It's about pcr-app size.
1 - CSS Override.
If I set only .pcr-app class height, pcr-picker position is correct.
( here is a demo http://jsfiddle.net/o3e5wqc7/7/ )
If I set .pcr-app height as child of any tag, pcr-picker position is correct.
( here is a demo http://jsfiddle.net/o3e5wqc7/8/ )
If I set .pcr-app height as child of any class, pcr-picker position is INCORRECT.
(It takes a value of default style 240px)
( here is a demo http://jsfiddle.net/o3e5wqc7/9/ )
2 - Size in percents
I need to set height on .pickr and .pcr-app in percents, there is always position: 0 0 after intialization.
( here is a demo http://jsfiddle.net/o3e5wqc7/10/ )
I hope this is not a feature, but just an annoying little bug :)
This url opens Pickr's homepage on an iframe:
https://pacific-temple-66916.herokuapp.com/test-color-picker <- No longer available
In my case, it works on Desktop browsers, but not on mobile versions (iOS) of Chrome, Safari & Firefox.
Pickr-version: master
Browser-version:
- iOS Google Chrome (Version: 67.0.3396.87)
- iOS Safari (Version: Latest?)
- iOS Firefox (Version: 12.1)
Operating-system: iOS 11.4 (iPhone 7 Plus)
Thanks in advance for this awesome tool! Definitely excited to see where it goes.
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.
Bug (IMHO)
Pickr fires the onSave event during construction.
Add to gh-page/js/script.js the following lines:
onSave: function (hsva, instance) {
console.log("onSave");
}
Open index.html.
onSave should not be called (IMHO). It should only be called when the user makes a change.
Pickr-version: master (166ce8d6671be16cf81b7cefa7e29c7b73738490)
Browser-version: 68.0.3440.42 (Official Build) beta (64-bit)
Operating-system: MacOs
I suppose you could have the hex value with the alpha channel - 8 digits for web development. You'd have 6 digits with the alpha at 100% or whatever 255? Then if it is less then have an 8 digit hex.
hi
pickr.show not working with options:
useAsButton: true, comparison: false
i can show pickr only by clicking on button! i need to show on INPUT TEXT focus
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.