Seletor/Conversor de Cores
Escolha cores e converta entre diferentes formatos
Correspondências Alternativas:
Visualizar aparência do texto
The quick brown fox jumps over the lazy dog
color: #6366f1; background-color: #6366f1; border-color: #6366f1;
Sobre Modelos de Cor
Facilitando a conversão entre modelos para web e impressão.
Compreender diferentes modelos de cores é essencial para desenvolvimento web, design de UI e criação de arte digital.
Formatos Suportados
#RRGGBB
0-255, 0-255, 0-255
0°-360°, 0-100%, 0-100%
0°-360°, 0-100%, 0-100%
0-100%, ×4
16-235, 16-240, 16-240
L*: 0-100, a*/b*: -128 to +127
Detalhes do Formato de Cor
HEX (Hexadecimal)
Cores HEX usam uma notação hexadecimal de 6 dígitos precedida por #. Cada par representa valores de Vermelho, Verde e Azul (00-FF). A notação curta (#RGB) expande para #RRGGBB. Suporta formato de 8 dígitos para transparência alfa (#RRGGBBAA).
Uso: CSS, HTML, web design, a maioria das linguagens de programação
RGB (Vermelho, Verde, Azul)
O modelo RGB é um modelo de cor aditivo onde a luz vermelha, verde e azul são combinadas para criar cores. Este modelo mapeia diretamente como as telas emitem luz, tornando-o o espaço de cor nativo para exibições digitais.
Uso: Exibições de tela, iluminação LED, CSS, imagem digital
HSL (Matiz, Saturação, Luminosidade)
HSL representa cores em termos de percepção humana. Matiz é o ângulo da cor em uma roda de cores, Saturação é a intensidade, e Luminosidade é quão clara ou escura é a cor. Isso torna a manipulação de cores mais intuitiva.
Uso: CSS, geração de esquema de cores, seleção intuitiva de cores
HSV/HSB (Matiz, Saturação, Valor/Brilho)
HSV (também chamado HSB) é semelhante ao HSL, mas usa Valor em vez de Luminosidade. Valor representa o brilho onde 100% é o mais brilhante. Este modelo é preferido em muitas aplicações gráficas, pois se alinha melhor com como os artistas pensam sobre cores.
Uso: Photoshop, GIMP, seletores de cores em software gráfico
CMYK (Ciano, Magenta, Amarelo, Chave/Preto)
CMYK é um modelo de cor subtrativo usado na impressão. Ao contrário do RGB que adiciona luz, o CMYK subtrai luz do papel branco. O 'K' significa Chave (preto) para melhorar a qualidade de impressão e reduzir o uso de tinta.
Uso: Design de impressão, impressão comercial, embalagens
YCbCr (Luminância, Crominância)
YCbCr separa os componentes de luma (Y) de croma (Cb, Cr). Esta separação permite compressão eficiente de vídeo porque os olhos humanos são mais sensíveis ao brilho do que à cor. Comumente usado em JPEG, MPEG e padrões de transmissão.
Uso: Compressão JPEG, codificação de vídeo (H.264, HEVC), transmissão de TV
Lab (CIE L*a*b*)
Lab é um espaço de cores perceptualmente uniforme projetado para aproximar a visão humana. L* representa luminosidade, a* o eixo verde-vermelho, e b* o eixo azul-amarelo. Uma distância perceptual de 1 unidade parece aproximadamente a mesma, independentemente da cor.
Uso: Ciência das cores, cálculo de diferença de cores (Delta E), gerenciamento profissional de cores
Pantone (PMS)
Pantone Matching System (PMS) é um sistema proprietário de padronização de cores amplamente usado em impressão, moda e design de produtos. Cada cor tem um código único garantindo reprodução consistente em diferentes materiais e fabricantes.
Uso: Identidade de marca, impressão comercial, design de embalagens, indústria têxtil
Nota: Estas são representações digitais aproximadas. As cores Pantone reais podem variar na impressão.
Fundamentos da Teoria das Cores
As cores existem em diferentes 'espaços' otimizados para diferentes propósitos. Modelos aditivos (RGB) funcionam adicionando luz, enquanto modelos subtrativos (CMYK) funcionam absorvendo luz. Modelos perceptuais (Lab) se alinham com a visão humana.
Modelo de Cor Aditivo
RGB combina luz vermelha, verde e azul. Adicionar todos os três em intensidade total cria branco. É assim que telas, projetores e displays digitais funcionam.
Modelo de Cor Subtrativo
CMYK absorve (subtrai) comprimentos de onda de luz do branco. Combinar todas as cores cria preto (em teoria). É assim que tintas e pinturas funcionam.
Modelo de Cor Perceptual
Lab e espaços semelhantes são projetados em torno da percepção humana, tornando-os ideais para comparação e correção de cores.
Notas de Conversão
- RGB ↔ HEX: Conversão sem perdas, apenas mudança de formato
- RGB ↔ HSL/HSV: Sem perdas dentro do gamut, pode perder precisão
- RGB ↔ CMYK: Pode perder cores fora do gamut de impressão
- RGB ↔ Lab: Usa iluminante D65, espaço de cor sRGB assumido
- RGB ↔ YCbCr: Usa padrão BT.601 por padrão
Padrões de Contraste WCAG
As Diretrizes de Acessibilidade de Conteúdo Web (WCAG) definem requisitos mínimos de contraste entre texto e fundo para garantir que todos os usuários, incluindo aqueles com deficiências visuais, possam ler o conteúdo.
Casos de Uso Comuns
Perguntas frequentes
Qual a diferença entre os formatos de cor HEX, RGB e HSL?
HEX é uma notação hexadecimal de seis dígitos (ex.: #FF5733) que codifica os mesmos canais vermelho, verde e azul do RGB em base 16. RGB expressa cada canal como um decimal de 0 a 255. HSL (Matiz, Saturação, Luminosidade) separa o ângulo de cor da sua vivacidade e brilho, sendo muito mais intuitivo para criar tons mais claros ou escuros sem adivinhar valores RGB. Os três formatos são totalmente interconvertíveis.
O que significa o canal alfa (A) em RGBA e HSLA?
O canal alfa controla a opacidade de uma cor. Em RGBA e HSLA, o valor A vai de 0 (totalmente transparente) a 1 (totalmente opaco), ou de 0% a 100% em CSS. Por exemplo, rgba(255, 0, 0, 0.5) é um vermelho com 50% de transparência. O alfa é muito usado em sobrepostos, sombras e efeitos hover. A notação HEX padrão não inclui alfa, a menos que seja usada a notação HEX de 8 dígitos (ex.: #FF573380).
Qual a diferença entre HSL e HSV (HSB)?
Tanto HSL quanto HSV (também chamado HSB — Matiz, Saturação, Brilho) descrevem cores por meio de um ângulo de matiz, mas definem a terceira dimensão de forma diferente. Em HSL, uma Luminosidade de 50% com Saturação máxima dá a cor viva pura, 0% é preto e 100% é branco. Em HSV, um Valor de 100% com Saturação máxima dá a cor viva pura, e 0% é sempre preto. HSV é comum em softwares de edição de imagem como Photoshop, enquanto HSL predomina no CSS.
Como as cores CMYK diferem das cores RGB?
RGB usa mistura aditiva: combinar os três canais a plena intensidade produz branco. CMYK usa mistura subtrativa: as tintas absorvem luz para produzir tons escuros. RGB é o modelo nativo para telas e câmeras, enquanto CMYK é o padrão para impressão offset. Para projetos de impressão, converta as cores para CMYK cedo, pois nem todas as cores vivas em RGB podem ser reproduzidas em papel, especialmente azuis elétricos e verdes neôn.
Por que uma mesma cor parece diferente em telas e dispositivos distintos?
A aparência das cores varia entre dispositivos devido a diferenças em tecnologia de tela, perfis de cor e calibração de hardware. Cada tela tem uma gama — o intervalo de cores que consegue exibir. Monitores básicos podem cobrir apenas 60-72% do sRGB, enquanto monitores profissionais cobrem 99% do sRGB ou as gamas mais amplas P3 e AdobeRGB. Perfis ICC indicam ao sistema operacional como interpretar os valores de cor para o display específico. Sem calibração, o mesmo #FF5733 pode parecer laranja em uma tela e laranja-avermelhado em outra. Para trabalho de cor preciso, use um monitor calibrado por hardware.
Ferramentas Relacionadas
Conversor de Imagem para Base64
Converta imagens para codificação Base64, suportando formatos PNG, JPG, GIF, SVG, WebP, gere Data URI e fundos CSS
Minificador e Embelezador CSS
Comprima ou embeleze código CSS, remova espaços em branco e comentários para otimizar o tamanho do arquivo, ou formate o código para legibilidade
Gerador de Paleta de Cores
Gerador de paleta de cores profissional com mistura de cores, criação de gradiente, esquemas de cores e exportação para formatos CSS/SCSS/JSON
Codificador/Decodificador HTML
Converta caracteres especiais em entidades HTML com formatos nomeados, decimais e hexadecimais para prevenir ataques XSS
Codificador/Decodificador Base64
Codifique e decodifique strings Base64 rapidamente, suportando conversão de texto e arquivo
Codificador/Decodificador URL
Codifique e decodifique URLs para garantir conformidade e usabilidade