# Selector de color

> Elige un color, un degradado o un relleno con máscara; las muestras los enseñan. Componente de Pyzed para GUIs de escritorio en Python, con ejemplos y API.

Source: https://albakore.github.io/pyzed/es/library/color-picker/

:::tip[En pocas palabras]
Una paleta para elegir un color, su transparencia o una mezcla de colores.
:::

`ui.ColorPicker` es un componente que elige un color con alfa, un degradado lineal (paradas que añades, arrastras y quitas, más un ángulo) o un relleno con máscara de opacidad. `on_change` recibe un evento cuyo `value` es una cadena `"#rrggbb[aa]"`, un `pz.Gradient` o un `pz.Paint`, todos válidos como fondo. `ui.color_swatch` muestra cualquiera de ellos sobre un damero.

`ui.ColorPicker` · Categoría: [Formularios](https://albakore.github.io/pyzed/es/library/#formularios) · [Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#colorpicker)

**Código:**

```python
pz.row([
    ui.ColorPicker(value="#3b82f6cc", on_change=on_change),
    pz.column([
        ui.color_swatch("#3b82f6", size=28),
        ui.color_swatch("#a1c181aa", size=28),
        ui.color_swatch(pz.Gradient(["#f97316", "#7c3aed"], angle=90), size=28),
    ], spacing=8),
], spacing=16)
```

:::note[Nuevo]
Este componente se añadió hace poco. Cuéntanos qué tal te funciona en el [gestor de incidencias](https://github.com/albakore/pyzed/issues).
:::

## Cuándo usarlo

- Para editores de temas, apps de dibujo y propiedades de estilo.
- Muestra un `color_swatch` y abre el selector en un [Popover](https://albakore.github.io/pyzed/es/library/popover/) al pulsarlo.

## Uso

```python
import pyzed as pz
from pyzed import ui

class Styles(pz.App):
    def __init__(self):
        self.fill = "#3b82f6"

    def view(self):
        return pz.row([
            ui.ColorPicker(value=self.fill, on_change=lambda e: setattr(self, "fill", e.value)),
            pz.container(width=120, height=120, bg=self.fill, radius=8),
        ], spacing=16)
```

## Variantes

:::note[Sobre estas capturas]
Cada captura la graba pyzed mismo, fuera de pantalla a 2x, en One Dark o One Light según el tema de este sitio, y recortada al componente para que se vea a su tamaño real. El puntero pasa por encima, pulsa o escribe en él; un componente que no reacciona al puntero recorre algunos temas. Con movimiento reducido ves el primer fotograma. Abre **Código** bajo una captura para ver el fragmento que la dibuja; los nombres libres como `on_save` son tus propios callbacks.
:::

### Opciones

```python
ui.ColorPicker(value="#3b82f6cc", on_change=on_change)
```

```python
ui.ColorPicker(value="#a1c181", alpha=False, gradients=False, masks=False,
               on_change=on_change)
```

```python
ui.ColorPicker(value="#e5c07b", gradients=False, masks=False,
               swatches=["#e06c75", "#e5c07b", "#98c379", "#61afef", "#c678dd"], on_change=on_change)
```

### Muestras

Una muestra dibuja cualquier color, degradado o relleno sobre un damero, para que se vea la transparencia.

```python
ui.color_swatch("#3b82f6", size=32)
```

```python
ui.color_swatch("#a1c181aa", size=32)
```

```python
ui.color_swatch(pz.Gradient(["#f97316", "#7c3aed"], angle=90), size=32)
```

```python
ui.checkerboard(96, 48, size=8)
```

## Eventos

Selector de color tiene **2 eventos propios**, en la tabla de abajo. Como todo widget, también tiene los **18 eventos comunes** (`click`, `double_click`, `right_click`, `mouse_enter`, `drag`, `key_down`, `resize`…), que se conectan con `.on(...)`: mira [Eventos](https://albakore.github.io/pyzed/es/guides/events/) y [Eventos de cada componente](https://albakore.github.io/pyzed/es/library/events/).

Es un `pz.Component`, así que también lanza `on_mount` y `on_unmount`, y sus handlers reciben un `pz.Event` cuyo `value` trae el dato.

| Evento | De | El handler recibe | Cuándo |
| --- | --- | --- | --- |
| `on_change` | `ui.ColorPicker` | `(event)` | Recibe `event.value`. |
| `on_press` | `ui.color_swatch` | `()` | Lo hace pulsable. |

**El handler recibe** es lo que Pyzed le pasa a tu función: `()` es nada. Cualquier handler también puede ser un mensaje (un valor que no se puede llamar), que va a `update()`.

### Manejar los eventos

Los mismos eventos escritos de tres formas. **Imperativa**: métodos de la app que cambian `self`. **Declarativa**: los handlers producen mensajes y un único `update()` decide. **Funcional**: una función pura dibuja un estado inmutable y pide cambios con `set_state(...)`. Mira [Imperativo, declarativo y funcional](https://albakore.github.io/pyzed/es/guides/code-styles/).

**Imperativo:**

```python
class Styles(pz.App):
    def __init__(self):
        self.fill = "#3b82f6"

    def picked(self, event):             # a pz.Component: the color is event.value
        self.fill = event.value

    def view(self):
        return pz.row([
            ui.ColorPicker(value=self.fill, on_change=self.picked),
            pz.container(width=80, height=80, bg=self.fill, radius=8),
            ui.color_swatch("#ef4444", on_press=lambda: setattr(self, "fill", "#ef4444")),
        ], spacing=16)
```

**Declarativo:**

```python
from dataclasses import dataclass

@dataclass
class Fill:
    color: str

class Styles(pz.App):
    fill = "#3b82f6"

    def update(self, message):
        match message:
            case Fill(color):
                self.fill = color

    def view(self):
        return pz.row([ui.ColorPicker(value=self.fill, on_change=lambda e: Fill(e.value)),
                       ui.color_swatch("#ef4444", on_press=Fill("#ef4444"))], spacing=16)
```

**Funcional:**

```python
from dataclasses import dataclass

@dataclass(frozen=True)
class State:
    fill: str = "#3b82f6"

def view(state, set_state):
    return pz.row([ui.ColorPicker(value=state.fill, on_change=lambda e: set_state(fill=e.value)),
                   pz.container(width=80, height=80, bg=state.fill, radius=8)], spacing=16)
```

## Propiedades y API

### `ui.ColorPicker`

```python
class ColorPicker
```

Un componente para elegir un color con alfa, un gradiente lineal (paradas que se añaden, arrastran y quitan, más un ángulo) o un relleno con máscara de opacidad. `on_change` recibe un texto `"#rrggbb[aa]"`, un `pz.Gradient` o un `pz.Paint`, todos válidos como `background`. Devuelve el valor elegido en `value`. Ver [Estilos](https://albakore.github.io/pyzed/es/theming/styles/#selector-de-color).

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `value` | `"#3b82f6"` | Un color, token del tema, `pz.Gradient` o `pz.Paint`. |
| `alpha` | `True` | Muestra la barra y el campo de alfa. |
| `gradients` | `True` | Muestra el cambio Sólido/Gradiente. |
| `masks` | `True` | Muestra el editor de máscara. |
| `swatches` | `None` | Colores rápidos (por defecto: el acento y los colores de estado del tema). |

Eventos: `on_change` ([eventos](#eventos)).

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#colorpicker)

### `ui.color_swatch`

```python
color_swatch(value, *, size=20, on_press=None)
```

Un cuadrito que muestra un color, gradiente o pintura sobre un damero.

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `value` | *obligatorio* | Qué mostrar. |
| `size` | `20` | Lado en píxeles. |

Eventos: `on_press` ([eventos](#eventos)).

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#color_swatch)

### `ui.checkerboard`

```python
checkerboard(width, height, size=6)
```

Un damero claro/oscuro para dibujar bajo colores translúcidos.

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `width` | *obligatorio* | Ancho. |
| `height` | *obligatorio* | Alto. |
| `size` | `6` | Tamaño de celda. |

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#checkerboard)

## Relacionados

- [Popover](https://albakore.github.io/pyzed/es/library/popover/): Contenido flotante en un punto: menús contextuales, selectores de color.
- [Tarjeta](https://albakore.github.io/pyzed/es/library/card/): Una superficie con borde, título y acciones opcionales.