ColorDojo: Conta-gotas e Seletor de Cores

Extensão de conta-gotas e seletor de cores: capture cores em privado, copie OKLCH, combine Tailwind v4 e cheque o contraste.

O ColorDojo é uma extensão privada de conta-gotas e seletor de cores para devs que precisam de OKLCH, correspondências do Tailwind e um verificador de contraste sem acesso permanente a todos os sites. Capture um pixel, copie o valor e continue trabalhando. CAPTURE UMA VEZ, COPIE NO FORMATO QUE VOCÊ USA Escolha qualquer pixel da tela com o conta-gotas nativo do Chromium. O ColorDojo mostra hex, RGB, HSL, HSV, OKLCH e Display P3, além da cor CSS nomeada mais próxima, e copia seu formato padrão automaticamente com a cópia automática ativada. Como seletor de cores rgba, preserva o canal alfa de cores coladas e importadas: hex de 8 dígitos ou rgb() com alfa, em sintaxe moderna com barra ou legada com vírgulas. O atalho Alt+P coloca a captura no teclado, e o badge da barra vira um ponto com a última cor capturada. AJUSTE OS CANAIS ANTES DE CONFIRMAR Cor quase certa? A aba Editar é um seletor de cores HSL com sliders: ajuste canais RGB, HSL ou HSV, acompanhe a comparação "Selected vs new" enquanto arrasta e aplique. Formatos, token do Tailwind e verificações de contraste seguem a cor aplicada. UM CONTA-GOTAS PARA MAC, WINDOWS E LINUX O conta-gotas nativo do Chrome cobre capturas de tela onde o Chromium o oferece. Onde não oferece, a lupa na página assume: uma ampliação de 16x que amostra um único pixel, faz a média de blocos 3x3, 5x5, 11x11 ou 25x25, ou faz a média de qualquer área arrastada. A lupa roda apenas na página ativa e somente após o seu clique. FIQUE DENTRO DO DESIGN SYSTEM Cada captura é comparada localmente com a paleta embutida do Tailwind CSS v4. O ColorDojo mostra o token mais próximo, seu delta perceptual, amostras pareadas e ações de cópia para `blue-600` e `var(--color-blue-600)`. Essa é a metade seletor de cores Tailwind; a extração de tema adiciona um gerador de cores Tailwind que escreve um bloco @theme completo a partir da página aberta. VERIFIQUE O CONTRASTE ANTES DA AUDITORIA O verificador de contraste WCAG integrado mostra as razões contra branco e preto no momento da captura. Combine a cor ativa com uma cor do histórico para verificações WCAG 2.2 AA, texto grande e AAA, APCA Lc consultivo e uma sugestão de luminosidade próxima quando o texto normal reprova no AA. EXTRAIA AS CORES QUE A PÁGINA REALMENTE USA Rode a extração de tema apenas na página ativa. O ColorDojo combina custom properties CSS acessíveis com um censo amostrado de estilos computados, agrupa cores quase duplicadas em uma paleta OKLCH e exporta variáveis CSS, um bloco @theme do Tailwind v4, JSON de W3C Design Tokens com componentes OKLCH ou uma lista simples no formato escolhido. CONVERTA HEX EM OKLCH SEM OUTRA ABA Cole #ef4444, hsl(0 84% 60%), cmyk(0 72 72 6) ou oklch(60% 0.2 30) no importador de paletas e copie cada entrada de volta no formato necessário: hex para OKLCH, OKLCH para hex ou HSL para OKLCH, offline, dentro do popup. SEM PIPELINE DE DADOS DE NAVEGAÇÃO O ColorDojo não tem permissão de host para todos os sites nem content script persistente. Inspeção e extração usam a concessão temporária de aba ativa do Chrome apenas após o seu clique. A extensão não faz nenhuma requisição de rede em tempo de execução; histórico e paletas ficam no armazenamento do Chrome. Na próxima vez que um pixel chamar sua atenção, pressione Alt+P e leve a cor direto para o seu código.