Como usar
- Digite ou cole uma cor, por exemplo, #1e90ff, rgb(30 144 255) ou oklch(65% 0.18 250). Você também pode clicar no seletor de cores.
- Confira a amostra de cor para confirmar se ela corresponde ao que você esperava.
- Copie da lista o formato de que você precisa. Os valores com transparência mantêm o alfa.
Como funciona
Entradas aceitas: HEX com 3, 4, 6 ou 8 dígitos (o 4º e o 8º dígitos representam o alfa), rgb() e rgba() com números ou porcentagens, hsl() e hsla(), hwb(), oklch() e cmyk() com porcentagens ou números de 0 a 100. Funcionam tanto a sintaxe clássica com vírgulas quanto a sintaxe moderna com espaços e “/ alpha”. O matiz aceita deg, turn, rad e grad. Nomes de cores, como “tomato”, não são reconhecidos; use o seletor de cores ou um código.
Todas as conversões passam por sRGB. HSL e HWB são apenas outras formas de representar os valores RGB, por isso a conversão é exata. OKLCH é um espaço perceptual: intervalos iguais na luminosidade parecem ter diferenças aproximadamente iguais, o que o torna útil para criar paletas. O cálculo usa as matrizes OKLab publicadas. Algumas cores OKLCH estão fora do que o sRGB consegue exibir; a ferramenta avisa e mostra a cor exibível mais próxima.
CMYK é calculado com a fórmula simplificada comum (K = 1 − o maior canal RGB). O resultado real da impressão depende do papel, da tinta e do perfil ICC. Portanto, use esses valores como ponto de partida, não como especificação de impressão.
Exemplos
De um código HEX da marca para CSS
Um guia de estilo informa #0b5d1e. Cole o código para obter rgb(11, 93, 30) para CSS mais antigo, hsl(133.9, 78.8%, 20.4%) para ajustar a luminosidade manualmente e um valor oklch() para as funções de cor modernas do CSS.
Como interpretar uma cor com transparência
rgba(0, 0, 0, 0.5) é convertido para #00000080. Os dois últimos dígitos HEX (80) representam o alfa: 128 de 255, aproximadamente 50 %.
Como conferir um valor OKLCH de um arquivo de design
oklch(70% 0.4 150) é um verde muito saturado, que as telas sRGB não conseguem exibir. A ferramenta avisa e informa a cor sRGB mais próxima, para você saber que o design terá uma aparência diferente na maioria das telas.
Perguntas frequentes
Por que converter para HSL e depois de volta às vezes altera o HEX em uma unidade?
HEX armazena números inteiros de 0 a 255 para cada canal. Os valores em outros formatos são arredondados para exibição (HSL para uma casa decimal), e converter de volta um valor arredondado pode resultar em uma diferença de uma unidade. Copie o HEX se precisar do valor original exato.
O valor CMYK é adequado para impressão?
Não, não por si só. O cálculo usa uma fórmula simples, sem perfil de cor. As impressoras usam perfis como FOGRA ou GRACoL, que produzem valores diferentes. Consulte a gráfica ou faça a conversão em um aplicativo com gerenciamento de cores.
O que é OKLCH e posso usá-lo no CSS?
OKLCH descreve uma cor por luminosidade percebida, croma (intensidade da cor) e matiz. As versões atuais dos principais navegadores são compatíveis com oklch() no CSS. Se você precisa oferecer suporte a navegadores mais antigos, mantenha uma alternativa em HEX ou rgb().
O que significa um código HEX de 8 dígitos?
#RRGGBBAA: os dois últimos dígitos indicam a opacidade, de 00 (totalmente transparente) a ff (totalmente opaco). A forma de 4 dígitos, #RGBA, funciona da mesma maneira, com um dígito por canal.
Privacidade
As cores são convertidas no seu navegador. Nada do que você inserir será enviado ou armazenado.