Color picker

Um campo de cor com área de saturação e brilho, matiz, opacidade, paleta e conta-gotas. O <input type="text"> continua guardando o valor e o name, então o formulário posta #4f46e5 e o hex continua digitável para quem já sabe a cor.

Exemplos

O mesmo <input> com atributos diferentes. O painel abre pela amostra à esquerda do campo.

Como usar

Marque o <input> e ele inicializa sozinho no carregamento e a cada htmx:afterSwap. A amostra e o valor viram um controle só, .tuc-color-field, com a altura, o raio e o anel de foco do 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">

No formulário do Django

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

Um CharField(max_length=9) cabe o hex com opacidade (#rrggbbaa). Use TextInput, e não type="color": o nativo não tem opacidade e mudaria o desenho do campo.

Em 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; texto que não é cor devolve false e nada muda
c.open();
c.destroy();

Valor e formulário

Quem posta é o seu <input>, com o name dele. O texto fica no formato pedido, qualquer que seja a notação usada para escolher.

Na entrada, digitada no campo ou no painel, valem #rgb, #rgba, #rrggbb, #rrggbbaa, rgb(), rgba(), hsl() e hsla(). O texto é lido ao confirmar — sair do campo ou Enter — e texto que não é cor volta para o valor atual, em vez de zerar a cor.

Cada mudança dispara tucano:change no campo, e também o change nativo, para validação e HTMX. No arrasto, como no <input type="range">, o tucano:change sai a cada movimento e o change nativo uma vez só, ao 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;   // o ColorPicker
});

Para escolher texto claro ou escuro sobre a cor que a pessoa escolheu, Tucano.color.isDark('#4f46e5') devolve true — ele mede a luminância, e não a média dos canais, que o olho não lê assim.

Teclado e acessibilidade

O gatilho é a amostra ao lado do campo, um <button> de verdade, com aria-haspopup="dialog" e aria-expanded. Chegar de Tab não abre nada.

As trilhas são role="slider" com aria-valuenow, a área tem rótulo "Saturação e brilho", e o valor no painel é um .tuc-input comum. O painel fecha quando o foco sai dele ou com clique fora; com prefers-reduced-motion, só esmaece.

API

Gerada do código a cada build — se algo não está aqui, não existe.

Opções