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?

  • 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?

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

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

  • 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?

  • Pingback: Jquery and farbtastic, updating background using colorwheel()

  • 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

  • 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

  • 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

  • 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?

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

  • Pingback: ArduinoPi web based controller for Arduino | Fritz-Hut()

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

  • Meu

    Thank you Om ^^

  • Pingback: Quelle couleur de fond pour les Chroniques ? | Chroniques de l'Iboga()

  • Pingback: Jquery and farbtastic, updating background using colorwheel | Stackforum.com()

  • Pingback: Farbtastic color picker to change the background color of text field input? | DL-UAT()