Escolha uma cor visualmente, refine seus valores HEX, RGB ou HSL, verifique o contraste e copie o CSS pronto para uso no seu navegador.
Insira #RGB, #RGBA, #RRGGBB ou #RRGGBBAA. O seletor de tela aparece quando seu navegador oferece suporte.
A visualização permanece com a sua última cor válida até que este valor seja corrigido.
Valores de base, tonalidade e sombra agora funcionam juntos em um componente real.
As cores que você escolher aparecerão aqui neste dispositivo.
Cinco misturas sRGB em direção ao branco e cinco em direção ao preto, com o alfa preservado.
O texto legível deve permanecer nítido no fundo escolhido.
A transparência é mesclada com o fundo antes do cálculo da relação.
A cor é totalmente transparente, então nenhum texto é renderizado e não há nada para medir. Aumente o alfa para obter um resultado de contraste real.
Use este seletor de cores online para escolher uma cor visualmente ou inserir um valor exato de HEX, RGB ou HSL. O seletor de cores hexadecimais mantém todos os formatos sincronizados, preserva a transparência alfa e transforma uma seleção em uma família de cores CSS prática. Ele também funciona como um seletor de cores para navegadores e teclados configurados com inglês britânico.
Um seletor de cores CSS útil precisa de mais do que uma única amostra. Esta ferramenta mistura cinco matizes sRGB determinísticos em direção ao branco e cinco tonalidades em direção ao preto, preservando o valor alfa selecionado. A pré-visualização do componente aplicado mostra a base, um matiz e uma tonalidade juntos, e a exportação CSS usa nomes de variáveis diretos de tint-1 a shade-5. Precisa de uma harmonia completa em vez de uma família? Envie a cor para o gerador de paleta de cores.
Em navegadores compatíveis, o botão 'Selecionar da tela' abre o conta-gotas nativo do navegador para que você possa extrair qualquer pixel visível, sem precisar instalar nenhuma extensão ou complemento de seletor de cores. Se a API EyeDropper não estiver disponível, todos os controles manuais do seletor de cores continuam a funcionar. A ferramenta de conta-gotas mantém seu alfa atual em vez de substituí-lo silenciosamente.
A pré-visualização de contraste compara a cor do texto selecionada com um fundo editável e informa os resultados WCAG AA para texto normal e grande após a composição da transparência. Trate isso como uma verificação de cor focada, em vez de uma auditoria de acessibilidade completa; o tamanho real da fonte, peso, estados, gradientes, ícones e componentes ao redor ainda precisam de revisão. O verificador de contraste de cores completo adiciona os limites AAA, de não texto e alternativas acessíveis.
A análise de cores, pré-visualizações, cores recentes, cálculos de contraste e geração de CSS rodam localmente neste navegador. As cores recentes são armazenadas apenas neste dispositivo quando o armazenamento local está disponível. Nenhuma cor selecionada é enviada para o analytics, e um link de compartilhamento contém valores de cor somente quando você o cria explicitamente.
Abra o controle de cor visual e escolha uma matiz, ou insira um valor HEX, RGB ou HSL. Cada seleção válida atualiza a pré-visualização, a família de cores, o resultado de contraste e as variáveis CSS.
Sim, quando seu navegador for compatível com a API EyeDropper. Escolha "Selecionar da tela", selecione um pixel visível e a ferramenta aplicará esse valor RGB, preservando o valor alfa existente.
Sim. Use HEX de 4 ou 8 dígitos, RGBA, HSLA ou o controle deslizante de alfa. Os valores HEXA, RGBA, HSLA, as pré-visualizações, os tons claros, os tons escuros, o contraste, as cores recentes e o CSS permanecem sincronizados.
Tons claros são misturas sRGB uniformes entre a cor base e o branco; tons escuros são misturas sRGB uniformes entre a cor base e o preto. Eles são auxiliares determinísticos, não uma escala perceptual OKLCH.
Não. O seletor roda localmente. As cores recentes permanecem neste navegador, e os valores exatos são excluídos das análises. Um link de compartilhamento inclui as cores selecionadas somente após você solicitar um.
Não. HSL descreve uma cor por matiz, saturação e luminosidade, enquanto HSV/HSB usa matiz, saturação e valor ou brilho. Eles compartilham o eixo de matiz, mas escalam a saturação de maneira diferente, portanto, uma conversão de HSL para HSV altera os dois últimos números. Este seletor edita HSL porque o CSS suporta hsl() diretamente; os valores HEX e RGB permanecem idênticos de qualquer maneira.
O Phoenix Code oferece edição de HTML e CSS, busca em todo o projeto, Git e Live Preview em um editor de código completo para navegador ou desktop.