UI.BlueStack.io - Component Library

color-picker Component

Color Picker System

A comprehensive color selection component with multiple input methods including swatches, sliders, text inputs, and advanced features like gradients and color harmonies. Use class="color-picker" with various modifiers for different styles.

Basic Color Input

Tiny

Small

Default

Large

Big

<div class="flex gap-4 flex-wrap items-center">
                <div class="color-picker tiny inline">
                    <input type="color" value="#10B981">
                    <span class="label">Tiny</span>
                </div>
                <div class="color-picker small inline">
                    <input type="color" value="#3B82F6">
                    <span class="label">Small</span>
                </div>
                <div class="color-picker inline">
                    <input type="color" value="#8B5CF6">
                    <span class="label">Default</span>
                </div>
                <div class="color-picker large inline">
                    <input type="color" value="#EC4899">
                    <span class="label">Large</span>
                </div>
                <div class="color-picker big inline">
                    <input type="color" value="#F59E0B">
                    <span class="label">Big</span>
                </div>
            </div>

<div class="flex gap-4 flex-wrap items-center">
                <div class="color-picker tiny inline">
                    <input type="color" value="#10B981">
                    <span class="label">Tiny</span>
                </div>
                <div class="color-picker small inline">
                    <input type="color" value="#3B82F6">
                    <span class="label">Small</span>
                </div>
                <div class="color-picker inline">
                    <input type="color" value="#8B5CF6">
                    <span class="label">Default</span>
                </div>
                <div class="color-picker large inline">
                    <input type="color" value="#EC4899">
                    <span class="label">Large</span>
                </div>
                <div class="color-picker big inline">
                    <input type="color" value="#F59E0B">
                    <span class="label">Big</span>
                </div>
            </div>

Swatch Picker

#3B82F6

<div class="color-picker inline" data-value="#3B82F6">
                <div class="trigger">
                    <div class="preview" style="background-color: #3B82F6"></div>
                    <span class="value">#3B82F6</span>
                    <i class="icon chevron-down w-4 h-4"></i>
                </div>
                <div class="dropdown">
                    <div class="swatches">
                        <div class="swatch-group">
                            <div class="swatch" data-color="#EF4444" style="background-color: #EF4444" title="Red"></div>
                            <div class="swatch" data-color="#F97316" style="background-color: #F97316" title="Orange"></div>
                            <div class="swatch" data-color="#F59E0B" style="background-color: #F59E0B" title="Amber"></div>
                            <div class="swatch" data-color="#EAB308" style="background-color: #EAB308" title="Yellow"></div>
                            <div class="swatch" data-color="#84CC16" style="background-color: #84CC16" title="Lime"></div>
                            <div class="swatch" data-color="#22C55E" style="background-color: #22C55E" title="Green"></div>
                            <div class="swatch" data-color="#10B981" style="background-color: #10B981" title="Emerald"></div>
                            <div class="swatch" data-color="#14B8A6" style="background-color: #14B8A6" title="Teal"></div>
                            <div class="swatch" data-color="#06B6D4" style="background-color: #06B6D4" title="Cyan"></div>
                            <div class="swatch" data-color="#0EA5E9" style="background-color: #0EA5E9" title="Sky"></div>
                            <div class="swatch" data-color="#3B82F6" style="background-color: #3B82F6" title="Blue"></div>
                            <div class="swatch" data-color="#6366F1" style="background-color: #6366F1" title="Indigo"></div>
                            <div class="swatch" data-color="#8B5CF6" style="background-color: #8B5CF6" title="Violet"></div>
                            <div class="swatch" data-color="#A855F7" style="background-color: #A855F7" title="Purple"></div>
                            <div class="swatch" data-color="#D946EF" style="background-color: #D946EF" title="Fuchsia"></div>
                            <div class="swatch" data-color="#EC4899" style="background-color: #EC4899" title="Pink"></div>
                            <div class="swatch" data-color="#F43F5E" style="background-color: #F43F5E" title="Rose"></div>
                            <div class="swatch" data-color="#6B7280" style="background-color: #6B7280" title="Gray"></div>
                        </div>
                    </div>
                </div>
            </div>

Recent Colors

Recently Used

