PickSlide(1.0)

Another HSL Colorpicker • jQuery Plugin

Einleitung

Die meisten Colorpicker arbeiten auf HSV- oder HSB-Basis, bei denen man keine HSL(A)-Werte eingeben kann. Doch was soll ich mit einem HSV/B-Farbwert im Web anfangen? Grafikprogramme nutzen meist sowohl das HSV/B- als auch das RGB-Modell, so das man also auch Farbwerte vom Programm ins Netz oder umgekehrt übernehmen kann, ohne auf HSV/B zurückgreifen zu müssen. Also warum nicht für einen Colorpicker das HSL-Farbsystem einsetzen, welches doch den Vorteil hat, als relativ einfach und für Menschen gut nachvollziehbar zu gelten?

Wenn man die Dokumentation bzw. die Demos von jQuery UI durchforstet, stösst man beim Slider-Widget auf ein Beispiel, das einen einfachen RGB-Colorpicker demonstriert. Das brachte mich auf die Idee, das es doch möglich sein müsste, in Verbindung mit CSS3 einen optisch ansprechenden RGB/HSL-Colorpicker zu scripten - natürlich als jQuery Plugin. Ein erster Versuch auf jsFiddle.net, die Slider entsprechend anzupassen, sah schon mal ganz viel versprechend aus und so wurde PickSlide geboren...

Wichtig war mir vor allem, das man über die Slider bequem seine Farbwerte einstellen kann und nicht umständlich in Input-Felder eingeben muss, wie es bei den meisten Pickern der Fall ist. Ausserdem sollte der Colorpicker den jeweiligen Bedürfnissen anpassbar und flexibel zu handeln sein.

Nun denn, PickSlide ist in seiner ersten Beta-Version fertig und ich bin soweit recht zufrieden damit. Kritikern dürften die Dimensionen des Colorpickers in seiner Basis-Version eventuell nicht unbedingt zusagen, doch die lassen sich über die Optionen reduzieren, indem man auf einige "Features" verzichtet.

Optionen

