Pickit Color - Modern Color Picker Demo & Documentation

🚀 Quick Start

The ColorPicker initializes automatically! Simply add the data-colorpicker attribute to your input fields:

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

<!-- Initialize ColorPicker via attribute -->
<input type="text" data-colorpicker="format:hex" value="#3b82f6">

<!-- Include JavaScript (at the end of the body) -->
<script src="dist/colorpicker.js"></script>

Live Demo - Auto-Init via Attribute

HEX Format

Standard color selection

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

HEX with Alpha

8-digit HEX (#RRGGBBAA)

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

RGB with Alpha

Transparency support

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

HSL Format

Hue-Saturation-Lightness

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

HSL Slider Mode

Individual sliders for H, S, L, A

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

Compact Mode

For forms

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

With EyeDropper

Picker with screen color pipette

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

Presets Only

Predefined colors only

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

List View

With labels

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

List View + Compact

Button with list & labels

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

Input Preview Mode

Color square visually integrated in input

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

🎨 Live Theme: Background

Change background color live

Live Preview Area

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

🎨 Live Theme: Text Color

Change text color live

Live Text Preview

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

🌍 Multilanguage

Set language manually or auto-detect from HTML

<input data-colorpicker="format:hex,language:de">
<!-- Auto-detects from <html lang="en"> or browser -->

Supports: de (Deutsch), en (English), si (Slovenščina)

Inline Mode

Always visible, adapts to container width

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

📋 Attribute Reference

Configure the ColorPicker directly in HTML with data-colorpicker:

Attribute	Values	Description
`format`	hex, rgb, hsl	Color format for output
`alpha`	true, false	Enable alpha channel (transparency)
`compact`	true, false	Compact button view for forms
`inline`	true, false	Always visible (no popup)
`presets`	true, false	Show predefined colors only
`list`	true, false	Presets as list with labels

Examples

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

<!-- Compact for forms -->
<input data-colorpicker="format:rgb,compact:true">

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

<!-- Combination of multiple options -->
<input data-colorpicker="format:hsl,alpha:true,compact:true">

💻 JavaScript API

For advanced configuration, you can also initialize the ColorPicker programmatically:

Manual Initialization

import colorpicker from 'pickit/colorpicker';

// By selector
const picker = colorpicker('#myInput', {
  format: 'hex',
  showAlpha: true,
  onChange: (color) => {
    console.log('Color changed:', color);
  }
});

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

Options

Option	Type	Default	Description
`format`	string	'hex'	Output format: 'hex', 'rgb', 'hsl'
`defaultColor`	string	'#3b82f6'	Default color on load
`showAlpha`	boolean	false	Show alpha slider
`sliderMode`	boolean	false	Individual sliders for H, S, L instead of 2D picker
`eyeDropper`	boolean	false	Screen color pipette (Chrome/Safari/Edge)
`presetColors`	string[]	[...]	Array with predefined colors
`presetLabels`	string[]	[]	Labels for preset colors
`presetsOnly`	boolean	false	Presets only, no color selection
`listView`	boolean	false	Presets as list with labels
`compact`	boolean	false	Compact button view
`inline`	boolean	false	Always visible
`inputPreview`	boolean	false	Color square in input
`onChange`	function	-	Callback on color change
`onOpen`	function	-	Callback on open
`onClose`	function	-	Callback on close

Methods

// Set color
picker.setColor('#ff0000');

// Get color
const currentColor = picker.getColor(); // "#ff0000"

// Open/Close
picker.open();
picker.close();
picker.toggle();

// Destroy
picker.destroy();

// Get instance
const instance = ColorPicker.getInstance(element);

🎯 Advanced Examples

1. Theme Color Palette with 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">Save</button>
</form>

4. Inline ColorPicker (full width)

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

<!-- Picker adapts to container width! -->

5. Multiple Pickers with Class

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

<!-- Automatically initialized! -->

6. Add Custom Translation

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

// Add French translation
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'
});

// Check available languages
console.log(ColorPicker.getAvailableLanguages());
// ['en', 'de', 'sl', 'fr']

// Use new translation
colorpicker('#color-input', {
  format: 'hex',
  language: 'fr'
});

✨ Features

🎨 Color Formats

HEX, RGB, RGBA, HSL, HSLA with full conversion

⚡ Auto-Init

Automatic initialization via attribute - no JavaScript needed

♿ Accessibility

WCAG 2.1 AA compliant with keyboard navigation and ARIA labels

🌓 Dark Mode

Automatic adaptation to prefers-color-scheme

📦 Compact Mode

Space-saving button view for forms

🎯 Preset Colors

Predefined color palettes with optional labels

⌨️ Keyboard Support

Tab, Enter, Arrow keys, Escape - fully operable

🔧 Lightweight

~13KB minified, no dependencies

⌨️ Keyboard Shortcuts

Key	Action
`Tab`	Focus on input field
`Enter / Space`	Open/close picker
`↑ ↓ ← →`	Adjust color in picker
`Shift + Arrow keys`	Larger steps
`Escape`	Close picker

Made with ❤️ by Thomas Skerbis (KLXM Crossmedia)

This software is Donationware • Support Development

GitHub • Issues • License

TS Pickit Color