🎨 Conversor de cores
Cole uma cor em qualquer formato – #3B82F6, rgb(), hsl() ou um nome em inglês como teal – e veja todos os outros formatos, a nota de contraste para acessibilidade e uma paleta de tons claros e escuros.
Resposta rápida: #3B82F6 equivale a rgb(59, 130, 246), hsl(217, 91%, 60%) e cmyk(76%, 47%, 0%, 4%); sua razão de contraste é de 3,68:1 sobre branco (AA só para texto grande) e de 5,71:1 sobre preto (AA).
Ainda sem avaliações · Atualizado em · Grátis · Sem cadastro
Dados: Conversor de cores
Resultado
Cor
#3B82F6
rgb(59, 130, 246)
| HEX | #3B82F6 |
| RGB | rgb(59, 130, 246) |
| HSL | hsl(217, 91%, 60%) |
| HSV / HSB | hsv(217, 76%, 96%) |
| CMYK | cmyk(76%, 47%, 0%, 4%) |
- Contraste com branco
- 3,68:1 · AA só para texto grande
- Contraste com preto
- 5,71:1 · AA
- Melhor cor de texto
- Preto
Tons claros (misturados com branco)
| Tom claro | Cor | RGB | HSL |
|---|---|---|---|
| Base | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| 10% | #4F8FF7 | rgb(79, 143, 247) | hsl(217, 91%, 64%) |
| 20% | #629BF8 | rgb(98, 155, 248) | hsl(217, 91%, 68%) |
| 30% | #76A8F9 | rgb(118, 168, 249) | hsl(217, 92%, 72%) |
| 40% | #89B4FA | rgb(137, 180, 250) | hsl(217, 92%, 76%) |
| 50% | #9DC1FB | rgb(157, 193, 251) | hsl(217, 92%, 80%) |
| 60% | #B1CDFB | rgb(177, 205, 251) | hsl(217, 90%, 84%) |
| 70% | #C4DAFC | rgb(196, 218, 252) | hsl(216, 90%, 88%) |
| 80% | #D8E6FD | rgb(216, 230, 253) | hsl(217, 90%, 92%) |
| 90% | #EBF3FE | rgb(235, 243, 254) | hsl(215, 90%, 96%) |
Tons escuros (misturados com preto)
| Tom escuro | Cor | RGB | HSL |
|---|---|---|---|
| Base | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| 10% | #3575DD | rgb(53, 117, 221) | hsl(217, 71%, 54%) |
| 20% | #2F68C5 | rgb(47, 104, 197) | hsl(217, 61%, 48%) |
| 30% | #295BAC | rgb(41, 91, 172) | hsl(217, 62%, 42%) |
| 40% | #234E94 | rgb(35, 78, 148) | hsl(217, 62%, 36%) |
| 50% | #1E417B | rgb(30, 65, 123) | hsl(217, 61%, 30%) |
| 60% | #183462 | rgb(24, 52, 98) | hsl(217, 61%, 24%) |
| 70% | #12274A | rgb(18, 39, 74) | hsl(218, 61%, 18%) |
| 80% | #0C1A31 | rgb(12, 26, 49) | hsl(217, 61%, 12%) |
| 90% | #060D19 | rgb(6, 13, 25) | hsl(218, 61%, 6%) |
Requisitos de contraste das WCAG
| Nível | Texto normal | Texto grande (18 pt ou mais, ou 14 pt em negrito) | Sobre branco | Sobre preto |
|---|---|---|---|---|
| AA | 4,5:1 | 3:1 | Só texto grande | Aprovado |
| AAA | 7:1 | 4,5:1 | Reprovado | Só texto grande |
Como usar o conversor de cores
Cole uma cor em qualquer formato comum: #3B82F6, #38F, rgb(59, 130, 246), hsl(217, 91%, 60%), hsv(217, 76%, 96%), cmyk(76%, 47%, 0%, 4%) ou um nome básico em inglês, como teal. Você recebe todos os outros formatos, uma amostra da cor, as notas de contraste e uma paleta de tons claros e escuros.
Fórmulas de conversão
HEX → RGB: cada par de dígitos hexadecimais é um canal, de 00 a FF = de 0 a 255
CMYK: K = 1 − máx(R′, G′, B′) · C = (1 − R′ − K) ÷ (1 − K), e o mesmo para M e Y (R′ = R ÷ 255)
HSL: L = (máx + mín) ÷ 2 · S = (máx − mín) ÷ (1 − |2L − 1|) · H conforme o canal dominante
Contraste = (L1 + 0,05) ÷ (L2 + 0,05), usando a luminância relativa das WCAG
Exemplo resolvido
#3B82F6 se divide em 3B, 82 e F6 = rgb(59, 130, 246). O azul é o canal mais alto (0,965), então K = 3,5% e C = (1 − 0,231 − 0,035) ÷ 0,965 = 76%, o que dá cmyk(76%, 47%, 0%, 4%). Em HSL, é hsl(217, 91%, 60%). A luminância relativa é 0,236, então o contraste é de 3,68:1 contra o branco e de 5,71:1 contra o preto – para letras pequenas, use texto preto sobre essa cor.
Cores comuns
| Cor | HEX | RGB | HSL |
|---|---|---|---|
| Vermelho | #FF0000 | 255, 0, 0 | 0°, 100%, 50% |
| Verde | #008000 | 0, 128, 0 | 120°, 100%, 25% |
| Azul | #0000FF | 0, 0, 255 | 240°, 100%, 50% |
| Laranja | #FFA500 | 255, 165, 0 | 39°, 100%, 50% |
| Verde-azulado | #008080 | 0, 128, 128 | 180°, 100%, 25% |
| Cinza | #808080 | 128, 128, 128 | 0°, 0%, 50% |
Dicas
- Os valores CMYK desta ferramenta são uma conversão simples, independente de dispositivo – para impressão profissional, converta com o perfil ICC da sua gráfica.
- Confira o contraste de cada combinação de texto e fundo do layout, e não só o da cor da marca.
Perguntas frequentes
Como converter HEX para RGB?
Divida os seis dígitos hexadecimais em três pares e converta cada um da base 16 para decimal. #3B82F6 → 3B = 59, 82 = 130, F6 = 246, ou seja, rgb(59, 130, 246).
Qual a diferença entre RGB e CMYK?
O RGB mistura luz vermelha, verde e azul para telas; o CMYK mistura tintas ciano, magenta, amarela e preta para impressão. Cores de tela muito brilhantes ou saturadas nem sempre podem ser reproduzidas no papel.
Qual a diferença entre HSL e HSV?
Os dois descrevem o matiz como um ângulo (0–360°) mais a saturação. A luminosidade do HSL vai do preto ao branco passando pela cor pura, enquanto o valor do HSV (também chamado de brilho, HSB) vai do preto até a cor pura.
Qual razão de contraste um texto acessível precisa ter?
O nível AA das WCAG 2 exige 4,5:1 para texto normal e 3:1 para texto grande (18 pt, ou 14 pt em negrito). O nível AAA exige 7:1 e 4,5:1.
O que são tons claros e tons escuros de uma cor?
Um tom claro é a cor misturada com branco, o que a clareia; um tom escuro é a cor misturada com preto, o que a escurece. É um jeito rápido de montar uma paleta coerente a partir de uma única cor da marca.
Avalie esta ferramenta
Mostramos apenas a nota média. Os relatos de erro chegam direto à nossa caixa de entrada para que possamos verificá-los e corrigi-los. Veja nossa Metodologia e nossa política de privacidade.