jQuery MiniColors (A Tiny Color Picker)

February 24, 2011

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.

Screenshot

Update (Aug 19, 2013): MiniColors now works with Bootstrap 3!

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 input element
  • 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.

Demo & Documentation | Download It

By Cory LaViska

Cory LaViska

Cory has worked on the web for over a decade. Currently, he runs Surreal CMS and a handful of online tools for web developers. He’s also responsible for the blog you’re reading right now.

Discussion

This discussion is now closed. If you want to leave feedback, you’re welcome to do so on Twitter.

  1. Great stuff, I’ll give it a shot when I need one of these!

    February 24th, 2011Josh Waller
  2. Sweet. Looks useful.

    February 24th, 2011RonnieSan
  3. Beautifully simple, works great. Thanks a million!

    March 1st, 2011PKG
  4. Wow, thank you very very very very much!

    March 22nd, 2011Maziar
  5. 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.

    April 4th, 2011Chris Miller
  6. 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.

    April 4th, 2011Cory LaViska
  7. 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.

    April 4th, 2011Chris Miller
  8. I see. In that case I should have made the disabled state an extra CSS class for easier modification. Perhaps in the next update :)

    April 4th, 2011Cory LaViska
  9. Do you have a Github or similar for contributing changes back?

    April 5th, 2011Mark McClain
  10. April 9th, 2011Cory LaViska
  11. 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!

    April 11th, 2011Árni Gunnar Ragnarsson
  12. Thanks for this! Too many of the others were glitchy or overkill for the simple needs I had. This is much better!

    April 13th, 2011WC
  13. Really like this. Simpler in appearance and usage to the colopicker pluigin I was using. Thank you.

    May 12th, 2011Tim hyde
  14. Just what I was looking for! Very cool — Thanks!

    May 14th, 2011Jason
  15. This is great, thanks – quick question though, is there any way to have the selector appear above the input field, instead of below it?

    May 26th, 2011Rob
  16. I’ll echo what Mark said above – let’s get this code into Github so we can contribute back to it!

    May 27th, 2011Ryan Petrello
  17. Rob, you’d have to modify the code.

    May 27th, 2011Cory LaViska
  18. It’s great, but can you also allow users to type in a further two options: ‘transparent’ and ‘none’?

    June 6th, 2011Richard
  19. 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.

    June 7th, 2011Jay Zelos
  20. 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.

    June 16th, 2011Alexander Zagniotov
  21. Stunning Job well done.

    July 5th, 2011Jose Alvarez
  22. Great work! This initial release is better than most “mature” solutions.

    July 5th, 2011Jay
  23. 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.

    July 11th, 2011Mathieu Rodic
  24. 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!

    July 25th, 2011Francisco Lopes
  25. “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!

    August 8th, 2011Dan F
  26. 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!

    August 12th, 2011Jaanus
  27. Dude, I’ve been looking for an easy to use, simple, and sleek color picker for awhile. Finally found one. Thanks so much!

    August 17th, 2011Tony Lea
  28. 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)

    August 18th, 2011Jelmer Schreuder
  29. Jaanus, that’s a good idea—should have caught that myself. I’ll get them renamed in the next update :)

    August 18th, 2011Cory LaViska
  30. 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 :)

    August 18th, 2011Cory LaViska
  31. 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.

    February 7th, 2012Keo
  32. You can do that with the change callback. Please view the source of the demo for an example.

    February 7th, 2012Cory LaViska
  33. Finally I found useful and minimalistic colorpicker for jQuery. Thanks & cheers, good job !

    March 6th, 2012Kamil Rykowski
  34. Thank you! Clean, light, minimal, easy to use. I like it!

    March 10th, 2012narnianguy
  35. 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.

    March 13th, 2012Mike
  36. Thank you for your work on this, especially ensuring touch screen capability.

    April 9th, 2012Darren Clark
  37. 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!

    April 25th, 2012Paul G.
  38. Most useful and elegant color picker I’ve seen so far. Will use this for my upcoming project. Thanks!

    May 3rd, 2012Alexander Griffioen
  39. 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!

    June 21st, 2012Lorenzo Gonzalez
  40. 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!

    June 28th, 2012Goulding
  41. It’s been added, check out the latest on GitHub.

    June 28th, 2012Cory LaViska
  42. Thanks, I’ve been looking for this for days!

    July 4th, 2012Vance
  43. 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.

    July 13th, 2012Adam
  44. And it works great in all browsers…Thank you! Saved me days of editing. You improved the world-wide karma!

    July 18th, 2012Eddie
  45. Amazing stuff, respect man! :)

    July 24th, 2012Chris
  46. Very simple and complete! Wonderful!

    August 28th, 2012Sergio
  47. I just wanted to say thanks for this great plugin. It’s exactly what I was searching for. Thanks from Romania! :)

    August 31st, 2012Adi Ulici
  48. Thank you very very much. Great work, cool lite design!

    September 14th, 2012Martin
  49. Very neat !

    October 7th, 2012Zehair
  50. Is it possible to allow empty or blank values? I wan’t the color to be optional :)

    October 16th, 2012Morten Blinksbjerg Nielsen
  51. @Morten: This feature is available as of v2.0.

    October 24th, 2012Cory LaViska
  52. I love it…thank you for the best and the easiest color picker!

    October 24th, 2012atmonshi
  53. 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.

    November 3rd, 2012Dan Kamins
  54. 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! :)

    December 14th, 2012Manuel Mager
  55. Special thanks to Manuel for contributing the code to add support for the color wheel!

    December 16th, 2012Cory LaViska
  56. 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!

    January 17th, 2013Scott
  57. Thank you! The new version looks good and is pretty stable. I included it to my WordPress Framework.

    April 5th, 2013Elias