Estúdio de conversão de cor
Escreva um código hex, uma palavra-chave de CSS ou uma função oklch() inteira e receba de imediato todas as outras notações. Depois monte uma escala, verifique o contraste, simule como fica para quem tem daltonismo e leve a paleta consigo.
O hex de 3, 4, 6 ou 8 dígitos e as funções rgb() e hsl() são compreendidos sem ajuda do navegador.
O CMYK apresentado aqui é a conversão aritmética simples, não uma separação ICC. Um CMYK pronto para impressão depende do papel, da tinta e do perfil de saída, e não pode ser deduzido de um valor sRGB isolado.
Título grande a 24 pixels
Subtítulo a 16 pixels, seminegrito
Texto corrido a 13 pixels. É este tamanho que decide se um par de cores serve mesmo.
Ao contrário, com o fundo como cor de texto: Lc -60.3
Abaixo de ΔE 0,05 duas amostras são a mesma cor para essa pessoa, por isso uma paleta que dependa de as distinguir deixa de funcionar. A simulação segue Viénot, Brettel e Mollon (1999) e é aplicada em luz linear.
A distância é o ΔE em OKLab, e por volta de 0,02 é o ponto em que a maioria começa a ver duas amostras como cores diferentes. Clique numa linha para saltar para essa cor exata.
Como funciona
Traga uma cor
Escreva qualquer notação CSS, use o conta-gotas de ecrã, cole uma paleta inteira ou abra uma imagem e clique no pixel que quiser.
Dê-lhe forma
Deslizadores de claridade, croma e matiz que se comportam igual num amarelo e num azul, além de escalas, harmonias e mistura.
Verifique
WCAG 2.1 e APCA contra qualquer fundo, e uma simulação de daltonismo que avisa quando duas amostras se fundem numa só.
Leve consigo
Copie uma notação isolada, exporte CSS, Tailwind, SCSS, JSON, SVG ou uma folha de amostras, ou passe a paleta à ferramenta seguinte.
Todas as sintaxes de cor CSS
Hex de 3, 4, 6 ou 8 dígitos, palavras-chave, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color-mix() e display-p3. Quem lê é o analisador do próprio navegador, por isso não fica nada de fora.
Escalas de passo constante
Onze degraus gerados em OKLCH, de modo que cada um fica a uma distância visual igual do anterior, em vez dos saltos irregulares de uma escala em HSL.
WCAG 2.1 e APCA
O rácio clássico mais o valor Lc com sinal do rascunho da WCAG 3, medidos contra o fundo que escolher, não apenas contra branco e preto.
Verificação de daltonismo
Protanopia, deuteranopia e tritanopia simuladas em luz linear, com a menor distância entre duas amostras para saber quando uma paleta deixa de funcionar.
Conta-gotas e imagens
Recolha uma cor de qualquer ponto do ecrã onde o navegador o permita, ou abra uma imagem, amplie sobre o pixel debaixo do cursor e fique com o seu valor exato.
Harmonias e mistura
Conjuntos complementar, análogo, tríade, dividido, tetrádico e monocromático rodados em OKLCH, além de mistura percetual pelo arco curto de matiz.
Exporte para onde quiser
Propriedades personalizadas de CSS, um bloco @theme do Tailwind, variáveis SCSS, JSON, uma folha de amostras em SVG ou PNG e um ficheiro de paleta do GIMP.
Nada sai do separador
Sem envios, sem chamadas a APIs, sem conta. Cada conversão, cada número de contraste e cada paleta são calculados pelo seu próprio navegador.
Processamento local instantâneo
Cada conversão é aritmética sobre três números, por isso não há nada por que esperar nem nada para enviar. A leitura do que escreve é entregue ao motor CSS do próprio navegador, e é por isso que as palavras-chave, o color-mix() e as notações de gama alargada são compreendidas em vez de rejeitadas. O trabalho percetual — escalas em OKLCH, mapeamento de gamute, distâncias ΔE, simulação de daltonismo — são umas centenas de operações de vírgula flutuante, e até extrair a paleta de uma fotografia grande é uma passagem de k-means sobre uma cópia reduzida que termina em bem menos de um segundo.
O incómodo do trabalho com cor raramente é a conversão em si: é conseguir uma escala que avance a passo certo, provar que um par de cores se lê bem e entregar o resultado na forma que o seu código espera. Esta ferramenta ancora uma escala de onze degraus na cor que já tem, diz-lhe que degraus tiveram de voltar ao sRGB e o quanto se afastaram, nomeia a palavra-chave de CSS e o token do Tailwind mais próximos com uma distância medida, e exporta a paleta inteira como propriedades personalizadas, bloco de tema do Tailwind, SCSS, JSON ou folha de amostras.
Esta ferramenta não tem lado de servidor. As cores que escreve, as paletas que cola e as imagens que abre ficam no separador: uma imagem é descodificada para uma tela que nunca sai do seu equipamento, e fechar o separador deita tudo fora. A única coisa que viaja é o que decidir pôr na barra de endereço — a paleta é codificada aí para que possa partilhar uma ligação, e mais nada da sua sessão fica registado.
Perguntas frequentes
QQue formatos de cor posso colar?+
Hex de 3, 4, 6 ou 8 dígitos, as 148 palavras-chave de CSS, rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch(), color-mix() e color(display-p3 …). A entrada passa pelo analisador de CSS do próprio navegador, por isso funciona tudo o que o seu navegador aceite numa folha de estilos. Sem esse analisador, a ferramenta continua a ler hex, rgb() e hsl().
QPorque é que a ferramenta prefere OKLCH a HSL?+
Em HSL, duas cores com o mesmo valor de luminosidade podem parecer muito diferentes em brilho: um amarelo a 50% lê-se bem mais claro do que um azul a 50%. O OKLCH foi construído para que a sua claridade corresponda ao que o olho percebe, e é por isso que as escalas, as harmonias e a mistura aqui rodam e interpolam nesse espaço.
QO que significa o número ΔE?+
É a distância entre duas cores em OKLab. Cerca de 0,02 é o ponto em que a maioria começa a ver duas amostras como cores realmente diferentes, por isso serve de régua: diz-lhe o quanto um degrau se desviou ao ser empurrado de volta para o sRGB, quão perto está mesmo o token do Tailwind mais próximo, e se duas cores da paleta sobrevivem a uma simulação de daltonismo.
QO verificador de contraste cumpre as WCAG?+
O rácio da WCAG 2.1 é calculado exatamente como a especificação define, contra o fundo que escolher, e a etiqueta distingue o texto corrido do limite mais folgado do texto grande em vez de mostrar um simples aprovado. Ao lado tem o APCA, a medida percetual proposta para a WCAG 3: útil na prática, mas ainda um rascunho e não um critério de conformidade.
QO CMYK que sai serve para impressão?+
Não, e o de nenhuma ferramenta de navegador serve. O que obtém é a conversão aritmética habitual, que chega para uma ideia aproximada ou para software que espere esses quatro números. Uma separação a sério depende do papel, das tintas e de um perfil ICC de saída, por isso tem de ser feita no seu programa de paginação ou de imagem.
QAlguma coisa que eu cole é enviada para fora?+
Não. Não há componente de servidor, não há analítica sobre as suas cores e não há qualquer pedido de rede em nenhum momento da conversão. As imagens são descodificadas localmente para uma tela e descartadas ao fechá-las. A paleta é escrita no URL da página para que a possa partilhar ou guardar nos favoritos — é o único sítio onde as suas cores ficam, e permanece no seu equipamento a não ser que envie a ligação.