Seletor e conversor de cores hexadecimais (RGB, HSL, HSV, CMYK, OKLCH)
Converta qualquer cor para HEX, RGB, HSL, HSV, CMYK e OKLCH, verifique o contraste, copie amostras de harmonia e exporte CSS ou JSON, diretamente no navegador.
Insira hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() ou um nome de cor CSS. Valores inválidos mantêm a última conversão válida.
Nome CSS mais próximo: royalblue
Conversões
Sobre fundo branco
3.68:1
Atende WCAG AA (apenas texto grande)
Sobre fundo preto
5.71:1
Atende WCAG AA (texto normal)
Exportar amostras
Escolha ou cole qualquer formato de cor, converta para HEX, RGB, HSL, HSV, CMYK e OKLCH, verifique o contraste WCAG, gere amostras de harmonia, copie valores e exporte CSS ou JSON. Gratuito, rápido e roda inteiramente no navegador.
Como usar este seletor de cores
Digite ou cole qualquer formato de cor suportado, ajuste a opacidade ou use o seletor nativo. A página converte instantaneamente para HEX, RGB, HSL, HSV, CMYK e OKLCH, mostra o contraste WCAG sobre branco e preto, gera amostras de harmonia e uma faixa de matiz/sombra, e mantém tudo pronto para copiar. Compartilhe sua configuração pela URL—o estado é armazenado na string de consulta.
Referência HEX, RGB, HSL, HSV, CMYK e OKLCH
Hex é uma codificação RGB compacta. RGB descreve canais vermelho/verde/azul. HSL expressa matiz, saturação e luminosidade; HSV usa matiz, saturação e valor (brilho). CMYK modela percentagens de tinta de impressão. OKLCH é um espaço de cores CSS perceptualmente uniforme. Esta ferramenta usa cálculos determinísticos no navegador, sem uploads nem APIs externas.
Complementar, análogo, triádico, complementar dividido, tetrádico e monocromático
O complementar gira o matiz 180°. O análogo avança o matiz em ângulos fixos em torno da base. O triádico usa deslocamentos de 120°. O complementar dividido adiciona dois matizes perto do complemento. O tetrádico usa deslocamentos retangulares de 90°. O monocromático mantém o matiz e varia a luminosidade. Os controles de contagem aplicam-se aos modos análogo e monocromático.
Variáveis CSS e exportação JSON
A exportação produz propriedades personalizadas :root com nomes estáveis (por exemplo --color-base, --color-analogous-1) e JSON com baseHex, alpha, namedColor, modo de harmonia, razões de contraste e listas de amostras para scripts ou tokens de design.
Verificador de contraste WCAG
A razão de contraste é calculada a partir da luminância relativa conforme WCAG 2.x. AA exige 4,5:1 para texto normal e 3:1 para texto grande; AAA exige 7:1. Use as pré-visualizações ao escolher cores de texto ou de interface em fundos claros ou escuros.
Perguntas frequentes
Quais formatos de cor posso inserir?
Hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() e todos os nomes de cores CSS padrão como cornflowerblue ou rebeccapurple.
#ABC se expande para seis dígitos?
Sim. O hexadecimal de três dígitos é expandido por par de dígitos, então #ABC torna-se #AABBCC.
O que acontece se minha cor for inválida?
Você vê um erro embutido. A última cor válida permanece nas linhas de conversão, no seletor e nas exportações até inserir novamente um valor válido.
Como funciona o verificador de contraste WCAG?
Ele calcula a razão de contraste entre sua cor e o branco ou preto puro usando luminância relativa. Os resultados mostram se a cor atende aos limites AA ou AAA para texto normal ou grande.
Como as cores de harmonia são calculadas?
São determinísticas: complementar é um deslocamento de matiz de 180°; análogo usa passos de matiz fixos; triádico deslocamentos de 120°; complementar dividido matizes perto do complemento; tetrádico deslocamentos retangulares de 90°; monocromático varia luminosidade mantendo matiz e saturação da base.
O que há na exportação JSON?
Chaves estáveis: baseHex, alpha, namedColor, harmony, harmonyCount quando aplicável, harmonySwatches, tintShadeStrip, stripCount e razões de contraste—adequadas para ferramentas ou documentação.
Posso compartilhar minhas cores?
Sim. A URL é atualizada com hex, alpha, modo de harmonia, contagens e tamanho da faixa para que você possa salvar ou compartilhar uma configuração exata.