Ferramentas de cor

Seletor: o quadrado grande é um mapa de saturação-valor no matiz atual — da esquerda para a direita aumenta a saturação, de cima para baixo diminui o brilho. Clique em qualquer ponto para escolher uma cor. A barra vertical fina à direita é o cursor de matiz (0° a 360°) — deslize-o para mudar o matiz base, e o quadrado é redesenhado em conformidade. O lado direito mostra a cor escolhida nos formatos HEX, RGB e HSL — clique em qualquer valor para o copiar.

Paleta: o seletor de cor da esquerda e a caixa de edição da direita guardam a mesma cor base — estão sincronizados nos dois sentidos (escolha uma cor ou escreva um valor hex, e ambos se atualizam). As cinco linhas de paleta abaixo derivam todas desta cor base, rodando a sua matiz na roda de cores: Complementar (matiz +180°, contraste mais forte), Triádica (+120° / +240°, tríade equilibrada), Tetrádica (+90° / +180° / +270°, quatro cores em retângulo), Análoga (-30° / base / +30° / +60°, vizinhos harmoniosos) e Complementar dividida (+150° / +210°, mais suave do que o complementar puro). A primeira amostra de cada linha é sempre a própria cor base, e as restantes são as suas variantes de matiz rodado.

Converter: introduza qualquer cor válida — HEX (#3b82f6), função CSS (rgb(59,130,246) / hsl(217,90%,60%)) ou cor com nome (dodgerblue) — e obtenha de imediato a conversão para todos os formatos principais. O menu de formato pode indicar ao analisador qual o formato se a deteção automática escolher o errado. O resultado mostra HEX, RGB (0-255), HSL (graus, %, %), HSV e CMYK. Clique em qualquer valor para o copiar.

Daltonismo: carregue uma imagem e selecione um tipo de deficiência de visão das cores para simular. A ferramenta aplica uma transformação matricial da resposta dos cones a cada pixel, remapeando os valores RGB para aproximar a forma como pessoas com diferentes formas de daltonismo percecionam a imagem. A tela da esquerda mostra o original; a da direita, a vista simulada. O menu cobre três tipos de dicromacia (ausência de um pigmento dos cones: protanopia, deuteranopia, tritanopia), a acromatopsia completa (ausência de visão cromática) e três tipos de tricromacia anómala (resposta fraca dos cones). As imagens de baixa resolução carregam mais depressa.

Gradiente: um construtor visual de gradientes CSS. Escolha linear (direcional) ou radial (do centro para fora), defina o ângulo (0° = de baixo para cima, 90° = da esquerda para a direita) e defina as paragens de cor. Cada paragem tem um seletor de cor e fica uniformemente espaçada (0%, 50%, 100% para três paragens). Clique em + Paragem para acrescentar pontos de cor intermédios e criar gradientes mais complexos. A pré-visualização atualiza-se em tempo real, e o CSS gerado está pronto a copiar abaixo.

Contraste: calcula o rácio de contraste WCAG 2.1 entre o texto de primeiro plano e a cor de fundo, usando a fórmula da luminância relativa a partir de valores sRGB (com correção gama). O rácio vai de 1:1 (cores idênticas) a 21:1 (preto contra branco). Os resultados indicam aprovação ou reprovação em três níveis de conformidade: AA texto normal (rácio ≥ 4,5:1), AAA texto grande (rácio ≥ 4,5:1 para texto ≥ 18 pt ou negrito ≥ 14 pt) e AAA texto normal (rácio ≥ 7:1). A pré-visualização do texto de exemplo atualiza-se em tempo real à medida que ajusta as cores.

Extrair: carregue qualquer imagem e a ferramenta identifica a sua paleta de cores dominantes através de quantização de cor. A imagem é reduzida para 100×100 px e cada pixel é agrupado num histograma de 4 bits por canal (16 níveis por R/G/B = 4096 intervalos). Os pixels transparentes são ignorados. Os intervalos mais frequentes são ordenados pelo número de pixels, e a cor central de cada intervalo torna-se uma amostra. Cada amostra mostra o seu valor HEX e a percentagem de pixels da imagem que representa. Ajuste o cursor de quantidade (2-12) para controlar quantas cores dominantes são extraídas.

Misturador: mistura duas cores no espaço de cor RGB por interpolação linear. O cursor de rácio determina a mistura: 0% é a Cor 1 pura, 100% é a Cor 2 pura, e 50% é uma mistura uniforme. Cada canal R, G, B é interpolado de forma independente (por exemplo, vermelho + azul a 50% dá roxo). A pré-visualização do resultado e os valores HEX/RGB atualizam-se em tempo real ao arrastar o cursor ou ao alterar qualquer das cores.

Temperatura: converte a temperatura de cor de corpo negro em kelvin na cor visível correspondente, usando o algoritmo de aproximação de Tanner Helland. As temperaturas baixas (1000-3000 K) produzem tons quentes laranja/vermelhos, como a luz de vela e as lâmpadas incandescentes; a gama intermédia (4000-6500 K) vai do branco neutro à luz do dia; as temperaturas mais altas (8000-40000 K) passam para o azul frio, como o céu nublado e a água profunda. O rótulo abaixo identifica a fonte de luz real mais próxima para cada temperatura.

Com nome: explore uma coleção combinada de 80 cores tradicionais chinesas (胭脂, 朱砂, 黛蓝, etc. — nomes tirados da literatura, da pintura e das tradições de tingimento chinesas clássicas) e mais de 140 cores com nome CSS (a paleta web padrão). Use a caixa de pesquisa para filtrar por nome ou valor HEX, ou alterne entre categorias no menu. Clique em qualquer amostra de cor para ver uma pré-visualização grande com o nome e o código HEX — clique no código para o copiar.