<div class="recent-colors">
                <label class="text-sm font-medium text-gray-600 mb-2 block">Recently Used</label>
                <div class="recent-swatches flex gap-2">
                    <div class="swatch w-8 h-8" style="background-color: #3B82F6"></div>
                    <div class="swatch w-8 h-8" style="background-color: #10B981"></div>
                    <div class="swatch w-8 h-8" style="background-color: #F59E0B"></div>
                    <div class="swatch w-8 h-8" style="background-color: #EF4444"></div>
                    <div class="swatch w-8 h-8" style="background-color: #8B5CF6"></div>
                    <div class="swatch w-8 h-8" style="background-color: #EC4899"></div>
                    <div class="swatch w-8 h-8" style="background-color: #14B8A6"></div>
                    <div class="swatch w-8 h-8" style="background-color: #6B7280"></div>
                </div>
            </div>

Advanced Color Picker

Full Color Panel

Hue 220°

Saturation 93%

Lightness 61%

Alpha 100%

Blue 500

AA AAA

Base Color

Harmony

<div class="color-picker advanced panel max-w-md">
                <div class="picker-header">
                    <div class="tabs">
                        <button class="tab active" data-tab="solid">Solid</button>
                        <button class="tab" data-tab="gradient">Gradient</button>
                        <button class="tab" data-tab="palette">Palette</button>
                    </div>
                    <button class="eyedropper-btn" title="Pick color from screen">
                        <i class="icon pipette w-5 h-5"></i>
                    </button>
                </div>

                <div class="picker-body">
                    
                    <div class="tab-content active" data-tab="solid">
                        <div class="color-wheel-container">
                            <canvas class="color-wheel" width="200" height="200"></canvas>
                            <div class="wheel-cursor"></div>
                        </div>

                        <div class="sliders">
                            <div class="slider-group">
                                <label>Hue</label>
                                <input type="range" class="hue-slider" min="0" max="360" value="220">
                                <span class="value">220°</span>
                            </div>
                            <div class="slider-group">
                                <label>Saturation</label>
                                <input type="range" class="saturation-slider" min="0" max="100" value="93">
                                <span class="value">93%</span>
                            </div>
                            <div class="slider-group">
                                <label>Lightness</label>
                                <input type="range" class="lightness-slider" min="0" max="100" value="61">
                                <span class="value">61%</span>
                            </div>
                            <div class="slider-group">
                                <label>Alpha</label>
                                <input type="range" class="alpha-slider" min="0" max="100" value="100">
                                <span class="value">100%</span>
                            </div>
                        </div>

                        <div class="preview-section">
                            <div class="preview-large" style="background-color: #3B82F6"></div>
                            <div class="preview-info">
                                <div class="color-name">Blue 500</div>
                                <div class="contrast-info">
                                    <span>AA</span>
                                    <span>AAA</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    
                    <div class="tab-content" data-tab="gradient">
                        <div class="gradient-preview h-24 rounded-lg mb-4" style="background: linear-gradient(90deg, #3B82F6, #8B5CF6)"></div>
                        <div class="gradient-track mb-4">
                            <div class="gradient-stop" data-position="0" data-color="#3B82F6" style="left: 0%; background-color: #3B82F6"></div>
                            <div class="gradient-stop" data-position="100" data-color="#8B5CF6" style="left: 100%; background-color: #8B5CF6"></div>
                        </div>
                        <div class="gradient-controls flex gap-2">
                            <select class="gradient-type flex-1">
                                <option value="linear">Linear</option>
                                <option value="radial">Radial</option>
                                <option value="conic">Conic</option>
                            </select>
                            <input type="number" class="gradient-angle w-20" value="90" min="0" max="360" placeholder="Angle">
                            <button class="button small">Add Stop</button>
                        </div>
                    </div>

                    
                    <div class="tab-content" data-tab="palette">
                        <div class="flex items-center gap-3 mb-3">
                            <label class="text-sm font-medium text-gray-700 w-24">Base Color</label>
                            <input type="color" value="#3B82F6" class="w-12 h-12">
                        </div>
                        <div class="flex items-center gap-3 mb-4">
                            <label class="text-sm font-medium text-gray-700 w-24">Harmony</label>
                            <select class="flex-1 px-2 py-1 text-sm border border-gray-300 rounded">
                                <option value="complementary">Complementary</option>
                                <option value="triadic">Triadic</option>
                                <option value="tetradic">Tetradic</option>
                                <option value="analogous">Analogous</option>
                                <option value="monochromatic">Monochromatic</option>
                            </select>
                        </div>
                        <div class="palette-colors grid grid-cols-4 gap-2">
                            
                        </div>
                    </div>
                </div>
            </div>

