MyDevTools
PT

Conversor de Cores

Converta cores entre HEX, RGB, HSL e CMYK, gere uma paleta de 9 tons e verifique o contraste WCAG entre duas cores no navegador.

Os dados inseridos e arquivos ficam no navegador

Cor

Exemplos: #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%), cmyk(76%, 47%, 0%, 4%)

Formatos Convertidos

Verificador de Contraste

Texto de Exemplo16 px

Texto de Exemplo24 px

Texto grande significa pelo menos 24 px em peso normal ou cerca de 18,67 px em negrito.

Razão de Contraste—

    Tons claros e escuros

    Mistura com preto (escuros) e branco (claros) em sRGB de luz linear. Clique em uma amostra para copiar seu HEX.

    Nesta página

    Cole uma cor CSS em qualquer notação comum e receba a mesma cor em HEX, RGB, HSL e CMYK, pronta para copiar. A página também monta uma paleta de tons mais claros e mais escuros e verifica o contraste WCAG entre texto e fundo.

    Funcionalidade detalhada

    O formato é detectado automaticamente: #3b82f6, a forma curta #38f (a cerquilha é opcional), rgb(59, 130, 246) ou rgba(…) com canais de 0 a 255 ou em porcentagem, hsl(217, 91%, 60%) com deg opcional e cmyk(76%, 47%, 0%, 4%). A sintaxe CSS separada por espaços, como rgb(59 130 246 / 50%), também funciona; o alfa é aceito, mas ignorado, porque os resultados não têm transparência. Valores inválidos ou fora do intervalo geram um erro em vez de serem adivinhados. Você também pode escolher a cor no seletor nativo.

    A paleta mistura a cor atual com preto (tons escuros) e branco (tons claros) a 20, 40, 60 e 80% em sRGB de luz linear — nove amostras com a original no centro; clicar em uma amostra copia seu código HEX. O verificador de contraste recebe uma cor de texto e uma de fundo e mostra a razão com os quatro limites do WCAG 2.x: AA 4.5:1 e AAA 7:1 para texto normal, AA 3:1 e AAA 4.5:1 para texto grande.

    Todas as conversões são fórmulas JavaScript executadas na própria página — nada é enviado. O CMYK usa a fórmula simples sem perfil ICC, útil como referência, não para pré-impressão. HSL e CMYK são arredondados para inteiros, então a conversão de volta pode diferir em uma unidade.

    Exemplos práticos

    De HEX para tudo: #3b82f6 resulta em rgb(59, 130, 246), hsl(217, 91%, 60%) e cmyk(76%, 47%, 0%, 4%).

    De HSL para HEX: hsl(0, 100%, 50%) vira #FF0000, assim como cmyk(0%, 100%, 100%, 0%).

    Contraste: texto cinza #777777 sobre fundo branco #ffffff tem razão 4.48:1 — passa em AA para texto grande (3:1), mas não em AA para texto normal (4.5:1).

    Par padrão: o par predefinido #1e3a8a sobre #ffffff chega a 10.36:1 e passa nos quatro níveis WCAG.

    Como usar esta ferramenta

    1. Informe uma cor

      Digite ou cole um valor em Entrada Manual (HEX, rgb(), hsl() ou cmyk()) e clique em Converter ou pressione Enter — ou escolha uma cor no Seletor de Cores.

    2. Copie o formato desejado

      Em Formatos Convertidos, clique no botão de copiar ao lado de HEX, RGB, HSL ou CMYK.

    3. Copie um tom claro ou escuro

      Em Tons claros e escuros, clique em uma amostra para copiar seu código HEX.

    4. Verifique o contraste

      No Verificador de Contraste, defina a Cor de Primeiro Plano e a Cor de Fundo e confira a razão e os resultados AA/AAA.

    Dicas e melhores práticas

    • A # é opcional e a forma de três dígitos funciona: 38f é lido como #3388FF.
    • O matiz pode ter deg ou não; saturação e luminosidade vão de 0 a 100.
    • Valores fora do intervalo (por exemplo rgb(300, 0, 0)) são rejeitados, não cortados silenciosamente.
    • Para texto corrido, mire em pelo menos 4.5:1; 3:1 só basta para texto grande (24 px ou 18,66 px em negrito).
    • Não use este CMYK para produção gráfica — peça à gráfica valores baseados no perfil ICC dela.