Se você trabalha com design, redes sociais ou sites, vai ver as cores escritas de várias formas. São maneiras diferentes de nomear a mesma coisa.
Os três formatos
- HEX, como
#E4007C: é o mais comum em design web. São três pares de dígitos: vermelho, verde e azul. - RGB, como
rgb(228, 0, 124): a quantidade de vermelho, verde e azul, de 0 a 255. - HSL, como
hsl(330, 100%, 45%): matiz, saturação e luminosidade. É útil para criar variações, por exemplo um tom mais claro.
Com o Conversor de cores você digita uma cor em qualquer um deles, ou a escolhe no seletor, e obtém os outros dois na hora, com botões para copiar. Ele aceita HEX de 3 dígitos: #F0A equivale a #FF00AA.
Tirar cores de uma imagem
Tem um logo ou uma foto de referência? A Paleta de cores de uma imagem agrupa os tons principais e mostra o HEX de cada um. Toque em uma cor para copiá-la ou copie todas como variáveis CSS. É uma aproximação: cores parecidas são agrupadas.
Aplicações práticas
- Criar um favicon a partir do seu logo.
- Converter um SVG para PNG no tamanho que você precisar.
- Deixar um logo sem fundo com Remover fundo de cor sólida.
Dicas de acessibilidade
Procure manter bom contraste entre o texto e o fundo e não dependa só da cor para comunicar algo. Um texto cinza-claro sobre branco pode ser ilegível para muita gente.