Parameter Beschreibung Wert Beispiel
Die Angaben mit blauer Schrift in der Spalte "Wert" sind Default-Werte.
target Normalerweise wird der Rückgabewert dem Caller, also dem Element, das SlidePick aufruft, übergeben. Allerdings kann man das über diesen Parameter ändern. object :
$(this), $('#elementID')
$('#call').PickSlide({
addIcon: true,
target: $('#target')
});
addIcon Wird der Parameter addIcon auf true gesetzt, wird dem Element ein Icon vorangestellt, über das man den Colorpicker aufrufen kann. Das Icon zeigt immer die aktuell ausgewählte Farbe an. boolean :
true,
false
$('#iconize').PickSlide({
addIcon: true
});
iconSize Mit iconSize kann man die Grösse des Icons bestimmen. Dabei beziehen sich 'big' (24 x 24 px) und 'small' (16 x 16 px) auf die CSS-Klassen 'PS-pickup-big' und 'PS-pickup-small'. Eine Positions- bzw.Grössenänderung des Icons kann natürlich in den Style Sheets vorgenommen werden. string :
'big',
'small'
$('#iconize-small').PickSlide({
addIcon: true,
iconSize: 'small'
});
iconTitle Über diesen Parameter lässt sich ein Text für das Attribut 'title' eines Icons bzw. des eigentlichen Elements angeben. string:
''
$('#icon-title').PickSlide({
addIcon: true,
iconTitle: 'ColorPicker'
});
initColor Mit diesem Parameter legt man den Default-Farbwert fest. Wird ein Element benutzt, das ein value-Attribut besitzen darf, kann auch dort ein Wert gesetzt werden - dieser hat dann Priorität. Wird kein Wert vergeben, wird per Zufallsgenerator eine Startfarbe generiert. string :
'hsl([0-360],[0-100]%,[0-100]%)',
'hsla([0-360],[0-100]%,[0-100]%,[0-1])',
'rgb([0-255],[0-255],[0-255])',
'rgba([0-255],[0-255],[0-255],[0-1])',
'rgb([0-100]%,[0-100]%,[0-100]%)',
'rgba([0-100]%,[0-100]%,[0-100]%,[0-1])',
'#[0-9A-Fa-f]{3|6}'
$('#init-color').PickSlide({
initColor : '#ff00ff'
});
colorFormat Diese Eigenschaft legt das gewünschte Ausgabeformat des Farbwerts fest. string :
'hsl',
'hsla',
'rgb',
'rgb%',
'rgba',
'rgba%',
'hex' | '#'
$('#color-format').PickSlide({
colorFormat: '#'
});
hex2LowerCase Dieser Parameter bestimmt, ob hexadezimale Farbwerte in Kleinschreibung ausgegeben werden sollen. boolean :
true,
false
$('#hex2LowerCase').PickSlide({
colorFormat: 'hex',
hex2LowerCase: true
});
setSpace Dieser Parameter entscheidet, ob bei den Rückgabewerten der Farbformate RGB(A) und HSL(A) ein Leerzeichen zwischen den Einzelwerten eingefügt werden soll. boolean :
true,
false
$('#set-space').PickSlide({
setSpace: false
});
setPickerToCenter Ist dieser Parameter true, wird der Colorpicker mittig im Browser geöffnet und bei Bedarf gescrollt, ansonsten nach Möglichkeit unterhalb des Elements. boolean :
true,
false
$('#picker-center').PickSlide({
setPickerToCenter: true
});
showValues Mit diesem Parameter kann bestimmt werden, ob die aktuellen Farbwerte (hexadezimal, hsla, rgba) angezeigt werden. Wird die Anzeige abgeschaltet, ist auch nicht mehr möglich, einen hexadezimalen Wert einzugeben. boolean :
true,
false
$('#show-values').PickSlide({
showValues: false
});
showHSLslider Mit diesem Parameter beeinflusst man die Anzeige für die Slider des HSL-Farbraums. boolean :
true,
false
$('#show-HSLslider').PickSlide({
showHSLslider: false
});
showRGBslider Dieser Parameter wirkt sich auf die Anzeige der Slider für den RGB-Farbraum aus. boolean :
true,
false
$('#show-RGBslider').PickSlide({
showRGBslider: false
});
showExtras Über diesen Parameter lässt sich regeln, ob die Extras, also die Buttons zum Erstellen von Variationen einer Farbe und zum Aufrufen der 'Named Colors', angezeigt werden. boolean :
true,
false
$('#show-extras').PickSlide({
showExtras: false
});
showHistory Der Parameter showHistory legt fest, ob die 'History', also die bisher ausgewählten Farben, angezeigt werden. Auch wenn die Anzeige ausgeblendet wird, kann man die Werte abrufen. boolean :
true,
false
$('#show-history').PickSlide({
showHistory: false
});
historyLimit Dieser Parameter bestimmt die Anzahl der Farben, die in der 'History' gespeichert werden. Sobald das Limit überschritten wird, überschreibt das Script jeweils den ersten Farbwert. number :
20
$('#history-limit').PickSlide({
historyLimit: 3
});
setHistory Über diesen Parameter lässt sich die 'History' mit Farbwerten vorbelegen. Die Werte müssen in Form eines Arrays übergeben werden, ansonsten wird der Parameter ignoriert. array :
[ ]
$('#set-history').PickSlide({
setHistory: ['#FF0000', '#00FF00', '#0000FF']
});
setPalette Mit diesem Parameter kann man eine eigene Farbpalette bestimmen. Die entsprechenden Farbwerte müssen in einem Array definiert sein. Die Palette wird statt der 'Named Color'-Palette angezeigt. Ästhetischer sieht die Palette wohl aus, wenn eine Farbanzahl gewählt wird, deren Quadratwurzel eine ganze Zahl ist, also etwa 9, 16, 25, etc., da so der Bereich für die Palette optimal ausgenutzt werden kann. array :
[ ]
$('#set-palette').PickSlide({
setPalette: ['#ff9900', '#ccff00', '#33ff00', '#00ff66', '#00ffff', '#0066ff', '#3300ff', '#cc00ff', '#ff0099']
});
paletteOnly Mit diesem Parameter wird die Farbauswahl auf eine eigene Palette beschränkt - natürlich vorausgesetzt, das diese auch definiert wurde. Die Farbeingabe als Hexadezimalwert wird unterbunden. boolean :
true,
false
$('#palette-only').PickSlide({
setPalette: ['#ff9900', '#ccff00', '#33ff00', '#00ff66', '#00ffff', '#0066ff', '#3300ff', '#cc00ff', '#ff0099'],
paletteOnly: true
});
namedColorsOnly Mit diesem Parameter wird die Farbauswahl auf die 'Named Colors'-Palette beschränkt. Die Farbeingabe als Hexadezimalwert wird dann auch hier unterbunden. boolean :
true,
false
$('#named-colors').PickSlide({
namedColorsOnly: true
});
noPanel Über diesen Parameter wird die Anzeige des Farb-Panels unterdrückt. Die Extras, also die Buttons zum Erstellen von Variationen einer Farbe und zum Aufrufen der 'Named Colors', werden ebenfalls verborgen. Gleichzeitig wird die Breite des Colorpickers verringert. boolean :
true,
false
$('#no-panel').PickSlide({
noPanel: true
});
setStyle Über diese Option können bestimmte Gestaltungstemplates übernommen werden, die platzsparend sind. Einige Parameter-Einstellungen werden damit überflüssig bzw. überschrieben.
Weitere Beispiele
string :
minimal,
minimal-alpha,
minimal-hsl,
minimal-rgb,
minimal-hsla,
minimal-rgba,
minimal-hsl-no-panel,
minimal-rgb-no-panel,
minimal-hsla-no-panel,
minimal-rgba-no-panel,
minimal-palette
false
$('#set-style').PickSlide({
setStyle: 'minimal-hsla-no-panel'
});
onChange Über diesen Parameter kann man eine Callback-Funktion einbinden. Bei einer Farbauswahl wird diese Funktion dann ausgeführt. Dabei kann man direkt auf die Farbwerte in den Formaten hsla, rgba und hex und die 'History' zugreifen und diese Werte dann weiterverarbeiten. Ausserdem enthält die Variable count die Anzahl der Farbwerte, die ausgewählt wurden. function(count, hsla(string), rgba(string), hex(string), history(array)){}
$('#on-change').PickSlide({
onChange: function(count, hsla, rgba, 
hex, history) {
alert(hsla+"\n"+rgba+"\n"
+hex+"\n["+history+"]");
}
});
onClick Auch über diesen Parameter kann man eine Callback-Funktion einbinden, wobei man bei Bedarf auf einen Counter zurückgreifen kann, der zählt, wie oft der Colorpicker aufgerufen wurde. Die Funktion wird ausgeführt, ohne den Colorpicker automatisch aufzurufen. Dieser kann aber mit Hilfe von PSID eingeblendet werden. null,
function(count(number)){}
$('#on-click').PickSlide({
onClick: function(count) {
alert(count);
}
});
errorColor Dieser Parameter beinhaltet eine Fehlermeldung, falls eine ungültige Farbangabe gemacht wurde. string:
Das ist kein gültiger Farbwert!\nFolgende Farbangaben sind beispielsweise gültig:\nrgb(255, 0, 0)\nrgb(25%, 50%, 20%)\nrgba(255, 0, 0, 1)\nhsl(120, 100%, 50%)\nhsla(120, 100%, 50%, 0.5)\n#ff00ff\n#ABC
$('#errorColor').PickSlide({
addIcon: true,
initColor: 'rgba(75%, 150, 50, 1)'
});