<div class="color-picker advanced panel max-w-md">
                <div class="picker-header">
                    <div class="tabs">
                        <button class="tab active" data-tab="solid">Solid</button>
                        <button class="tab" data-tab="gradient">Gradient</button>
                        <button class="tab" data-tab="palette">Palette</button>
                    </div>
                    <button class="eyedropper-btn" title="Pick color from screen">
                        <i class="icon pipette w-5 h-5"></i>
                    </button>
                </div>

<div class="sliders">
                            <div class="slider-group">
                                <label>Hue</label>
                                <input type="range" class="hue-slider" min="0" max="360" value="220">
                                <span class="value">220°</span>
                            </div>
                            <div class="slider-group">
                                <label>Saturation</label>
                                <input type="range" class="saturation-slider" min="0" max="100" value="93">
                                <span class="value">93%</span>
                            </div>
                            <div class="slider-group">
                                <label>Lightness</label>
                                <input type="range" class="lightness-slider" min="0" max="100" value="61">
                                <span class="value">61%</span>
                            </div>
                            <div class="slider-group">
                                <label>Alpha</label>
                                <input type="range" class="alpha-slider" min="0" max="100" value="100">
                                <span class="value">100%</span>
                            </div>
                        </div>

<div class="tab-content" data-tab="gradient">
                        <div class="gradient-preview h-24 rounded-lg mb-4" style="background: linear-gradient(90deg, #3B82F6, #8B5CF6)"></div>
                        <div class="gradient-track mb-4">
                            <div class="gradient-stop" data-position="0" data-color="#3B82F6" style="left: 0%; background-color: #3B82F6"></div>
                            <div class="gradient-stop" data-position="100" data-color="#8B5CF6" style="left: 100%; background-color: #8B5CF6"></div>
                        </div>
                        <div class="gradient-controls flex gap-2">
                            <select class="gradient-type flex-1">
                                <option value="linear">Linear</option>
                                <option value="radial">Radial</option>
                                <option value="conic">Conic</option>
                            </select>
                            <input type="number" class="gradient-angle w-20" value="90" min="0" max="360" placeholder="Angle">
                            <button class="button small">Add Stop</button>
                        </div>
                    </div>

<div class="tab-content" data-tab="palette">
                        <div class="flex items-center gap-3 mb-3">
                            <label class="text-sm font-medium text-gray-700 w-24">Base Color</label>
                            <input type="color" value="#3B82F6" class="w-12 h-12">
                        </div>
                        <div class="flex items-center gap-3 mb-4">
                            <label class="text-sm font-medium text-gray-700 w-24">Harmony</label>
                            <select class="flex-1 px-2 py-1 text-sm border border-gray-300 rounded">
                                <option value="complementary">Complementary</option>
                                <option value="triadic">Triadic</option>
                                <option value="tetradic">Tetradic</option>
                                <option value="analogous">Analogous</option>
                                <option value="monochromatic">Monochromatic</option>
                            </select>
                        </div>
                        <div class="palette-colors grid grid-cols-4 gap-2">
                            
                        </div>
                    </div>
                </div>
            </div>

Color Format Inputs

HEX

RGB

HSL

<div class="format-inputs space-y-3 max-w-sm">
                <div class="input-row">
                    <label class="text-sm font-medium text-gray-600 w-12">HEX</label>
                    <input type="text" class="hex-input flex-1" value="#3B82F6">
                </div>
                <div class="input-row">
                    <label class="text-sm font-medium text-gray-600 w-12">RGB</label>
                    <div class="rgb-inputs flex gap-2 flex-1">
                        <input type="number" class="r-input" min="0" max="255" value="59" placeholder="R">
                        <input type="number" class="g-input" min="0" max="255" value="130" placeholder="G">
                        <input type="number" class="b-input" min="0" max="255" value="246" placeholder="B">
                    </div>
                </div>
                <div class="input-row">
                    <label class="text-sm font-medium text-gray-600 w-12">HSL</label>
                    <div class="hsl-inputs flex gap-2 flex-1">
                        <input type="number" class="h-input" min="0" max="360" value="220" placeholder="H">
                        <input type="number" class="s-input" min="0" max="100" value="93" placeholder="S">
                        <input type="number" class="l-input" min="0" max="100" value="61" placeholder="L">
                    </div>
                </div>
            </div>

