Kit de Ferramentas de Cores

Sobre o Color Toolkit

O Color Toolkit é um utilitário de cores “quatro em um” para designers e desenvolvedores. A aba “Converter” converte qualquer cor em seis formatos: HEX, RGB, HSL, HSV, CMYK e a sintaxe da função rgb() do CSS. A aba “Contraste” verifica pares de cores de primeiro plano e de fundo em relação a todos os quatro limites da WCAG 2.1 - AA normal, AAA normal, AA grande e AAA grande - e exibe uma pré-visualização em tempo real da combinação. A aba “Paleta” gera seis tipos de harmonia a partir de qualquer cor base: complementar, análoga, triádica, complementar dividida, tetrádica e monocromática. A aba “Tons” produz dez matizes em direção ao branco e dez tons em direção ao preto.

Como usar

Escolha uma aba para a tarefa em questão. Nas abas “Converter”, “Paleta” e “Tons”, use a amostra de cor para abrir o seletor nativo ou digite qualquer código HEX diretamente no campo de texto. Cores CSS com nomes, como “coral” ou “steelblue”, também são aceitas. Na aba “Contraste”, defina as cores de primeiro plano e de fundo independentemente e use o botão “Trocar” para inverter o par. Clique em qualquer amostra de cor nas abas “Paleta” ou “Tons” para copiar seu código HEX para a área de transferência. Na aba “Converter”, cada linha de saída possui seu próprio botão “Copiar”.

As relações de contraste das WCAG seguem a fórmula das Diretrizes de Acessibilidade para Conteúdo da Web 2.1. Uma relação de 4,5:1 ou superior atende ao nível AA para texto normal, enquanto 7:1 atende ao nível AAA. Texto em tamanho grande (18 pt ou 14 pt em negrito) tem limites mínimos mais baixos: 3:1 para o nível AA e 4,5:1 para o nível AAA. Use a aba “Paleta” para explorar rapidamente opções de design - clique em qualquer amostra para copiar seu código HEX e colá-lo em seu editor ou ferramenta de design.