Voraussetzungen

Um dieses Colorpicker-Plugin nutzen zu können, wird folgendes vorausgesetzt:

jQuery Framework (Version 1.7 oder höher)

jQuery UI

Einbindung

Zunächst muss man jQuery, UI, das Colorpicker-Plugin und die entsprechenden CSS-Dateien im <head>-Bereich einbinden:

<!-- UI CSS Theme -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/smoothness/jquery-ui.css" />
<!-- PickSlide CSS -->
<link rel="stylesheet" type="text/css" href="css/PickSlide.css" />
<!-- PickSlide CSS für IE9 -->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="css/PickSlide-ie9.css" />
<![endif]-->
<!-- JQuery Basic -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js"></script>
<!-- PickSlide Plugin -->
<script type="text/javascript" charset="ISO-8859-1" src="js/jquery.PickSlide.min.js"></script>

Ich habe hier das UI Theme "smoothness" eingebunden, doch der Colorpicker kommt auch mit allen anderen Themen klar. Die gesonderten CSS für den IE9 sind deshalb nötig, weil er nicht so cool wie andere Browser ist nur einfache Verläufe darstellen kann - daher wird hier entsprechend SVG genutzt.

Der Aufruf des Plugin selbst schaut in seiner einfachsten Form dann so aus:

