Color Converter & Palette
Converta instantaneamente HEX, RGB, HSL, HSV, CMYK.
Inclui geração de paletas e verificação de contraste.
Seletor de Cores
Códigos de Cor
/* CSS Variables */ --color-primary: #3b82f6; --color-primary-rgb: 59, 130, 246; --color-primary-hsl: 217, 90%, 60%;
Paleta de Cores
Relação de Contraste
Texto Branco Aa
Ratio: -
Texto Preto Aa
Ratio: -
Cores Salvas
Salve cores usando ⭐ (Máx 20)
Você também pode gostar
Sobre o Conversor
O Conversor de Código de Cores e Gerador de Paleta é uma ferramenta online gratuita que converte instantaneamente entre cinco formatos principais de cores: HEX, RGB, HSL, HSV e CMYK. Ele possui um seletor de cores intuitivo e gera automaticamente paletas de cores, como cores complementares e análogas, com base na sua seleção.
Ele também inclui um verificador de relação de contraste WCAG integrado, um padrão essencial para acessibilidade na web, permitindo que você determine instantaneamente se o texto branco ou preto é adequado para a cor de fundo escolhida. Os códigos gerados podem ser copiados com um único clique e também podem ser exportados como variáveis CSS, melhorando significativamente a eficiência do desenvolvimento para web designers e engenheiros de front-end.
Como usar
Selecionar ou Inserir Cor
Clique na área de gradiente do seletor de cores para selecionar uma cor ou ajuste os controles deslizantes de Matiz e Alfa. Alternativamente, você pode inserir diretamente um código de cor nos campos HEX ou RGB.
Copiar Códigos de Conversão
Ao alterar a cor usando qualquer método, todos os formatos de cor (HEX, RGB, HSL, HSV, CMYK) são atualizados em tempo real. Clique no botão "Copiar" ao lado de cada item para salvá-lo na área de transferência. Você também pode copiar variáveis CSS de uma só vez.
Verificar Paleta e Contraste
Mude a guia "Paleta de Cores" na parte inferior para ver variações de cores como complementares e monocromáticas. Na seção "Relação de Contraste", a legibilidade do texto branco/preto na cor de fundo selecionada é determinada automaticamente.
Glossário de Cores
- HEX (Código de Cor Hexadecimal)
- O formato de especificação de cor mais comumente usado em web design. É expresso em 6 dígitos como "#RRGGBB" (ou 3 dígitos "#RGB"), especificando a intensidade de Vermelho (R), Verde (G) e Azul (B) em hexadecimal (00-FF). Ao incluir transparência, é escrito em 8 dígitos como "#RRGGBBAA", e é amplamente suportado em CSS e HTML.
- RGB / RGBA
- Um modelo de cor aditivo baseado nas cores primárias da luz (Vermelho, Verde, Azul). Com base no princípio de geração de cores dos monitores, cada cor é representada por um valor de 0 a 255. Em CSS, é escrito como "rgb(255, 0, 0)", e com "rgba", um valor alfa (transparência) de 0.0 a 1.0 pode ser adicionado no final.
- HSL
- Um modelo que representa a cor com três atributos: Matiz (Hue), Saturação (Saturation) e Luminosidade (Lightness). Como é fácil ajustar intuitivamente como "mudar o tom da cor" ou "tornar mais escuro", é altamente adequado para construir sistemas de design usando CSS (função hsl) e alterações dinâmicas de temas.
- CMYK
- Um modelo de cor subtrativa usando quatro cores: Ciano, Magenta, Amarelo e Chave (Preto). É um formato de tinta usado principalmente na indústria de impressão, e os valores CMYK em um navegador são valores teóricos aproximados, portanto, ajustes por meio de perfis são necessários para impressão real.
- Relação de Contraste (WCAG)
- A proporção da luminância relativa entre a cor de fundo e a cor do texto, definida pelas Diretrizes de Acessibilidade da Web. Para garantir que todos os usuários possam ler o texto, recomenda-se uma proporção de "4.5:1 (nível AA)" ou superior para texto normal, e "3:1" ou superior para texto grande.
Perguntas Frequentes
- Q.Os resultados da conversão CMYK são precisos para impressão?
- Os valores CMYK calculados no navegador são valores teóricos aproximados. As cores impressas reais podem variar dependendo do perfil ICC da sua impressora e das características da tinta. Para dados CMYK precisos para impressão, converta e verifique usando software de gerenciamento de cores como Adobe Illustrator ou Photoshop.
- Q.A ferramenta suporta a conversão alfa (transparência)?
- Sim. Ao ajustar o controle deslizante "Alfa" no seletor de cores ou inserir diretamente o valor alfa no código, códigos HEX (#RRGGBBAA), RGBA e HSLA serão gerados corretamente. Isso é ideal para implementações modernas de UI da web que exigem transparência.
- Q.O que é o recurso "Copiar Vars CSS"?
- Este recurso produz a cor selecionada como propriedades personalizadas CSS (Variáveis CSS). Ele gera formatos como --color-primary: #3b82f6;, junto com valores separados por vírgulas para RGB e HSL, tornando extremamente fácil configurar o Tailwind CSS ou temas dinâmicos.
- Q.Meus dados de cores inseridos são salvos em um servidor?
- Não. Esta ferramenta opera inteiramente do lado do cliente (dentro do seu navegador). Nenhum dos seus códigos de cores ou paletas geradas é transmitido ou salvo em servidores externos. O recurso "Favoritos" também salva cores estritamente no armazenamento local do seu navegador, garantindo a sua privacidade.
Casos de uso
Web Design & Codificação
Converta em lote códigos HEX especificados em ferramentas de design como Figma ou XD em formatos RGB ou HSL para desenvolvimento. Simplifique a construção de temas modernos usando variáveis CSS.
Melhoria de Acessibilidade
Verifique instantaneamente se a combinação de cor de fundo do site e cor do texto atende aos padrões de relação de contraste WCAG (AA/AAA) durante a codificação, alcançando uma interface do usuário mais legível.
Revisão de Esquema de Cores
Gere automaticamente paletas relacionadas, como cores complementares ou análogas, com base nas cores da marca corporativa. Útil para considerar esquemas de cores de apresentações e designs gráficos coesos.
Guia de Conversão para Impressão
Converta as cores usadas na web em valores CMYK para usá-las como referência para valores aproximados ao implantar materiais impressos, como panfletos e cartões de visita.
Enviar feedback
Deixe-nos saber sua opinião para nos ajudar a melhorar a ferramenta.
O feedback está temporariamente suspenso
O servidor está ocupado ou a proteção contra spam está ativa. Tente novamente mais tarde.