Color picker

Un campo de color con área de saturación y brillo, tono, opacidad, paleta y cuentagotas. El <input type="text"> sigue guardando el valor y el name, así que el formulario envía #4f46e5 y el hex se puede seguir escribiendo si ya sabes el color.

Ejemplos

El mismo <input> con atributos distintos. El panel se abre desde la muestra a la izquierda del campo.

Cómo usar

Marca el <input> y se inicializa solo al cargar la página y en cada htmx:afterSwap. La muestra y el valor se convierten en un único control, .tuc-color-field, con la altura, el radio y el anillo de foco del Select.

<input type="text" name="color" value="#4f46e5" data-tuc-color>
<input type="text" name="brand" value="#0d9488" data-tuc-color data-alpha="false"
       data-swatches="#0a0a0a,#ea580c,#16a34a">

En el formulario de Django

class TagForm(forms.ModelForm):
    class Meta:
        model = Tag
        fields = ["name", "color"]
        widgets = {
            "color": forms.TextInput(attrs={"data-tuc-color": "", "data-alpha": "false"}),
        }

Un CharField(max_length=9) alcanza para el hex con opacidad (#rrggbbaa). Usa TextInput, y no type="color": el nativo no tiene opacidad y cambiaría el aspecto del campo.

En JavaScript

const c = new Tucano.ColorPicker('#color', {
  format: 'rgb',
  alpha: false,
  swatches: ['#0a0a0a', '#ea580c', '#16a34a'],
  onChange: (value, { rgb, hsva }) => console.log(value),
});

c.getValue();           // 'rgb(79, 70, 229)'
c.getRgb();             // { r: 79, g: 70, b: 229, a: 1 }
c.setValue('#16a34a');  // true; un texto que no es color devuelve false y no cambia nada
c.open();
c.destroy();

Valor y formulario

Quien envía es tu propio <input>, con su name. El texto queda en el formato pedido, sea cual sea la notación usada para elegir.

Como entrada, escrita en el campo o en el panel, valen #rgb, #rgba, #rrggbb, #rrggbbaa, rgb(), rgba(), hsl() y hsla(). El texto se lee al confirmar — salir del campo o Enter — y un texto que no es color vuelve al valor actual, en lugar de borrar el color.

Cada cambio dispara tucano:change en el campo, y también el change nativo, para la validación y HTMX. Al arrastrar, como en el <input type="range">, el tucano:change sale en cada movimiento y el change nativo una sola vez, al soltar.

document.querySelector('#color').addEventListener('tucano:change', (e) => {
  e.detail.value;      // '#4f46e5'
  e.detail.rgb;        // { r, g, b, a }
  e.detail.hsva;       // { h, s, v, a }
  e.detail.instance;   // el ColorPicker
});

Para elegir texto claro u oscuro sobre el color que la persona eligió, Tucano.color.isDark('#4f46e5') devuelve true — mide la luminancia, y no el promedio de los canales, que no es como lo lee el ojo.

Teclado y accesibilidad

El disparador es la muestra junto al campo, un <button> de verdad, con aria-haspopup="dialog" y aria-expanded. Llegar con Tab no abre nada.

Las barras son role="slider" con aria-valuenow, el área tiene la etiqueta "Saturação e brilho" (saturación y brillo — las etiquetas por defecto están en portugués, y Tucano.setTexts({ colorpicker }) las reemplaza), y el valor en el panel es un .tuc-input común. El panel se cierra cuando el foco sale de él o con un clic afuera; con prefers-reduced-motion, solo se desvanece.

API

Generada a partir del código en cada build — si algo no está aquí, no existe.

Opciones

Las notas de esta tabla salen de los comentarios del código fuente, que están escritos en portugués.