$(document).ready(function(){
	$('#meinElement').PickSlide();
});

Als dazu gehörendes HTML-Element wird man oft ein Input-Feld zum Aufrufen des Plugins wählen, doch es können auch andere Elemente benutzt werden. Es muss übrigens kein ID-Selektor sein, auch mit Klassen funktioniert es, da jeder Colorpicker eine eigene ID besitzt.

<input id="meinElement" type="text" />

Hier die Demo dieses Beispiels:

Weitere Beispiele findet man im Abschnitt Optionen.

Browser-Support

Dieses Colorpicker-Plugin wurde auf einem Windows 7-System mit folgenden Browsern getestet:

  • Firefox 9.0.1
  • Google Chrome 16.x
  • Safari 5.1.2
  • Opera 11.6
  • Internet Explorer 9

Erweiterte Optionen

Neben der eigentlichen Funktion als Colorpicker bietet das Plugin noch weitere Möglichkeiten. So kann man auf die einzelnen Methoden direkt zugreifen.

Innerhalb einer Callback-Funktion kann über this auf eine Methode zugegriffen werden, also etwa so:

$('#myElement').PickSlide({
	onChange : function() {
		var rgb = this.Hex2RGB('ff0000');
	}
});

Ansonsten schaut die Syntax so aus:

var value = $().PickSlide('MethodName', Parameter);

Der Rückgabewert besteht in jedem Fall aus einem Array.

Die Methoden im Überblick

