Pickit Color - Modern Color Picker Demo & Documentation

🚀 Quick Start

Der ColorPicker initialisiert sich automatisch! Füge einfach das data-colorpicker Attribut zu deinen Input-Feldern hinzu:

<!-- CSS einbinden -->
<link rel="stylesheet" href="dist/colorpicker.css">

<!-- ColorPicker per Attribut initialisieren -->
<input type="text" data-colorpicker="format:hex" value="#3b82f6">

<!-- JavaScript einbinden (am Ende des Body) -->
<script src="dist/colorpicker.js"></script>

Live Demo - Auto-Init per Attribut

HEX Format

Standard Farbwahl

<input data-colorpicker="format:hex">

HEX mit Alpha

8-stelliges HEX (#RRGGBBAA)

<input data-colorpicker="format:hex,alpha:true">

RGB mit Alpha

Transparenz-Unterstützung

<input data-colorpicker="format:rgb,alpha:true">

HSL Format

Hue-Saturation-Lightness

<input data-colorpicker="format:hsl,alpha:true">

HSL Slider-Modus

Einzelne Slider für H, S, L, A

<input 
  data-colorpicker="format:hsl,sliderMode:true,alpha:true">

Compact Mode

Für Formulare

<input data-colorpicker="format:hex,compact:true">

Mit EyeDropper

Picker mit Bildschirm-Pipette

<input data-colorpicker="format:hex,eyeDropper:true">

Presets Only

Nur vordefinierte Farben

<input 
  data-colorpicker="format:hex,presets:true"
  data-preset-colors="#3b82f6,#10b981,...">

List View

Mit Labels

<input 
  data-colorpicker="presets:true,list:true"
  data-preset-colors="...">

List View + Compact

Button mit Liste & Labels

<input id="myPicker">
<script>
  colorpicker('#myPicker', {
    compact: true,
    listView: true,
    presetsOnly: true,
    presetColors: [...],
    presetLabels: ['Primary Color', ...]
  });
</script>

Input Preview Mode

Farbquadrat visuell im Input integriert

<input data-colorpicker="format:hex,showAlpha:true,inputPreview:true">

🎨 Live Theme: Hintergrund

Hintergrundfarbe live ändern

Live Vorschau-Bereich

<input data-colorpicker="format:hex,target:#theme-bg-target-de,property:background-color">

🎨 Live Theme: Textfarbe

Textfarbe live ändern

Live Text Vorschau

<input data-colorpicker="format:hex,target:#theme-text-target-de,property:color">

🌍 Mehrsprachig

Sprache manuell setzen oder automatisch erkennen

<input data-colorpicker="format:hex,language:de">
<!-- Auto-Erkennung aus <html lang="de"> oder Browser -->

Unterstützt: de (Deutsch), en (English), si (Slovenščina)

Inline Mode

Immer sichtbar, passt sich Container-Breite an

<div style="max-width: 800px;">
  <input data-colorpicker="format:hex,inline:true">
</div>

📋 Attribut-Referenz

Konfiguriere den ColorPicker direkt im HTML mit data-colorpicker:

Attribut	Werte	Beschreibung
`format`	hex, rgb, hsl	Farbformat für die Ausgabe
`alpha`	true, false	Alpha-Kanal (Transparenz) aktivieren
`compact`	true, false	Kompakte Button-Ansicht für Formulare
`inline`	true, false	Immer sichtbar (kein Popup)
`presets`	true, false	Nur vordefinierte Farben anzeigen
`list`	true, false	Presets als Liste mit Labels

Beispiele

<!-- HEX mit Alpha -->
<input data-colorpicker="format:hex,alpha:true">

<!-- Compact für Formulare -->
<input data-colorpicker="format:rgb,compact:true">

<!-- Nur Presets -->
<input 
  data-colorpicker="presets:true"
  data-preset-colors="#ff0000,#00ff00,#0000ff">

<!-- Kombination mehrerer Optionen -->
<input data-colorpicker="format:hsl,alpha:true,compact:true">

💻 JavaScript API

Für erweiterte Konfiguration kannst du den ColorPicker auch programmatisch initialisieren:

Manuelle Initialisierung

import colorpicker from 'pickit/colorpicker';

// Per Selektor
const picker = colorpicker('#myInput', {
  format: 'hex',
  showAlpha: true,
  onChange: (color) => {
    console.log('Farbe geändert:', color);
  }
});

// Per Element
const input = document.querySelector('#myInput');
const picker2 = colorpicker(input, {
  format: 'rgb',
  compact: true
});

Optionen

Option	Typ	Standard	Beschreibung
`format`	string	'hex'	Ausgabeformat: 'hex', 'rgb', 'hsl'
`defaultColor`	string	'#3b82f6'	Standardfarbe beim Laden
`showAlpha`	boolean	false	Alpha-Slider anzeigen
`sliderMode`	boolean	false	Einzelne Slider für H, S, L statt 2D-Picker
`eyeDropper`	boolean	false	Bildschirm-Pipette (Chrome/Safari/Edge)
`presetColors`	string[]	[...]	Array mit vordefinierten Farben
`presetLabels`	string[]	[]	Labels für Preset-Farben
`presetsOnly`	boolean	false	Nur Presets, keine Farbwahl
`listView`	boolean	false	Presets als Liste mit Labels
`compact`	boolean	false	Kompakte Button-Ansicht
`inline`	boolean	false	Immer sichtbar
`inputPreview`	boolean	false	Farbquadrat im Input
`onChange`	function	-	Callback bei Farbänderung
`onOpen`	function	-	Callback beim Öffnen
`onClose`	function	-	Callback beim Schließen

Methoden

// Farbe setzen
picker.setColor('#ff0000');

// Farbe auslesen
const currentColor = picker.getColor(); // "#ff0000"

// Öffnen/Schließen
picker.open();
picker.close();
picker.toggle();

// Zerstören
picker.destroy();

// Instanz abrufen
const instance = ColorPicker.getInstance(element);

🎯 Erweiterte Beispiele

1. Theme-Farbpalette mit Labels

const themePicker = colorpicker('#theme-color', {
  format: 'hex',
  listView: true,
  presetsOnly: true,
  presetColors: [
    '#3b82f6',
    '#10b981',
    '#f59e0b',
    '#ef4444',
    '#8b5cf6',
    '#ec4899'
  ],
  presetLabels: [
    'Primary Color',
    'Success Color',
    'Warning Color',
    'Danger Color',
    'Secondary Color',
    'Accent Color'
  ],
  onChange: (color) => {
    document.documentElement.style.setProperty('--theme-color', color);
  }
});

2. Live Background Color

colorpicker('#bg-color', {
  format: 'rgb',
  showAlpha: true,
  onChange: (color) => {
    document.body.style.backgroundColor = color;
  }
});

3. Form Integration (Compact Mode)

<form>
  <label>Brand Color</label>
  <input 
    type="text" 
    name="brand_color"
    data-colorpicker="format:hex,compact:true"
    value="#3b82f6">
  
  <button type="submit">Speichern</button>
</form>

4. Inline ColorPicker (volle Breite)

<div style="max-width: 500px;">
  <input 
    type="text" 
    data-colorpicker="format:hex,inline:true"
    value="#3b82f6">
</div>

<!-- Picker passt sich der Container-Breite an! -->

5. Multiple Pickers mit Class

<!-- HTML -->
<input class="colorpicker" data-format="hex">
<input class="colorpicker" data-format="rgb" data-alpha="true">
<input class="colorpicker" data-format="hsl">

<!-- Automatisch initialisiert! -->

6. Eigene Übersetzung hinzufügen

import colorpicker, { ColorPicker } from 'pickit-color';

// Französische Übersetzung hinzufügen
ColorPicker.addTranslation('fr', {
  hue: 'Teinte',
  saturation: 'Saturation et luminosité',
  lightness: 'Luminosité',
  alpha: 'Alpha',
  presets: 'Couleurs prédéfinies',
  eyeDropper: 'Pipette à couleurs',
  systemPicker: 'Sélecteur système'
});

// Verfügbare Sprachen prüfen
console.log(ColorPicker.getAvailableLanguages());
// ['en', 'de', 'sl', 'fr']

// Neue Übersetzung verwenden
colorpicker('#color-input', {
  format: 'hex',
  language: 'fr'
});

✨ Features

🎨 Farbformate

HEX, RGB, RGBA, HSL, HSLA mit vollständiger Konvertierung

⚡ Auto-Init

Automatische Initialisierung per Attribut - kein JavaScript nötig

♿ Accessibility

WCAG 2.1 AA konform mit Keyboard-Navigation und ARIA-Labels

🌓 Dark Mode

Automatische Anpassung an prefers-color-scheme

📦 Compact Mode

Platzsparende Button-Ansicht für Formulare

🎯 Preset Colors

Vordefinierte Farbpaletten mit optionalen Labels

⌨️ Keyboard Support

Tab, Enter, Pfeiltasten, Escape - vollständig bedienbar

🔧 Lightweight

~13KB minifiziert, keine Abhängigkeiten

⌨️ Tastatur-Shortcuts

Taste	Aktion
`Tab`	Fokus auf Input-Feld
`Enter / Space`	Picker öffnen/schließen
`↑ ↓ ← →`	Farbe im Picker anpassen
`Shift + Pfeiltasten`	Größere Schritte
`Escape`	Picker schließen

Made with ❤️ by Thomas Skerbis (KLXM Crossmedia)

This software is Donationware • Support Development

GitHub • Issues • License

TS Pickit Color