Gradient Builder

Gradient Editor

<div class="gradient-editor space-y-4 max-w-md">
                <div class="gradient-preview h-24 rounded-lg" style="background: linear-gradient(90deg, #3B82F6, #8B5CF6)"></div>
                <div class="gradient-track">
                    <div class="gradient-stop" data-position="0" data-color="#3B82F6"></div>
                    <div class="gradient-stop" data-position="100" data-color="#8B5CF6"></div>
                </div>
                <div class="gradient-controls flex gap-2">
                    <select class="gradient-type">
                        <option value="linear">Linear</option>
                        <option value="radial">Radial</option>
                        <option value="conic">Conic</option>
                    </select>
                    <input type="number" class="gradient-angle" value="90" min="0" max="360" placeholder="Angle">
                    <button class="button small">Add Stop</button>
                </div>
            </div>

Gradient Presets

<div class="grid grid-cols-3 gap-3 max-w-lg">
                <div class="h-20 rounded-lg cursor-pointer hover:scale-105 transition-transform" 
                     style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"></div>
                <div class="h-20 rounded-lg cursor-pointer hover:scale-105 transition-transform" 
                     style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"></div>
                <div class="h-20 rounded-lg cursor-pointer hover:scale-105 transition-transform" 
                     style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"></div>
                <div class="h-20 rounded-lg cursor-pointer hover:scale-105 transition-transform" 
                     style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"></div>
                <div class="h-20 rounded-lg cursor-pointer hover:scale-105 transition-transform" 
                     style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)"></div>
                <div class="h-20 rounded-lg cursor-pointer hover:scale-105 transition-transform" 
                     style="background: linear-gradient(135deg, #30cfd0 0%, #330867 100%)"></div>
            </div>

Color Harmonies

Harmony Generator

Base Color #3B82F6

Harmony

<div class="palette-generator space-y-4 max-w-md">
                <div class="flex items-center gap-3">
                    <label class="text-sm font-medium text-gray-700 w-24">Base Color</label>
                    <input type="color" value="#3B82F6" class="w-12 h-12">
                    <span class="font-mono text-sm">#3B82F6</span>
                </div>
                <div class="flex items-center gap-3">
                    <label class="text-sm font-medium text-gray-700 w-24">Harmony</label>
                    <select class="flex-1">
                        <option value="complementary">Complementary</option>
                        <option value="triadic">Triadic</option>
                        <option value="tetradic">Tetradic</option>
                        <option value="analogous">Analogous</option>
                        <option value="monochromatic">Monochromatic</option>
                    </select>
                </div>
                <div class="palette-colors grid grid-cols-4 gap-2">
                    <div class="h-16 rounded-lg border" style="background-color: #3B82F6"></div>
                    <div class="h-16 rounded-lg border" style="background-color: #F59E0B"></div>
                    <div class="h-16 rounded-lg border" style="background-color: #EF4444"></div>
                    <div class="h-16 rounded-lg border" style="background-color: #8B5CF6"></div>
                </div>
            </div>

<div class="palette-generator space-y-4 max-w-md">
                <div class="flex items-center gap-3">
                    <label class="text-sm font-medium text-gray-700 w-24">Base Color</label>
                    <input type="color" value="#3B82F6" class="w-12 h-12">
                    <span class="font-mono text-sm">#3B82F6</span>
                </div>
                <div class="flex items-center gap-3">
                    <label class="text-sm font-medium text-gray-700 w-24">Harmony</label>
                    <select class="flex-1">
                        <option value="complementary">Complementary</option>
                        <option value="triadic">Triadic</option>
                        <option value="tetradic">Tetradic</option>
                        <option value="analogous">Analogous</option>
                        <option value="monochromatic">Monochromatic</option>
                    </select>
                </div>
                <div class="palette-colors grid grid-cols-4 gap-2">
                    <div class="h-16 rounded-lg border" style="background-color: #3B82F6"></div>
                    <div class="h-16 rounded-lg border" style="background-color: #F59E0B"></div>
                    <div class="h-16 rounded-lg border" style="background-color: #EF4444"></div>
                    <div class="h-16 rounded-lg border" style="background-color: #8B5CF6"></div>
                </div>
            </div>

