Fundo branco4.69:1
4.69
razao de contraste em fundo branco
ElementoAAAAATexto pequenoTexto grandeElemento UI
Seletor de cor online
Escolha qualquer cor no quadro ou cole um código e copie o valor em HEX, RGB, HSL ou OKLCH. Com sombras, tons, harmonias e um conta-gotas para pegar cores da tela.
Conversao de cor
Consulte o código desta cor em dez formatos distintos, prontos para copiar.
Harmonias de cor
As harmoniais de cor são combinações agradáveis segundo a posição das cores no círculo cromático. Saber mais sobre harmonias de cor
Análoga
As harmoniais análogas usam três cores vizinhas no círculo cromático. Combinam bem e criam designs serenos.
Complementar
As complementares usam duas cores opostas no círculo. Geram alto contraste e um visual vibrante.
Complementar dividida
A complementar dividida usa a cor base e as duas adjacentes ao oposto. Contraste com menos tensão.
Triádica
As tríades usam três cores equidistantes no círculo. Tendem a ser vibrantes e equilibradas.
Tetrádica
As tetrádicas (retangulares) usam quatro cores em dois pares complementares. Esquemas ricos e variados.
Quadrada
As harmoniais quadradas são parecidas com as tetrádicas, mas com quatro cores igualmente espaçadas no círculo.
Composta
A harmonia composta combina cores análogas com suas complementares divididas, criando uma paleta rica e equilibrada.
Tons
Os tons compartilham o mesmo matiz mas variam em saturação, criando uma paleta coesa e versátil.
Monocromática
Harmonias monocromáticas usam diferentes luminosidades e saturações de um único matiz para um resultado elegante.
Personalizada
Disposição personalizada de cinco cores distribuídas uniformemente no círculo cromático.
Variacoes de cor
Explore as sombras, tintas, tons, matizes e temperaturas desta cor.
Sombras
Uma sombra é criada ao adicionar preto à cor base, aumentando a escuridão. As sombras parecem mais dramáticas e profundas.
Tintas
Uma tinta é criada ao adicionar branco à cor base, aumentando a luminosidade. As tintas tendem a parecer pastel e menos intensas.
Tons
Um tom é criado ao adicionar cinza à cor base, reduzindo a saturação. Os tons parecem mais sofisticados e complexos.
Matizes
O matiz é a família básica de uma cor na roda, do vermelho ao violeta. Aqui estão as variações vizinhas da sua cor base.
Temperaturas
As cores costumam dividir-se em frias e quentes. Verdes e azuis sentem-se frios; vermelhos e amarelos, quentes.
Simulador de daltonismo
Veja como pessoas com daltonismo percebem esta cor, para que suas combinações de cor sejam acessíveis para todos. Saber mais sobre daltonismo
Protanopia
88% similar
1,3% dos homens, 0,02% das mulheres
Deuteranopia
86% similar
1,2% dos homens, 0,01% das mulheres
Tritanopia
85% similar
0,001% dos homens, 0,03% das mulheres
Acromatopsia
76% similar
0,003% da população
Verificador de contraste
Verifique o contraste desta cor sobre fundo branco e preto. Para mais opções, use o verificador de contraste completo
Fundo preto4.48:1
4.48
razao de contraste em fundo preto
ElementoAAAAATexto pequenoTexto grandeElemento UI
Cores semelhantes
Encontre cores com nome CSS visualmente próximas desta.
Como escolher e converter uma cor
O seletor de cor permite encontrar uma cor exata de três formas: clicando no quadro de saturação e luminosidade, deslizando o matiz na barra inferior ou digitando um código Hex, RGB, HSL ou OKLCH que você já conhece.
Ao contrário do círculo cromático, pensado para explorar harmonias girando uma roda, esta ferramenta serve para quando você já tem uma cor concreta em mente e precisa do código exato ou de convertê-la para outro formato, seja para CSS, para impressão ou qualquer outro uso.
Como usar o seletor de cor
1. Escolha o matiz
Arraste o controle da barra de cores para escolher o matiz: vermelhos, amarelos, verdes, azuis… É a volta completa do círculo cromático, de 0° a 360°.
2. Ajuste saturação e brilho
No quadro grande, mova o ponto para a direita para uma cor mais intensa e para cima para uma mais luminosa. Lá embaixo está sempre o preto.
3. Copie o código
Escolha o formato (HEX, RGB, HSL ou OKLCH) e copie com um clique. Se já tem um código, cole-o no campo de cima e o seletor vai até essa cor.
Qual formato de cor usar
Este é #2C71DE nos formatos mais comuns, e para que serve cada um.
| Formato | Valor | Para que serve |
|---|---|---|
| HEX | #2C71DE | O padrão em CSS, HTML e ferramentas de design como o Figma: seis dígitos hexadecimais. |
| RGB | rgb(44, 113, 222) | Vermelho, verde e azul de 0 a 255. Útil no código e quando você precisa de transparência. |
| HSL | hsl(217, 73%, 52%) | Matiz, saturação e luminosidade. O mais prático para criar variantes mais claras ou mais escuras de uma cor. |
| HSV / HSB | hsv(217 80 87) | Matiz, saturação e brilho (também HSB). É o modelo do quadro do seletor e de muitos programas de design. |
| OKLCH | oklch(0.5663 0.1805 259.49) | O formato moderno do CSS: a luminosidade é percebida de forma uniforme, ideal para escalas e sistemas de cor. |
| CMYK | C80 M49 Y0 K13 | Ciano, magenta, amarelo e preto para impressão. É uma conversão aproximada: confirme com a sua gráfica. |
Pegue qualquer cor da sua tela
Com o conta-gotas você captura a cor exata de qualquer coisa aberta: um site, uma captura, um documento… Clique no ícone do conta-gotas, depois onde quiser, e o seletor mostra o código na hora.
Funciona no Chrome, no Edge e em outros navegadores de desktop baseados em Chromium. Se a cor estiver numa foto, envie-a ao seletor de cor de imagem e extraia a paleta completa.
Abrir o seletor de cor de imagemMais de 16 milhões de cores
Pode parecer um número exagerado, mas um monitor moderno consegue representar 16.777.216 cores diferentes.
Isso acontece porque o sistema RGB usa três canais de cor:
- Vermelho (Red)
- Verde (Green)
- Azul (Blue)
Cada canal pode ter um valor entre 0 e 255.
Ao combinar esses três valores, obtemos exatamente:
256 × 256 × 256 = 16.777.216 cores.
Mesmo que muitas sejam parecidas, essa enorme gama permite encontrar o tom exato de que você precisa, com precisão extraordinária, seja qual for o projeto.
É aqui que um bom seletor de cores se torna uma ferramenta essencial.
Perguntas frequentes
É uma ferramenta para escolher uma cor de forma visual, com um quadro de saturação e brilho e uma barra de matiz, e obter o código exato em HEX, RGB, HSL ou outros formatos para usar em design ou em código.
É a forma de escrever uma cor com seis dígitos hexadecimais depois do sinal #: dois para o vermelho, dois para o verde e dois para o azul. Por exemplo, #2C71DE.
Digite o Hex no seletor. A tabela de conversão mostra automaticamente RGB, HSL, HSV, OKLCH e CMYK prontos para copiar.
O HSL usa a luminosidade, que é a mistura com branco ou preto, e o HSB (também chamado HSV) usa o brilho, ou valor. Ambos partem do matiz e da saturação, mas o terceiro eixo é calculado de forma diferente, então a mesma cor pode mostrar números diferentes conforme o modelo.
OKLCH é um espaço de cor perceptual: L (luminosidade), C (croma) e H (matiz) correspondem a como realmente vemos a cor. O RGB descreve a luz da tela (vermelho, verde, azul) e o HSL reorganiza esse mesmo modelo de forma mais intuitiva, mas nenhum garante que duas cores com a mesma luminosidade pareçam igualmente claras. O OKLCH garante, o que permite criar paletas mais uniformes e degradês mais naturais.
O CMYK (ciano, magenta, amarelo e preto) é o modelo de impressão: mistura tintas no papel. Seu monitor trabalha em RGB, que é luz. O seletor mostra o código CMYK para quando você precisa preparar algo para a gráfica ou um PDF pronto para impressão. Na tela, o formato certo continua sendo RGB, Hex, HSL ou OKLCH.
Use o conta-gotas do seletor para capturar qualquer pixel da tela (no Chrome e no Edge para desktop). Se a cor estiver numa foto, envie-a ao seletor de cor de imagem.
Ferramentas relacionadas
Círculo cromático
Explore harmônicas num círculo interativo e crie paletas equilibradas.
ExperimentarCores HTML
Consulte cores nomeadas HTML/CSS e copie Hex, RGB e HSL na hora.
ExperimentarConverter Hex para RGB
Converta Hex para RGB na hora para CSS, design e handoff.
Experimentar