The Color Picker component provides a versatile and user-friendly tool for selecting and customizing colors within your web applications. It seamlessly integrates with Tailwind CSS, offering default color options that you can easily use. However, you also have the flexibility to tailor these colors to your specific preferences, either by generating new color variations using code or utilizing the colors defined in your Tailwind CSS configuration. This component allows you to specify colors for various components, whether with or without labels, and provides the option to render colors by name rather than relying on hexadecimal values. It offers a robust and adaptable solution for managing and manipulating colors throughout your web projects.

A straightforward method for utilizing the Color Picker is to render the component and leverage the built-in WireUI color palette as the default option.

1<x-color-picker
2    label="Select a Color"
3    placeholder="Select the car color"
4/>

By default, WireUI incorporates the complete set of Wind colors from its Tailwind color palette. However, if desired, you have the flexibility to customize these colors to suit your specific preferences or needs.

1document.addEventListener('alpine:init', () => {
2    Alpine.store('wireui:color-picker').setColors([
3        { name: 'White', value: '#FFF' },
4        { name: 'Black', value: '#000' },
5        { name: 'Teal', value: '#14b8a6' },
6    ])
7})

1import Alpine from 'alpinejs'
2 
3Alpine.store('wireui:color-picker').setColors([
4    { name: 'White', value: '#FFF' },
5    { name: 'Black', value: '#000' },
6    { name: 'Teal', value: '#14b8a6' },
7])
8 
9Alpine.start()

 1import Alpine from 'alpinejs'
 2// update with your Tailwind config path
 3import { theme } from '@/tailwind.config.js'
 4 
 5// array of duplicated colors to exclude
 6const excludeColors = [
 7    'primary',
 8    'secondary',
 9    'positive',
10    'negative',
11    'warning',
12    'info'
13]
14 
15const makeColors = () => {
16    const tailwindColors = theme.extend.colors ?? {}
17 
18    const colors = Object.entries(tailwindColors).flatMap(([name, values]) => {
19        if (typeof values === 'string' || excludeColors.includes(name)) {
20            return []
21        }
22 
23        return Object.entries(values).map(([tonality, hex]) => ({
24            name: `${name}-${tonality}`,
25            value: hex
26        }))
27    })
28 
29    colors.push({ name: 'White', value: '#fff' })
30    colors.push({ name: 'Black', value: '#000' })
31 
32    return colors
33}
34 
35Alpine.store('wireui:color-picker').setColors(makeColors())

You can also tailor the colors of a specific component, whether you choose to use labels or not.

 1<x-color-picker
 2    label="Select a Color"
 3    placeholder="Select the book color"
 4    :colors="[
 5        ['name' => 'White', 'value' => '#FFF'],
 6        ['name' => 'Black', 'value' => '#000'],
 7        ['name' => 'Teal', 'value' => '#14b8a6'],
 8        ['name' => 'Slate', 'value' => '#64748b'],
 9        ['name' => 'Red', 'value' => '#ef4444'],
10        ['name' => 'Lime', 'value' => '#a3e635'],
11        ['name' => 'Sky', 'value' => '#38bdf8'],
12        ['name' => 'Violet', 'value' => '#8b5cf6'],
13        ['name' => 'Pink', 'value' => '#8b5cf6'],
14        ['name' => 'Indigo', 'value' => '#6366f1'],
15    ]"
16/>
17 
18<x-color-picker
19    label="Select a Color"
20    placeholder="Select the book color"
21    :colors="[
22        '#FFF',
23        '#000',
24        '#14b8a6',
25        '#64748b',
26        '#ef4444',
27        '#a3e635',
28        '#38bdf8',
29        '#8b5cf6',
30        '#8b5cf6',
31        '#6366f1',
32    ]"
33/>

An alternative option is to render the color by name rather than using hexadecimal values.

1<x-color-picker
2    label="Select a Color"
3    placeholder="Select the book color"
4    color-name-as-value
5/>