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

Preview Code

Copy

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

Preview Code

Copy

#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

Preview Code

Copy

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

Preview Code

Copy

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

Preview Code

Copy

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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

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

Preview Code

Copy

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

Preview Code

Copy

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

Preview Code

Copy

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 Code

Copy

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

Preview Code

Copy

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

Preview Code

Copy

--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>