jQuery logo

jQuery MiniColors (A Tiny Color Picker)

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.

jQuery MiniColors

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

About the author

Cory LaViska is a founder, web developer, and bootstrapper based in New Hampshire. His current focus is on Surreal CMS, an awesome SaaS content management service for web designers. Need to get in touch? You can connect with him on Twitter.

Comments

  1. Chris Miller says:

    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.

    • Cory LaViska says:

      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.

  2. Chris Miller says:

    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.

    • Cory LaViska says:

      I see. In that case I should have made the disabled state an extra CSS class for easier modification. Perhaps in the next update

  3. Árni Gunnar Ragnarsson says:

    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!

  4. WC says:

    Thanks for this! Too many of the others were glitchy or overkill for the simple needs I had. This is much better!

  5. Tim hyde says:

    Really like this. Simpler in appearance and usage to the colopicker pluigin I was using. Thank you.

  6. Rob says:

    This is great, thanks – quick question though, is there any way to have the selector appear above the input field, instead of below it?

  7. Ryan Petrello says:

    I’ll echo what Mark said above – let’s get this code into Github so we can contribute back to it!

  8. Richard says:

    It’s great, but can you also allow users to type in a further two options: ‘transparent’ and ‘none’?

  9. Jay Zelos says:

    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.

  10. Alexander Zagniotov says:

    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.

  11. Mathieu Rodic says:

    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.

  12. Francisco Lopes says:

    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!

  13. Dan F says:

    “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!

  14. Jaanus says:

    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!

    • Cory LaViska says:

      Jaanus, that’s a good idea—should have caught that myself. I’ll get them renamed in the next update

  15. Tony Lea says:

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

  16. Jelmer Schreuder says:

    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)

    • Cory LaViska says:

      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

  17. Keo says:

    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.

  18. Kamil Rykowski says:

    Finally I found useful and minimalistic colorpicker for jQuery. Thanks & cheers, good job !

  19. Mike says:

    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.

  20. Alexander Griffioen says:

    Most useful and elegant color picker I’ve seen so far. Will use this for my upcoming project. Thanks!

  21. Lorenzo Gonzalez says:

    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!

  22. Goulding says:

    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!

  23. Adam says:

    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.

  24. Eddie says:

    And it works great in all browsers…Thank you! Saved me days of editing. You improved the world-wide karma!

  25. Adi Ulici says:

    I just wanted to say thanks for this great plugin. It’s exactly what I was searching for. Thanks from Romania!

  26. Dan Kamins says:

    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.

  27. Manuel Mager says:

    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!

  28. Scott says:

    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!

  29. Elias says:

    Thank you! The new version looks good and is pretty stable. I included it to my WordPress Framework.