Funktion Parameter Rüchgabewert Beispiel
(1) Mit "Abstufung" ist die Feinheit der Variationsstufung gemeint. Je kleiner der Wert ist, desto feiner sind die Variationsunterschiede.
(2) "Limit" bezieht sich auf die Anzahl der Variationen, die ermittelt werden und gilt jeweils für beide Richtungen. Das heisst, wird das Limit z.B. auf 5 gesetzt, so werden insgesamt 10 Varianten ermittelt. (siehe erstes Beispiel, Limit = 19)
getRGBA()
Ermittlung der RGB(A)-Werte einer Eigenschaft mit Farbangabe bzw. einer RGB(A)-Farbangabe selbst
z.B. $('#myElement').css('background-color') oder rgba(231, 201, 86, 1) array :
[r, g, b, (a)]
alert( $().PickSlide('getRGBA', $(this).css('background-color')) );
Hex2RGB()
Umrechnung von Hexadezimal nach RGB
Hexadezimalwert,
z.B. '#5F9F5F' oder nur '5F9F5F'
array :
[r, g, b]
alert( $().PickSlide('Hex2RGB', '#5F9F5F') );
RGB2Hex()
Umrechnung von RGB nach Hexadezimal
RGB-Werte,
z.B. 95, 159, 95
array :
['XXXXXX', '#XXXXXX']
alert( $().PickSlide('RGB2Hex', 95, 159, 95) );
RGB2HSL()
Umrechnung von RGB nach HSL
RGB(A)-Werte,
z.B. 95, 159, 95, 0.5
array :
[h, s, l, (a)]
alert( $().PickSlide('RGB2HSL', 95, 159, 95) );
HSL2RGB()
Umrechnung von HSL nach RGB
HSL(A)-Werte,
z.B. 120, 25, 50, 0.5
array :
[r, g, b, (a)]
alert( $().PickSlide('HSL2RGB', 120, 25, 50) );
AnalogHue()
Farbtonvariationen eines Farbwertes
RGBA-Werte, Abstufung(1), Limit(2)
z.B. 95, 159, 95, 1, 0.5, 2
array :
Der Rückgabewert ist ein mehrdimensionales Array mit HSLA-Werten
alert( $().PickSlide('AnalogHue', 95, 159, 95, 1, 0.5, 2) );
AnalogSat()
Sättigungsvariationen eines Farbwertes
RGBA-Werte, Abstufung(1), Limit(2)
z.B. 95, 159, 95, 1, 1.5, 2
array :
Der Rückgabewert ist ein mehrdimensionales Array mit HSLA-Werten
alert( $().PickSlide('AnalogSat', 95, 159, 95, 1, 1.5, 2) );
AnalogLight()
Helligkeitsvariationen eines Farbwertes
RGBA-Werte, Abstufung(1), Limit(2)
z.B. 95, 159, 95, 1, 1.5, 2
array :
Der Rückgabewert ist ein mehrdimensionales Array mit HSLA-Werten
alert( $().PickSlide('AnalogLight', 95, 159, 95, 1, 1.5, 2) );
AnalogRed()
Rotanteil-Variationen eines Farbwertes
RGBA-Werte, Abstufung(1), Limit(2)
z.B. 95, 159, 95, 1, 1.5, 2
array :
Der Rückgabewert ist ein mehrdimensionales Array mit RGBA-Werten
alert( $().PickSlide('AnalogRed', 95, 159, 95, 1, 1.5, 2) );
AnalogGreen()
Grünanteil-Variationen eines Farbwertes
RGBA-Werte, Abstufung(1), Limit(2)
z.B. 95, 159, 95, 1, 1.5, 2
array :
Der Rückgabewert ist ein mehrdimensionales Array mit RGBA-Werten
alert( $().PickSlide('AnalogGreen', 95, 159, 95, 1, 1.5, 2) );
AnalogBlue()
Blauanteil-Variationen eines Farbwertes
RGBA-Werte, Abstufung(1), Limit(2)
z.B. 95, 159, 95, 1, 1.5, 2
array :
Der Rückgabewert ist ein mehrdimensionales Array mit RGBA-Werten
alert( $().PickSlide('AnalogBlue', 95, 159, 95, 1, 1.5, 2) );
getTriadic()
Triadisches Basis-Farbschema eines Farbwertes
RGBA-Werte
z.B. 95, 159, 95, 1
array :
Das Array enthält folgende HSLA-Werte:
Farbton(Hue)-120°, Farbton(Hue)+120°, Farbton(Hue), Farbsättigung(Saturation), Hellwert(Lightness), Alpha-Wert
alert( $().PickSlide('getTriadic', 95, 159, 95, 1) );
getSquare()
Tetradisches Basis-Farbschema eines Farbwertes
RGBA-Werte
z.B. 95, 159, 95, 1
array :
Das Array enthält folgende HSLA-Werte:
Farbton(Hue)+90°, Farbton(Hue)+180°, Farbton(Hue)+270°, Farbton(Hue), Farbsättigung(Saturation), Hellwert(Lightness), Alpha-Wert
alert( $().PickSlide('getSquare', 95, 159, 95, 1) );
getSplitComplements()
Komplementärfarbe eines Farbwertes und dessen Splits
RGBA-Werte
z.B. 95, 159, 95, 1
array :
Das Array enthält folgende HSLA-Werte:
Farbton(Hue)-150°, Farbton(Hue)+150°, Farbton(Hue)+180° (Komplementärfarbe), Farbton(Hue), Farbsättigung(Saturation), Hellwert(Lightness), Alpha-Wert
alert( $().PickSlide('getSplit Complements', 95, 159, 95, 1) );
PSdestroy()
Der Einsatz dieser Methode ergibt nur einen Sinn, wenn sie innerhalb einer Callback-Funktion eingesetzt wird und löscht den zum Caller gehörigen Colorpicker, dessen Data sowie ein eventuell definiertes Icon.
--- ---
$('#ps-destroy').PickSlide({
addIcon: true,
onChange: function() {
this.PSdestroy();
}
});