Color Schemes

Complementary

Triadic

Analogous

<div class="space-y-4">
                <div class="flex items-center gap-3">
                    <span class="text-sm font-medium text-gray-600 w-32">Complementary</span>
                    <div class="flex gap-2">
                        <div class="w-10 h-10 rounded" style="background-color: #3B82F6"></div>
                        <div class="w-10 h-10 rounded" style="background-color: #F59E0B"></div>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <span class="text-sm font-medium text-gray-600 w-32">Triadic</span>
                    <div class="flex gap-2">
                        <div class="w-10 h-10 rounded" style="background-color: #3B82F6"></div>
                        <div class="w-10 h-10 rounded" style="background-color: #F63B82"></div>
                        <div class="w-10 h-10 rounded" style="background-color: #82F63B"></div>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <span class="text-sm font-medium text-gray-600 w-32">Analogous</span>
                    <div class="flex gap-2">
                        <div class="w-10 h-10 rounded" style="background-color: #3B63F6"></div>
                        <div class="w-10 h-10 rounded" style="background-color: #3B82F6"></div>
                        <div class="w-10 h-10 rounded" style="background-color: #3BA0F6"></div>
                    </div>
                </div>
            </div>

<div class="space-y-4">
                <div class="flex items-center gap-3">
                    <span class="text-sm font-medium text-gray-600 w-32">Complementary</span>
                    <div class="flex gap-2">
                        <div class="w-10 h-10 rounded" style="background-color: #3B82F6"></div>
                        <div class="w-10 h-10 rounded" style="background-color: #F59E0B"></div>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <span class="text-sm font-medium text-gray-600 w-32">Triadic</span>
                    <div class="flex gap-2">
                        <div class="w-10 h-10 rounded" style="background-color: #3B82F6"></div>
                        <div class="w-10 h-10 rounded" style="background-color: #F63B82"></div>
                        <div class="w-10 h-10 rounded" style="background-color: #82F63B"></div>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <span class="text-sm font-medium text-gray-600 w-32">Analogous</span>
                    <div class="flex gap-2">
                        <div class="w-10 h-10 rounded" style="background-color: #3B63F6"></div>
                        <div class="w-10 h-10 rounded" style="background-color: #3B82F6"></div>
                        <div class="w-10 h-10 rounded" style="background-color: #3BA0F6"></div>
                    </div>
                </div>
            </div>

Form Integration

Color Picker in Forms

Brand Primary Color

#3B82F6

Background Gradient

Gradient

Theme Colors

Primary

Secondary

Accent

<form class="space-y-4 max-w-md">
                <div class="field">
                    <label class="text-sm font-medium text-gray-700">Brand Primary Color</label>
                    <div class="color-picker inline form-integrated">
                        <input type="hidden" name="brand_color" value="#3B82F6">
                        <div class="trigger">
                            <div class="preview" style="background-color: #3B82F6"></div>
                            <span class="value">#3B82F6</span>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <label class="text-sm font-medium text-gray-700">Background Gradient</label>
                    <div class="color-picker gradient inline form-integrated">
                        <input type="hidden" name="gradient" value="linear-gradient(90deg, #3B82F6, #8B5CF6)">
                        <div class="trigger">
                            <div class="preview" style="background: linear-gradient(90deg, #3B82F6, #8B5CF6)"></div>
                            <span class="value">Gradient</span>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <label class="text-sm font-medium text-gray-700 mb-2 block">Theme Colors</label>
                    <div class="color-picker-group flex gap-3">
                        <div class="color-picker tiny inline">
                            <input type="color" name="primary" value="#3B82F6">
                            <span class="label">Primary</span>
                        </div>
                        <div class="color-picker tiny inline">
                            <input type="color" name="secondary" value="#8B5CF6">
                            <span class="label">Secondary</span>
                        </div>
                        <div class="color-picker tiny inline">
                            <input type="color" name="accent" value="#10B981">
                            <span class="label">Accent</span>
                        </div>
                    </div>
                </div>
            </form>

