Escolha uma cor, copie o código e siga em frente
Seletor de cores, criador de gradientes e conta-gotas de imagens em uma única página. Sem conta, sem instalação e sem espera: escolha um tom e copie como HEX, RGB, HSL ou HSV.
Códigos de cor
#0F37FFrgb(15, 55, 255)hsl(230°, 100%, 52.94%)hsv(230°, 94.12%, 100%)cmyk(94.12%, 78.43%, 0%, 0%)xyz(19.61, 10.05, 95.5)lab(37.93, 62.96, -98.45)lch(37.93, 116.86, 302.6°)Cores em alta
Ver todas as cores em altaO que tem aqui
Conta-gotas
Colete cores de uma imagem enviada, ou de qualquer coisa na tela onde o navegador permitir. Solte um arquivo na página e clique em um pixel.
Conversão de formatos
Alterne na hora entre HEX, RGB, HSL, HSV, CMYK, XYZ, LAB e LCH, e copie qualquer valor direto para o CSS ou sua ferramenta de design.
Criador de gradientes
Adicione e arraste paradas pela barra, alterne entre linear e radial, ajuste ângulo e opacidade e copie o CSS pronto.
Histórico de cores
Cada cor e gradiente fica guardado no seu navegador, para você voltar depois ou reaproveitar em outro projeto.
Harmonias e variações
Cada página de cor mostra tons claros, escuros e seis esquemas de harmonia, e transforma qualquer um deles em gradiente com um clique.
Grátis e privado
Sem paywall e sem rastrear o que você escolhe. Imagens enviadas são lidas no navegador e não vão a lugar nenhum.
Para quem é
- Designers e times de produto
- Para esboçar uma interface ou paleta de marca, explorar combinações e copiar o CSS exato de um gradiente.
- Ilustração e arte
- Para coletar cores de fotos e pinturas com o conta-gotas e planejar sombreados suaves.
- Desenvolvimento front-end
- Para produzir valores de cor consistentes num projeto e ler os valores de um design existente.
- Quem confere acessibilidade
- Para comparar uma cor entre modelos e ajustá-la até a taxa de contraste passar do limite exigido.
Como usar
- 1
Escolha uma cor
Clique em qualquer ponto do campo de saturação e refine com os controles de matiz e alfa. HEX, RGB e HSV acompanham.
- 2
Colete de uma imagem
Arraste uma imagem para a página ou escolha um arquivo, e clique no pixel desejado. Os códigos aparecem na hora.
- 3
Monte um gradiente
Clique na barra para adicionar uma parada e arraste até o lugar. Alterne entre linear e radial e ajuste o ângulo.
- 4
Copie e reutilize
Copie o valor ou a declaração CSS completa. Tudo que você escolhe é salvo automaticamente.
Perguntas frequentes
Uma ferramenta pequena que não atrapalha
Começou como um utilitário interno: queríamos pegar uma cor, ajustar e seguir, sem abrir antes um programa de design pesado. É de propósito uma página só, de propósito rápida, e vai continuar gratuita.
Extensões de navegador
Prefere capturar cores direto das páginas que visita? As extensões para Chrome e Edge colocam um conta-gotas na sua barra, mantêm o próprio histórico e abrem esta ferramenta com um clique.