Beispiel

Im folgenden Beispiel werden in einer Callback-Funktion verschiedene Methoden genutzt, um Variationen des ausgewählten Farbwertes ermitteln zu können. (Quellcode)

PSID

Für jeden PickSlide-Call wird ein entsprechender Colorpicker generiert, der eine eigene ID besitzt - die PSID. Die ist recht nützlich, wenn man z.B. in einem onClick-Callback einige Aktionen ausführen lassen, danach aber auch den Colorpicker einblenden möchte (was er normalerweise nicht macht). Das folgende Beispiel führt in einem Callback zunächst einen einfachen alert() aus und ruft dann den Colorpicker auf.


$('#psid-callback-1').PickSlide({
	addIcon: true,
	onClick: function(count) {
		alert('Sie rufen diesen Colorpicker jetzt zum ' + count + 'ten Mal auf...');
		$(PSID).fadeIn('slow');
	}
});

Des Weiteren lassen sich über die PSID sämtliche Parameter abfragen und teilweise auch ändern. Die Optionen werden jeweils unter ihrem Namen in einer data()-Funktion zwischengespeichert. Gewöhnlich wird man das wohl nicht benötigen, aber unter Umständen kann es vielleicht nützlich sein. Beispiel:


$('#psid-callback-2').PickSlide({
	addIcon: true,
	onClick: function(count) {
		alert( $(PSID).data('colorFormat') );
		$(PSID).fadeIn('slow');
	}
});

Feedback

Eure Meinungen, Kritiken, Anregungen, Fehlermeldungen und Verbesserungsvorschläge zu PickSlide sind natürlich sehr willkommen. Schreibt mir bitte an folgende Adresse : fumar.porros[at]web.de

Download

PickSlide Pack (Code, CSS, Images, Demo)

PickSlide Code

PickSlide Code, minimiert

Creative Commons Lizenzvertrag

Dieses Werk bzw. Inhalt steht unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Übersicht

Hier kann man sich einen Überblick der Funktionsweise von PickSlide verschaffen. Dazu muss man einfach nur die Markierungen in der Grafik rechts anklicken.

1

Das Picker Panel ist das Areal, in welchem mit der Maus Farbsättigung (Saturation) und Hellwert (Lightness) gewählt werden kann.

2

Mit Hilfe dieser Slider kann man recht bequem Farbwerte einstellen.
Die oberen drei Schieberegler beziehen sich auf den HSL-Farbraum (Farbton, Farbsättigung und Hellwert), die unteren drei auf den RGB-Farbraum (Rot-, Grün- und Blauanteil). Mit dem mittleren Slider lässt sich der Alpha-Channel, also die Transparenz, ändern. Ist ein Slider aktiv - also etwa dann, wenn er angeklickt wurde -, können Werte auch über die Pfeil-Tasten eingestellt werden.

3

Dieser Bereich zeigt entweder die aktuell ausgewählte Farbe oder die Ergebnisse der Funktionen aus dem Sonderbereich an.

4

Hier wird die Farbe angezeigt, die vor Aufruf des Colorpickers definiert war.

5