<form class="space-y-4 max-w-md">
                <div class="field">
                    <label class="text-sm font-medium text-gray-700">Brand Primary Color</label>
                    <div class="color-picker inline form-integrated">
                        <input type="hidden" name="brand_color" value="#3B82F6">
                        <div class="trigger">
                            <div class="preview" style="background-color: #3B82F6"></div>
                            <span class="value">#3B82F6</span>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <label class="text-sm font-medium text-gray-700">Background Gradient</label>
                    <div class="color-picker gradient inline form-integrated">
                        <input type="hidden" name="gradient" value="linear-gradient(90deg, #3B82F6, #8B5CF6)">
                        <div class="trigger">
                            <div class="preview" style="background: linear-gradient(90deg, #3B82F6, #8B5CF6)"></div>
                            <span class="value">Gradient</span>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <label class="text-sm font-medium text-gray-700 mb-2 block">Theme Colors</label>
                    <div class="color-picker-group flex gap-3">
                        <div class="color-picker tiny inline">
                            <input type="color" name="primary" value="#3B82F6">
                            <span class="label">Primary</span>
                        </div>
                        <div class="color-picker tiny inline">
                            <input type="color" name="secondary" value="#8B5CF6">
                            <span class="label">Secondary</span>
                        </div>
                        <div class="color-picker tiny inline">
                            <input type="color" name="accent" value="#10B981">
                            <span class="label">Accent</span>
                        </div>
                    </div>
                </div>
            </form>

Inline Color Fields

Text Color #1F2937

Background #F3F4F6

Border #D1D5DB

<div class="space-y-3">
                <div class="flex items-center gap-3">
                    <label class="text-sm font-medium text-gray-700 w-32">Text Color</label>
                    <input type="color" class="color-picker" value="#1F2937">
                    <span class="font-mono text-sm text-gray-600">#1F2937</span>
                </div>
                <div class="flex items-center gap-3">
                    <label class="text-sm font-medium text-gray-700 w-32">Background</label>
                    <input type="color" class="color-picker" value="#F3F4F6">
                    <span class="font-mono text-sm text-gray-600">#F3F4F6</span>
                </div>
                <div class="flex items-center gap-3">
                    <label class="text-sm font-medium text-gray-700 w-32">Border</label>
                    <input type="color" class="color-picker" value="#D1D5DB">
                    <span class="font-mono text-sm text-gray-600">#D1D5DB</span>
                </div>
            </div>

<div class="space-y-3">
                <div class="flex items-center gap-3">
                    <label class="text-sm font-medium text-gray-700 w-32">Text Color</label>
                    <input type="color" class="color-picker" value="#1F2937">
                    <span class="font-mono text-sm text-gray-600">#1F2937</span>
                </div>
                <div class="flex items-center gap-3">
                    <label class="text-sm font-medium text-gray-700 w-32">Background</label>
                    <input type="color" class="color-picker" value="#F3F4F6">
                    <span class="font-mono text-sm text-gray-600">#F3F4F6</span>
                </div>
                <div class="flex items-center gap-3">
                    <label class="text-sm font-medium text-gray-700 w-32">Border</label>
                    <input type="color" class="color-picker" value="#D1D5DB">
                    <span class="font-mono text-sm text-gray-600">#D1D5DB</span>
                </div>
            </div>

Common Patterns

Color Picker with Preview

Preview Card

This card updates its color based on the picker selection.

<div class="flex items-start gap-4">
                <div class="color-picker inline">
                    <input type="color" value="#8B5CF6">
                </div>
                <div class="flex-1 p-4 rounded-lg border-2 transition-all" 
                     style="border-color: #8B5CF6; background-color: #8B5CF620;">
                    <h3 class="font-semibold" style="color: #8B5CF6">Preview Card</h3>
                    <p class="text-gray-600 mt-1">This card updates its color based on the picker selection.</p>
                </div>
            </div>

Quick Color Selection

Quick Colors

