Color Picker Input

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!-- Color Picker - Standard -->
<div>
  <label class="block text-sm font-medium text-gray-700 mb-2">Brand Color</label>
  <div class="flex items-center gap-4">
    <input type="color" value="#3B82F6" class="w-14 h-14 rounded-lg border-2 border-gray-200 cursor-pointer" />
    <input type="text" value="#3B82F6" class="flex-1 px-4 py-3 bg-white border border-gray-300 rounded-lg font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
  </div>
</div>

<!-- Color Picker - Presets -->
<div class="mt-6">
  <label class="block text-sm font-medium text-gray-700 mb-3">Accent Color</label>
  <div class="flex items-center gap-3">
    <button class="w-10 h-10 rounded-full bg-blue-500 ring-2 ring-offset-2 ring-blue-500"></button>
    <button class="w-10 h-10 rounded-full bg-purple-500 hover:ring-2 hover:ring-offset-2 hover:ring-purple-500 transition-all"></button>
    <button class="w-10 h-10 rounded-full bg-pink-500 hover:ring-2 hover:ring-offset-2 hover:ring-pink-500 transition-all"></button>
    <button class="w-10 h-10 rounded-full bg-green-500 hover:ring-2 hover:ring-offset-2 hover:ring-green-500 transition-all"></button>
    <button class="w-10 h-10 rounded-full bg-amber-500 hover:ring-2 hover:ring-offset-2 hover:ring-amber-500 transition-all"></button>
    <button class="w-10 h-10 rounded-full bg-gray-300 hover:ring-2 hover:ring-offset-2 hover:ring-gray-400 transition-all"></button>
  </div>
</div>

<!-- Color Picker - Gradient Swatches -->
<div class="mt-6">
  <label class="block text-sm font-medium text-gray-700 mb-3">Theme Gradient</label>
  <div class="grid grid-cols-4 gap-3">
    <button class="h-12 rounded-lg bg-gradient-to-r from-blue-500 to-cyan-500 hover:ring-2 hover:ring-offset-2 hover:ring-blue-500 transition-all"></button>
    <button class="h-12 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 hover:ring-2 hover:ring-offset-2 hover:ring-purple-500 transition-all"></button>
    <button class="h-12 rounded-lg bg-gradient-to-r from-amber-500 to-orange-500 hover:ring-2 hover:ring-offset-2 hover:ring-amber-500 transition-all"></button>
    <button class="h-12 rounded-lg bg-gradient-to-r from-green-500 to-emerald-500 hover:ring-2 hover:ring-offset-2 hover:ring-green-500 transition-all"></button>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

# Color Picker

Color picker input.

## Usage
```bash
npx devsnips add Tailwind/Components/Input/color-picker
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`