Dieser Sonderbereich beinhaltet unter anderem Buttons, über die Funktionen zum Variieren der ausgewählten Farbe aufrufen werden. Die Ergebnisse werden in dem Anzeigefeld der aktuell ausgewählten Farbe (siehe Markierung 3) präsentiert und können dort wiederum angeklickt werden.

5a

Funktionsaufruf, um Variationen des Farbtons (Hue) zu erzeugen.

5b

Funktionsaufruf, um Variationen der Sättigung (Saturation) zu erzeugen.

5c

Funktionsaufruf, um Variationen des Hellwertes (Lightness) zu erzeugen.

5d

Funktionsaufruf, um Variationen des Rotanteils zu erzeugen.

5e

Funktionsaufruf, um Variationen des Grünanteils zu erzeugen.

5f

Funktionsaufruf, um Variationen des Blauanteils zu erzeugen.

5g

Über diesen Button wird eine vordefinierte Palette ein- oder ausgeblendet. Wenn nicht anders vorgegeben, besteht diese Palette aus den "Named Colors". Die Palette wird auch dann ausgeblendet, wenn ein Slider betätigt wird oder eine hexadezimale Eingabe erfolgt.

5h

Funktionsaufruf, um ein triadisches Basis-Farbschema zum ausgewählten Farbwert zu ermitteln.

5i

Funktionsaufruf, um ein tetradisches Basis-Farbschema zum ausgewählten Farbwert zu ermitteln.

5j

Funktion, mit deren Hilfe die komplementäre Farbe sowie deren Splitvarianten zum ausgewählten Farbwert ermittelt wird.

5k

Über diesen Slider kann man die Feinheit der Variationsstufen für die Funktionen 5a bis 5f beeinflussen. Je kleiner der Wert, desto feiner sind die Abstufungen.

6

Jeder Farbwert, der einmal ausgewählt wurde, wird intern gespeichert. Bei jedem erneuten Aufruf des Colorpickers werden diese Werte hier optional als "History" angezeigt und können auch per Klick übernommen werden.

7

Hier wird die aktuelle Farbauswahl in den üblichen Schreibweisen angezeigt (Hexadezimal, RGBA, HSLA). Das Input-Feld mit dem hexadezimalen Wert kann natürlich geändert werden.

8

Durch Anklicken dieses Buttons wird der Colorpicker geschlossen, eventuell vorgenommene Auswahlen werden ignoriert.

9

Mit einem Klick auf diesen Button wird die Farbauswahl bestättigt, der Colorpicker wird geschlossen und der ausgewählte Wert wird gemäss den Vorgaben weiterverarbeitet.

Weitere Beispiele

setStyle

Über den Parameter setStyle können durch Angabe eines Keywords bestimmte Gestaltungstemplates übernommen werden, die ein wenig platzsparender sind. Einige Parameter-Einstellungen werden damit überflüssig bzw. überschrieben.

setStyle : 'minimal' 

setStyle : 'minimal-alpha' 

setStyle : 'minimal-hsla' 

setStyle : 'minimal-rgba' 

setStyle : 'minimal-hsl' 

setStyle : 'minimal-rgb' 

setStyle : 'minimal-hsla-no-panel' 

setStyle : 'minimal-rgba-no-panel' 

setStyle : 'minimal-hsl-no-panel' 

setStyle : 'minimal-rgb-no-panel' 

setStyle : 'minimal-palette' 

setStyle : 'minimal-palette', 
setPalette: ['#ff9900', '#ccff00', '#33ff00', '#00ff66', '#00ffff', '#0066ff', '#3300ff', '#cc00ff', '#ff0099'] 

Config-Editor

Mit diesem kleinen Tool lassen sich fast alle Parameter von PickSlide bequem und schnell einstellen. Voreingestellt sind die Default-Werte. In der Vorschau kann man "seinen" Colorpicker überprüfen. Der entsprechende jQuery-Code wird darunter angezeigt. Es werden nur die Parameter gelistet, die nicht mit den Default-Werten übereinstimmen.
Bitte beachte, das sich Parameter ergänzen oder ausschliessen können! Mehr dazu in den Optionen.