<div class="space-y-2">
                <label class="text-sm font-medium text-gray-700">Quick Colors</label>
                <div class="flex gap-2">
                    <button class="w-10 h-10 rounded border-2 border-transparent hover:border-gray-400" style="background-color: #EF4444"></button>
                    <button class="w-10 h-10 rounded border-2 border-transparent hover:border-gray-400" style="background-color: #F59E0B"></button>
                    <button class="w-10 h-10 rounded border-2 border-transparent hover:border-gray-400" style="background-color: #10B981"></button>
                    <button class="w-10 h-10 rounded border-2 border-transparent hover:border-gray-400" style="background-color: #3B82F6"></button>
                    <button class="w-10 h-10 rounded border-2 border-transparent hover:border-gray-400" style="background-color: #8B5CF6"></button>
                    <button class="w-10 h-10 rounded border-2 border-transparent hover:border-gray-400" style="background-color: #EC4899"></button>
                    <button class="w-10 h-10 rounded border-2 border-transparent hover:border-gray-400" style="background-color: #6B7280"></button>
                    <button class="w-10 h-10 rounded border-2 border-gray-300 hover:border-gray-400 flex items-center justify-center">
                        <i class="icon plus w-5 h-5 text-gray-400"></i>
                    </button>
                </div>
            </div>

<div class="space-y-2">
                <label class="text-sm font-medium text-gray-700">Quick Colors</label>
                <div class="flex gap-2">
                    <button class="w-10 h-10 rounded border-2 border-transparent hover:border-gray-400" style="background-color: #EF4444"></button>
                    <button class="w-10 h-10 rounded border-2 border-transparent hover:border-gray-400" style="background-color: #F59E0B"></button>
                    <button class="w-10 h-10 rounded border-2 border-transparent hover:border-gray-400" style="background-color: #10B981"></button>
                    <button class="w-10 h-10 rounded border-2 border-transparent hover:border-gray-400" style="background-color: #3B82F6"></button>
                    <button class="w-10 h-10 rounded border-2 border-transparent hover:border-gray-400" style="background-color: #8B5CF6"></button>
                    <button class="w-10 h-10 rounded border-2 border-transparent hover:border-gray-400" style="background-color: #EC4899"></button>
                    <button class="w-10 h-10 rounded border-2 border-transparent hover:border-gray-400" style="background-color: #6B7280"></button>
                    <button class="w-10 h-10 rounded border-2 border-gray-300 hover:border-gray-400 flex items-center justify-center">
                        <i class="icon plus w-5 h-5 text-gray-400"></i>
                    </button>
                </div>
            </div>

Color Variables Display

--color-primary: #3B82F6;

--color-success: #10B981;

--color-danger: #EF4444;

<div class="space-y-2 font-mono text-sm">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded" style="background-color: #3B82F6"></div>
                    <span>--color-primary: #3B82F6;</span>
                    <button class="ml-auto">
                        <i class="icon copy w-4 h-4 text-gray-400 hover:text-gray-600"></i>
                    </button>
                </div>
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded" style="background-color: #10B981"></div>
                    <span>--color-success: #10B981;</span>
                    <button class="ml-auto">
                        <i class="icon copy w-4 h-4 text-gray-400 hover:text-gray-600"></i>
                    </button>
                </div>
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded" style="background-color: #EF4444"></div>
                    <span>--color-danger: #EF4444;</span>
                    <button class="ml-auto">
                        <i class="icon copy w-4 h-4 text-gray-400 hover:text-gray-600"></i>
                    </button>
                </div>
            </div>

<div class="space-y-2 font-mono text-sm">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded" style="background-color: #3B82F6"></div>
                    <span>--color-primary: #3B82F6;</span>
                    <button class="ml-auto">
                        <i class="icon copy w-4 h-4 text-gray-400 hover:text-gray-600"></i>
                    </button>
                </div>
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded" style="background-color: #10B981"></div>
                    <span>--color-success: #10B981;</span>
                    <button class="ml-auto">
                        <i class="icon copy w-4 h-4 text-gray-400 hover:text-gray-600"></i>
                    </button>
                </div>
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded" style="background-color: #EF4444"></div>
                    <span>--color-danger: #EF4444;</span>
                    <button class="ml-auto">
                        <i class="icon copy w-4 h-4 text-gray-400 hover:text-gray-600"></i>
                    </button>
                </div>
            </div>