digtools
🎨
color converter,

Color Converter & Palette

Converta instantaneamente HEX, RGB, HSL, HSV, CMYK.Inclui geração de paletas e verificação de contraste.

Conversão em Tempo Real
Suporta 5 formatos
🎨
Paletas de Cores
Geração automática
Contraste WCAG
Validação de contraste

Seletor de Cores

217°
90%
60%
1.00

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: -

AA AAA

Texto Preto Aa

Ratio: -

AA AAA

Cores Salvas

Salve cores usando ⭐ (Máx 20)

about,

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.

how to,

Como usar

PASSO 1

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.

PASO 2

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.

PASSO 3

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.

glossary,

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.
faq,

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.
use cases,

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.

Aviso Legal

As ferramentas disponibilizadas neste site são totalmente gratuitas, mas devem ser utilizadas por sua conta e risco. Não garantimos a precisão, integridade ou segurança dos resultados de cálculos, conversões ou dados gerados. Esteja ciente de que o operador não assume nenhuma responsabilidade por quaisquer danos ou problemas causados pelo uso dessas ferramentas. A maioria das ferramentas processa arquivos e cálculos localmente no seu navegador, o que significa que os dados inseridos não são enviados nem armazenados em nossos servidores.