While developing Surreal CMS, we found the need for a simple jQuery-based color picker. What we wanted was something very simple, preferably something that piggy-backed an input control. While we found an extensive number of color picker plugins available, we failed to find any that were simple and compact enough for our needs (except for perhaps ColourMod, which is neither jQuery-based nor open-source). Thus, jQuery MiniColors was born.
Update (Jan 26, 2013): MiniColors was completely re-written. The documentation below has been made current.
Features
- Ability to place controls inline
- Multiple variations
- Touch support
- Opacity support
- Default values (blank reverts to transparent)
- Ability to place swatch on the left or right of the
inputelement - Adjustable dropdown position
- Utility functions to get RGB(A) objects/strings
- Customizable default settings
- Fresh but familiar new look
Demo, Documentation & Download
This project is actively maintained on GitHub. Please submit all issues and contributions to the project page.
Great stuff, I’ll give it a shot when I need one of these!
Sweet. Looks useful.
Beautifully simple, works great. Thanks a million!
Wow, thank you very very very very much!
I like this control a lot but when you set the readonly property to true, shouldn’t the color picker be read only too? With 0.1, setting the readonly property only affects the input control.
Chris, that is the intended behavior for those who wish to prevent users from typing or pasting into the text field. You can disable the control entirely using the disable method.
I wanted to a read only view of the color selector for displaying the color in a list. Setting disabled to true generates the correct mouse/keyboard behavior, but it changes the opacity to 50%, which presents a different color. That would be confusing to the users of the app that I am using this with.
I went in and added a new mode, “readonlyimage” that behaves nearly identically to disabled. It uses the same disabled code, but at 100% opacity and also changes the class of the trigger to use an edited variation of trigger.png.
This is a really nice color selector and it was very easy to tweak it for my use case.
I see. In that case I should have made the disabled state an extra CSS class for easier modification. Perhaps in the next update :)
Do you have a Github or similar for contributing changes back?
Mark, it’s on GitHub now: https://github.com/claviska/jquery-miniColors
Thanks guys…this is fantastic. Everything I wanted, simple and useful. Not bloated with every possible option and configuration under the sun. Easy to implement and easy to use…great work!
Thanks for this! Too many of the others were glitchy or overkill for the simple needs I had. This is much better!
Really like this. Simpler in appearance and usage to the colopicker pluigin I was using. Thank you.
Just what I was looking for! Very cool — Thanks!
This is great, thanks – quick question though, is there any way to have the selector appear above the input field, instead of below it?
I’ll echo what Mark said above – let’s get this code into Github so we can contribute back to it!
Rob, you’d have to modify the code.
It’s great, but can you also allow users to type in a further two options: ‘transparent’ and ‘none’?
This is exactly what i was looking for. Must smaller, simpler and cleaner than the other colour pickers I tried. I have to agree with Chris though about the read only mode, I was expecting the colour to be fixed and unchangeable as well and will have to adjust for my needs. Very good work though, saved me a lot of time, not being a javascript person.
Hi Cory. Thanks for the color picker. I made a few small changes in order to allow color to be set in the input field as well. Also, the color of the text in the input field changes from black to white and vice versa, depending on the background color. I can sent you the code if you are interested.
Stunning Job well done.
Great work! This initial release is better than most “mature” solutions.
Thank you very much for this plugin! It’s simple, with a clean design, yet efficient and customizable. The perfect tool for user-defined appearance on a website.
Brilliant, just exactly what I was looking for. It took me some time to find it, it seemed there was no good jQuery color pickers. Thank you!
“We failed to find any that were simple and compact enough for our needs.”
Ain’t that the truth. Your colour picker is *awesome*. Small, simple, doesn’t confuse the users, this is one nice piece of kit. Thanks Cory!
Hi Cory!
Just wanted to say that it’s the nicest color picker plugin around in my opinion – clean and simple! Exactly what I was looking for.
If I might suggest though maybe rename all your image files so that they would be unique in any project they are included in. Not a problem for me but just sayin’. Something like minicolors.circle.gif, etc.
Anyways excellent work!
Dude, I’ve been looking for an easy to use, simple, and sleek color picker for awhile. Finally found one. Thanks so much!
Awesome color picker, just what I was looking for. My old system was using ProColor for prototype which had some preset choices next to the picker itself which a lot of my clients liked. Thus I ported those over to MiniColors, if you’re interested here’s my changes: http://scrp.at/afI (far from perfect probably as I’m still a beginner when it comes to jQuery)
Jaanus, that’s a good idea—should have caught that myself. I’ll get them renamed in the next update :)
Jelmer, that’s a cool idea. I might make this something you can enable in a future release (with configurable presets and intelligent defaults, of course). Nice concept :)
Very great job ! It would be nice to add a callback when the event “onmousup” is called for example store in session the last color chosen.
You can do that with the change callback. Please view the source of the demo for an example.
Finally I found useful and minimalistic colorpicker for jQuery. Thanks & cheers, good job !
Thank you! Clean, light, minimal, easy to use. I like it!
This is the only color picker I could find that allowed me to point and drag the controls around on a touchscreen device (out of about 10 different ones that I tried). That, plus the fact that it’s minimal UI makes it simple to fit on a mobile screen makes this the best color picker I’ve seen. Also love how “unintimidating” the UI is for users not familiar with Photoshop, etc. (no knobs for RGB values, Saturation, blah blah blah). Thanks again.
Thank you for your work on this, especially ensuring touch screen capability.
Hey, just want to say huge thanks for this great little colour picker!
We looked at a few, but this one was absolutely perfect and we’ve included it in our WordPress Twitter Bootstrap plugin for our LESS compiler.
Thanks again!
Most useful and elegant color picker I’ve seen so far. Will use this for my upcoming project. Thanks!
LOVE the minicolors plugin! But I feel you should add an onHide() callback. I added it to my copy so I can immediately persist the selected color via AJAX. Super slick!
I second the request for onHide. I’m surprised nobody else has mentioned it, but this is the only jQuery color picker I have found that works well on mobile phones and iPad!
It’s been added, check out the latest on GitHub.
Thanks, I’ve been looking for this for days!
Thanks for this, I am going to test it against some of the more complicated, feature rich plugins, but I think this is probably all my user really needs and the KISS principle will probably win out.
And it works great in all browsers…Thank you! Saved me days of editing. You improved the world-wide karma!
Amazing stuff, respect man! :)
Very simple and complete! Wonderful!
I just wanted to say thanks for this great plugin. It’s exactly what I was searching for. Thanks from Romania! :)
Thank you very very much. Great work, cool lite design!
Very neat !
Is it possible to allow empty or blank values? I wan’t the color to be optional :)
@Morten: This feature is available as of v2.0.
I love it…thank you for the best and the easiest color picker!
This is a fantastic lightweight plugin that does exactly what I needed, nothing more, and is easy to configure and use! Thank you very much for your work.
Is it possible to use miniColors as a wheel with white in the middle? I love your color picker, as it’s working great with touch events as well, but I find the wheel much more intuitive than the usual gradient box.
Thanks a lot! :)
Special thanks to Manuel for contributing the code to add support for the color wheel!
Fantastic widget. Thanks for sharing it with all of us.
If I could offer one suggestion – change the value of minicolors-focus in your .css file to something much bigger than 2. I had a slider underneath where the panel displays, and its marker was appearing over the panel.
Thanks again for the awesome work!
Thank you! The new version looks good and is pretty stable. I included it to my WordPress Framework.