Encontre a cor exata
Ajuste matiz, saturação e brilho, ou cole um código, e copie o valor em HEX, RGB, HSL, OKLCH ou CMYK com um clique.
ExperimentarFerramentas de cor online
Seletor de cor, paletas e códigos de cor num só lugar
Escolha qualquer cor e copie seu código HEX, RGB, HSL ou OKLCH, crie paletas com harmonias, tire as cores de uma foto e verifique o contraste WCAG.
Grátis e sem cadastro. Tudo funciona no seu navegador: suas imagens nunca saem do seu dispositivo.
Tudo o que você precisa para trabalhar com cor
Crie paletas que combinam
Parta de uma cor e aplique harmonias do círculo cromático: análoga, complementar, triádica ou tetrádica. Exporte para CSS, Tailwind ou Figma.
ExperimentarTire as cores de uma foto
Envie uma imagem e obtenha sua paleta dominante, ou pegue qualquer pixel com o conta-gotas. A imagem é processada no seu navegador.
ExperimentarVerifique se dá para ler bem
Meça o contraste entre texto e fundo segundo as WCAG 2.2 e descubra na hora se cumpre AA e AAA.
ExperimentarMais de 900 paletas prontas para usar
Filtre por cor ou por estilo (pastel, vintage, neon…), guarde suas favoritas e abra qualquer paleta no círculo cromático para ajustá-la.
Explorar paletasDa primeira cor ao código final
- HEX
- #E4572E
- RGB
- rgb(228, 87, 46)
- HSL
- hsl(14, 77%, 54%)
- OKLCH
- oklch(0.6372 0.1838 36.48)
- CMYK
- C0 M62 Y80 K11
1. Códigos de cor em todos os formatos
A mesma cor é escrita de forma diferente conforme onde você a usa. Teste qualquer cor aqui mesmo e copie o formato de que precisa.
HEX para a web
O formato mais comum no CSS e em ferramentas de design: seis dígitos depois do sinal #.
RGB e HSL para ajustar
O RGB separa vermelho, verde e azul de 0 a 255. O HSL trabalha com matiz, saturação e luminosidade, então criar variantes é muito fácil.
OKLCH para escalas modernas
O formato mais recente do CSS: as mudanças de luminosidade são percebidas de forma uniforme, ideal para escalas de cor.
2. Combinações que funcionam
Uma boa paleta não é questão de sorte: ela se apoia nas relações entre os tons do círculo cromático.
Harmonias de cor
Análoga para resultados tranquilos, complementar para dar contraste e triádica para designs cheios de vida.
Misturas e degradês
Misture duas cores para encontrar o tom intermediário ou crie degradês CSS lineares, radiais e cônicos.
Cores do Tailwind e do Material
Consulte as escalas oficiais e teste-as em componentes de interface reais.
3. Projete para todo mundo
Cerca de 8% dos homens têm algum tipo de daltonismo, e muitas telas são vistas com reflexos. Verificar a cor também é projetar.
Contraste WCAG
Calcule a razão entre texto e fundo e verifique os níveis AA e AAA para texto normal e grande.
Simulador de daltonismo
Veja sua paleta como a veem pessoas com protanopia, deuteranopia, tritanopia ou acromatopsia.
Todas as ferramentas do Matizly
12 ferramentas gratuitas que funcionam no seu navegador e dão o código pronto para colar.
- Seletor de corEscolha qualquer cor e copie Hex, RGB, HSL ou OKLCH com tons e harmônicas.
- Círculo cromáticoExplore harmônicas num círculo interativo e crie paletas equilibradas.
- Cores de imagemExtraia cores de qualquer imagem e monte paletas a partir de uma foto.
- Misturador de corMisture duas cores e obtenha o resultado intermediário pronto para copiar.
- Gradientes CSSCrie degradês CSS lineares, radiais ou cônicos com pré-visualização.
- Paletas de coresExplore paletas prontas e guarde as favoritas neste dispositivo.
- Nomes de coresConsulte cores nomeadas HTML/CSS e copie Hex, RGB e HSL na hora.
- Cores TailwindExplore as tabelas de cores do Tailwind CSS e do Material Design.
- Cores UITeste famílias Tailwind em componentes UI reais.
- Contraste WCAGVerifique o contraste WCAG entre texto e fundo para uma UI acessível.
- DaltonismoSimule como suas cores aparecem com diferentes tipos de daltonismo.
- Hex ↔ RGBConverta Hex para RGB na hora para CSS, design e handoff.
Códigos de cor por família
O código de um tom representativo de cada cor e centenas de paletas construídas a partir dele.
- Vermelho#E63946rgb(230, 57, 70)Paletas em vermelho →
- Laranja#F4A261rgb(244, 162, 97)Paletas em laranja →
- Marrom#8B5E3Crgb(139, 94, 60)Paletas em marrom →
- Amarelo#FFD166rgb(255, 209, 102)Paletas em amarelo →
- Verde#2A9D8Frgb(42, 157, 143)Paletas em verde →
- Turquesa#06D6A0rgb(6, 214, 160)Paletas em turquesa →
- Azul#118AB2rgb(17, 138, 178)Paletas em azul →
- Violeta#7209B7rgb(114, 9, 183)Paletas em violeta →
- Rosa#FFAFCCrgb(255, 175, 204)Paletas em rosa →
- Cinza#6C757Drgb(108, 117, 125)Paletas em cinza →
- Preto#000000rgb(0, 0, 0)Paletas em preto →
- Branco#FFFFFFrgb(255, 255, 255)Paletas em branco →
Perguntas frequentes
Abra o seletor de cor, ou digite a cor no campo «Teste uma cor» desta página (por exemplo #E4572E, rgb(228, 87, 46) ou tomato), e você verá seu código HEX, RGB, HSL, OKLCH e CMYK. Se a cor estiver numa foto, use o seletor de cor de imagem.
Descrevem a mesma cor. O HEX usa seis dígitos hexadecimais (#E4572E) e o RGB três números de 0 a 255 (rgb(228, 87, 46)). Você pode converter de um para o outro sem perder nada.
Parta de uma cor base e use o círculo cromático para aplicar uma harmonia: análoga, complementar, triádica… Você também pode explorar paletas prontas ou tirá-la de uma foto.
Não. Todas as ferramentas do Matizly funcionam diretamente no seu navegador, sem cadastro.
Não. Todo o processamento, incluindo a análise de imagens, acontece no seu navegador. Não enviamos nem guardamos nada.
Sim. A partir do círculo cromático e do seletor de cor você pode exportar variáveis CSS do Tailwind e objetos do Figma, ou simplesmente copiar os códigos.
Sim. O verificador de contraste calcula a razão WCAG entre duas cores e diz se cumpre AA e AAA.
Comece a trabalhar com cor
Todas as ferramentas são grátis e funcionam no seu navegador.