Sobre esta ferramenta
Um seletor de cores mapeia uma cor entre os formatos que o CSS entende. Este é construído em torno de um modelo HSV: um quadrado de saturação/valor define o quão viva e o quão clara a cor é, um controle deslizante de matiz gira em torno do círculo cromático e um controle deslizante alpha define a opacidade. Cada mudança é convertida com culori em quatro strings canônicas — HEX (#rrggbb, ou #rrggbbaa quando o alpha está abaixo de 1), rgb()/rgba(), hsl()/hsla() e o perceptualmente uniforme oklch() — para que a mesma cor esteja pronta para ser inserida em qualquer folha de estilo ou design token.
Use-o para capturar um valor exato de um mockup, traduzir um código hex que um designer enviou no rgb() ou hsl() que seu código espera, ajustar uma sobreposição semitransparente e ler o rgba(), ou converter uma cor legada em oklch() moderno para CSS de amplo gamut. Cole qualquer string de cor CSS — um código hex, uma cor nomeada como rebeccapurple ou uma expressão rgb()/hsl() completa — e todo o seletor se sincroniza com ela; as cores escolhidas recentemente permanecem em uma linha clicável pelo resto da sua sessão.
Tudo roda no seu navegador — as cores nunca são enviadas a um servidor, e a linha de cores recentes é mantida apenas na memória, de modo que ela se limpa quando você fecha a aba.
Perguntas frequentes
Qual é a diferença entre HSL e OKLCH?
HSL descreve uma cor por matiz, saturação e luminosidade no espaço sRGB, mas valores de luminosidade iguais podem parecer muito diferentes em brilho. OKLCH usa um modelo perceptualmente uniforme, de modo que seus valores de luminosidade e croma correspondem à forma como o olho realmente vê a cor e permanecem consistentes entre os matizes.
Como represento a transparência em uma cor hex?
Acrescente um valor alpha de dois dígitos ao hex de seis dígitos, formando #rrggbbaa — por exemplo, #ff000080 é vermelho a cerca de 50% de opacidade. Essa forma de 8 dígitos é suportada em todos os navegadores modernos; quando o alpha é totalmente opaco, o seletor emite o #rrggbb mais curto.
Posso colar uma cor CSS nomeada como rebeccapurple?
Sim. O campo hex aceita qualquer string de cor CSS válida — cores nomeadas, códigos hex e expressões rgb()/hsl()/oklch() — e uma entrada válida sincroniza instantaneamente o quadrado, os controles deslizantes e cada formato de saída.