Conversor de cores online
Cole uma cor em qualquer formato CSS e receba todos os outros, além do contraste.
Cole HEX, rgb(), hsl(), hwb() ou um nome de cor CSS, ou escolha uma
Tons claros e escuros
Valores
- HEX
- #3a5bd9
- RGB
- rgb(58, 91, 217)
- HSL
- hsl(227.5, 67.7%, 53.9%)
- HSV / HSB
- hsv(227.5, 73.3%, 85.1%)
- HWB
- hwb(227.5 22.7% 14.9%)
- CMYK
- cmyk(73%, 58%, 0%, 15%)
- Uma aproximação. A cor impressa depende das tintas e do papel, então peça os valores exatos à sua gráfica.
- OKLCH
- oklch(52.35% 0.1965 267.75)
- Nome CSS mais próximo
- royalblue
Contraste (WCAG)
Texto nesta cor sobre cada fundo. Texto normal precisa de 4.5:1 para AA e 7:1 para AAA; texto grande (18pt, ou 14pt em negrito) precisa de 3:1 e 4.5:1.
No branco
Texto grande
Um pequeno jabuti xereta viu dez cegonhas felizes
5.71:1
- AA normal passa
- AAA normal falha
- AA grande passa
- AAA grande passa
No preto
Texto grande
Um pequeno jabuti xereta viu dez cegonhas felizes
3.68:1
- AA normal falha
- AAA normal falha
- AA grande passa
- AAA grande falha
Em #ffffff
Texto grande
Um pequeno jabuti xereta viu dez cegonhas felizes
5.71:1
- AA normal passa
- AAA normal falha
- AA grande passa
- AAA grande passa
Próximo: Deixar fundo transparente · Criador de gráficos
Relatar um problema com esta ferramenta
Como usar Conversor de cores
Digite uma cor
Cole um código HEX, rgb(), hsl(), hwb() ou um nome como tomato, ou escolha uma com o seletor de cores.
Copie o formato que precisa
Todos os formatos se atualizam enquanto você digita. Copie qualquer um pelo botão ou escolha seu formato habitual para o botão Copiar grande.
Verifique o contraste
Veja a taxa de contraste WCAG no branco, no preto e em um fundo à sua escolha, com resultados AA e AAA para texto normal e grande.
Por que usar o Utils365
Lê qualquer cor CSS
HEX de 3, 4, 6 e 8 dígitos, rgb() e hsl() na sintaxe antiga com vírgulas ou na nova com espaços, hwb(), porcentagens, unidades de matiz e todos os 148 nomes de cores.
Formatos modernos também
Obtenha OKLCH para design systems e CSS de gama ampla, HWB e HSV para seletores de cor, e HEX com alfa para cores translúcidas.
Acessibilidade embutida
As taxas de contraste seguem exatamente o WCAG 2 e nunca são arredondadas para cima até passar, então 4.49:1 não passa como 4.5:1.
Tons claros e escuros
Cinco tons mais claros e cinco mais escuros ficam abaixo da amostra. Clique em um para torná-lo a cor atual.
Perguntas frequentes
Qual é a diferença entre HEX e RGB?
Nenhuma na cor em si. Os dois dão vermelho, verde e azul de 0 a 255. O HEX escreve cada um com dois dígitos hexadecimais, então rgb(58, 91, 217) é #3a5bd9. O HEX é mais curto, enquanto o rgb() é mais fácil de ler e ajustar à mão.
O que é HSL?
Matiz, saturação e luminosidade. A matiz é a posição no círculo cromático em graus (0 é vermelho, 120 verde, 240 azul), a saturação é o quanto a cor é viva, e a luminosidade vai do preto em 0% ao branco em 100%. Ele facilita escrever versões mais claras, mais escuras ou mais suaves de uma cor.
Por que o CMYK não bate com a cor impressa?
Telas misturam luz e impressoras misturam tinta, e o resultado depende das tintas, do papel e do perfil da impressora. O CMYK mostrado usa a fórmula padrão simples, então use-o como ponto de partida e peça os valores exatos à sua gráfica.
O que é a taxa de contraste WCAG?
Uma medida de quão distantes duas cores estão em brilho, de 1:1 (iguais) a 21:1 (preto no branco). O WCAG AA pede pelo menos 4.5:1 para texto normal e 3:1 para texto grande; o AAA pede 7:1 e 4.5:1.
O que é OKLCH?
Uma forma mais nova de escrever cores em CSS por luminosidade, croma e matiz, baseada em como as pessoas enxergam cores. Mudar a luminosidade mantém a matiz com a mesma aparência, o que a torna popular para design systems e escalas de cores.
Como funciona o nome da cor?
Se a cor corresponder exatamente a um dos 148 nomes de cores CSS, esse nome é mostrado. Caso contrário, você recebe o mais próximo pela semelhança visual, o que ajuda a descrever uma cor em palavras.