ColorPicker ist eine jQuery-Klasse, mit der ein Farbauswahl-Dialog erstellt werden kann, der dem Benutzer die Eingabe/Auswahl von Farben erleichtert. Der Dialog ist ähnlich aufgebaut wie der vieler Bildbearbeitungsprogramme, und hat einen ähnlichen Funktionsumfang.  Die Klasse steht unter der MIT- und der GPL-Lizenz.

Colorpicker in Aktion (Demo)
Webseite vom Colorpicker-Skript

Benutzung

Zuerst werden jQuery und die colorpicker.js eingebunden.

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/colorpicker.js" type="text/javascript"></script>

Anschließend können HTML-Elemente mit dem Aufruf der ColorPicker-Funktion erweitert werden. Die Funktion akzeptiert einige Parameter, die aber alle optional sind. Ruft man die Funktion ohne Parameter auf, öffnet sich der Dialog beim Anklicken des Elements.

$('#element').ColorPicker();

Möchte man eine Farbauswahl direkt auf der Seite anzeigen, verwendet man die flat-Option.

$('#farbauswahl').ColorPicker({
    flat: true,
    color : '#123456',
});

Mit der color-Option lässt sich außerdem eine Farbe vorgeben.

Meistens möchte man die ausgewählte Farbe aber auch noch irgendwie weiterverarbeiten, beispielsweise in ein Formularfeld eintragen. Dazu eignen sich die Optionen onSubmit und onChange, die beim Abspeichern der Farbe (onSubmit) bzw. beim Verändern der Farbe (onChange) aufgerufen werden.

$('input').ColorPicker({
    onSubmit : function(hsb, hex, rgb, element) {
        // hsb = HSB-Farbraum als Objekt ({ 'h' : 100, 'b' : 200, 's' : 300})
        // hex = Hexadezimale Schreibweise (#123456)
        // rgb = RGB-Farbraum als Objekt ({ 'r' : 123, 'g' : 123, 'b' : 123})
        // element = Das Element, an welches der ColorPicker angehangen wurde.
        $(element).val('#' + hex);
    }
});

Das sind die wichtigsten Optionen. Eine ausführlichere Beschreibung aller Optionen findet sich auf der Webseite von ColorPicker.

• Fortschrittsbalken mit CSS/JavaScript
• Farbkombinationen unter Gnome mit Agave
• Mehrere Dateien flexibel hochladen
• Formulare: Datei-Element umgestalten
• Geteilte Eingabe