Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

jQuery color picker using Farbtastic and jQuery UI

I want to share with you a little snippet of code I am using for a project. I was looking for a cute jQuery color picker and I found Farbtastic to be the best for my needs. Anyway, I also liked how jQuery UI used the Slider to make a simple color picker so I decided to merge both techniques to create a single color picker with more features.

Use the color wheel or the sliders and see how everything is linked.

I tried to keep the code in a single page, using Google as CDN when necessary. Here is the source:

You can also download the complete package along with Farbtastic color picker.

How would you improve it?

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (10 votes, average: 4.60 out of 5)
Loading ... Loading ...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 15 comments

  1. Rolpege

    on March 22, 2011 at 1:08 am

    Looks quite cool, but the div doesn’t play well with sliders when they’re at max/min, at least on Mac Google Chrome.

    Also, what about making the hexadecimal representation editable as well?

  2. vega

    on March 22, 2011 at 10:55 pm

    Looks fine in FF – atleast for me.
    Bookmarked – might be handy in the future.

  3. Wolfheat

    on March 30, 2011 at 12:39 pm

    This is really nice. Would like to translate this into flash though. Would be awesome to have the player pick his custom colors from this.

  4. Ken Paulsen

    on April 14, 2011 at 10:58 am

    This works like a charm for my use case. Only thing I’m wondering is whether there might be some option to set the starting color of the picker?

  5. Jquery and farbtastic, updating background using colorwheel

    on December 12, 2011 at 8:37 am

    […] page http://www.emanueleferonato.com/2011/03/22/jquery-color-picker-using-farbtastic-and-jquery-ui/ has an example but i dont understand how it is changing the color. i dont need all the extra fancy […]

  6. Jay

    on December 16, 2011 at 10:11 am

    Hello Sir,

    I want ot disable that wheel and color box in it.
    I have required only right side box .where can I set the color.
    I also want the he Horizontal scroll bar for managing the color shades.
    Can you help to do so

    Thanks & Regards,
    Jay

  7. Jay

    on December 16, 2011 at 10:11 am

    Hello Sir,

    I want to disable that wheel and color box in it.
    I have required only right side box .where can I set the color.
    I also want the he Horizontal scroll bar for managing the color shades.
    Can you help to do so

    Thanks & Regards,
    Jay

  8. Dominik

    on January 30, 2012 at 7:23 pm

    Hi Emanuel,

    First of all great tutorial and great tool you’ve found there. I just have one question: Do you know a way to call multiple divs with one update?

    Problem is I can’t use classes because the divs are from another jquery plugin and they have some needed classes. So I’m searching for a way to say Farbtastic “When I Click Picker1, I want to change this, that and that div over there” or something like that. Hope u understand what i mean and it would be great if you could help me with that.

    Greetings,
    Dominik

  9. Lari

    on February 15, 2012 at 8:22 pm

    When I add this, the only thing I get showing is the box where the color code is shown. I don’t get the sliders or the color picker.

    Any idea why?

  10. MrBeags

    on August 21, 2012 at 2:48 pm

    Any idea how the colour could be stored in a cookie so the background colour remained as chosen until page was closed or recached?

    Cheers!

  11. ArduinoPi web based controller for Arduino | Fritz-Hut

    on August 31, 2012 at 11:55 am

    […] and I would like to thank the original authors: Bootstrap, jQuery, Farbtastic Color Picker, jQuery color picker using Farbtastic and jQuery UI and flot. The complete source is on Github, I’ll give a short overview of the different […]

  12. kalyan

    on February 16, 2013 at 11:27 am

    how can i link this plug-in to different element on a click.i have designed a color pallete and i need the link with the color-picker to change to different div on clicking a different color.

  13. Meu

    on February 28, 2013 at 7:16 am

    Thank you Om ^^

  14. Quelle couleur de fond pour les Chroniques ? | Chroniques de l'Iboga

    on May 1, 2013 at 1:23 pm

    […] jQuery color picker using Farbtastic and jQuery UI par Emanuele Feronato This entry was posted in Dans l autre vie et la e-vie and tagged couleur, design, sémantique. Bookmark the permalink. […]

  15. Jquery and farbtastic, updating background using colorwheel | Stackforum.com

    on January 16, 2014 at 10:22 am

    […] page http://www.emanueleferonato.com/2011/03/22/jquery-color-picker-using-farbtastic-and-jquery-ui/ has an example but i dont understand how it is changing the color. i dont need all the extra fancy […]

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×