jQuery color picker using Farbtastic and jQuery UI

Emanuele Feronato Javascript

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?

Want to learn more? Learn by example!

Get the full commented source code of an actual commercial cross platform HTML5 game!!

Comments 16

  1. Rolpege

    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. Wolfheat

    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.

  3. Pingback: Jquery and farbtastic, updating background using colorwheel

  4. Jay

    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

  5. Jay

    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

  6. Dominik

    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

  7. MrBeags

    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!

  8. Pingback: ArduinoPi web based controller for Arduino | Fritz-Hut

  9. kalyan

    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.

  10. Pingback: Quelle couleur de fond pour les Chroniques ? | Chroniques de l'Iboga

  11. Pingback: Jquery and farbtastic, updating background using colorwheel | Stackforum.com

  12. Pingback: Farbtastic color picker to change the background color of text field input? | DL-UAT

Leave a Reply

Your email address will not be published. Required fields are marked *