Sorteie cores aleatórias com filtros de matiz, saturação e luminosidade. Copie em HEX, RGB, HSL, LAB, LCH, OKLAB e OKLCH com tons e paleta.
O Gerador de Cor Aleatória do 1FazTudo.com é a ferramenta online gratuita que sorteia cores e entrega cada uma em 7 formatos (HEX, RGB, HSL, LAB, LCH, OKLAB e OKLCH), com tons claros e escuros e histórico de recentes. É só clicar em Gerar Cor e copiar o código pronto para CSS, Figma, Canva, Tailwind ou qualquer editor.
Diferente de sorteadores simples, aqui você tem 3 modos em um só lugar — Aleatório, Filtro (por matiz, saturação e luminosidade) e Personalizar (sliders HSL manuais) — para sair do óbvio e achar o tom exato da sua marca. Tudo acontece 100% no seu navegador, sem cadastro, sem limite e sem enviar nada para servidores.
Pare de chutar código hexadecimal. Sorteie, filtre, ajuste e copie em segundos:
Aleatório para inspiração total, Filtro para sortear dentro de uma família (ex: só azuis vivos) e Personalizar com sliders de matiz, saturação e luminosidade para o ajuste fino.
Cada cor sai em HEX, RGB, HSL, LAB, LCH, OKLAB e OKLCH — do CSS clássico (#2f88ff) aos padrões modernos de design system. Clique em Copiar no formato do seu projeto.
Variações progressivas em direção ao branco e ao preto a partir da cor sorteada. Perfeitas para botões, hover, bordas e fundos em paleta monocromática.
Trave matiz (vermelho, azul, verde...), saturação (pálida, média, viva) e luminosidade (muito escura a muito clara) e sorteie só dentro do seu briefing.
Todas as cores sorteadas ficam em círculos clicáveis — compare candidatas lado a lado e volte a qualquer uma sem anotar código.
A cor ocupa o cartão de prévia com o HEX em destaque, para você sentir o tom de verdade antes de copiar — inclusive no celular.
Se você precisa escolher cor com confiança, essa ferramenta foi feita para você:
Sorteio sem método vira arco-íris. Use assim:
1. Escolha a aba: Aleatório (qualquer cor do espectro), Filtro (sorteia dentro de matiz, saturação e luminosidade) ou Personalizar (sliders HSL manuais).
2. Na aba Filtro, selecione a família (vermelho, azul, verde...), a intensidade (pálida, média, viva) e o brilho (muito escura até muito clara). Depois clique em Gerar Cor.
3. Veja a cor em 7 formatos (HEX, RGB, HSL, LAB, LCH, OKLAB, OKLCH) e clique em Copiar no formato que seu projeto usa.
4. Explore os Tons Escuros e Claros da cor para montar a paleta e volte a qualquer cor clicando nos círculos de Recentes.
| Formato | Exemplo | Use quando |
|---|---|---|
| HEX | #2f88ff | CSS, HTML, Figma, Canva — o padrão universal |
| RGB | rgb(47, 136, 255) | Canvas, opacidade e manipulação por canal |
| HSL | hsl(214, 100%, 59%) | Clarear/escurecer na mão ajustando L |
| OKLCH / LAB / LCH | oklch(0.65 0.19 250) | Design systems modernos e Tailwind v4 |
Montando paleta? Anote o HEX da principal, 1 Tom Escuro e 1 Tom Claro — pronto para CSS, Figma ou Canva.
O Gerador de Cor funciona <strong>100% no seu navegador</strong>. No modo aleatório, os valores de <strong>matiz, saturação e luminosidade (HSL)</strong> são sorteados — respeitando os filtros que você marcou — e a cor é <strong>convertida na hora para os 7 formatos</strong> (HEX, RGB, HSL, LAB, LCH, OKLAB e OKLCH) com fórmulas matemáticas de espaço de cor. Os <strong>tons</strong> são misturas progressivas com preto e branco, e o <strong>histórico de Recentes</strong> fica salvo na página enquanto ela estiver aberta. Nada é enviado para servidores: tudo acontece no seu dispositivo.
São as variações da cor sorteada: os Tons Escuros caminham em direção ao preto e os Tons Claros em direção ao branco, em mistura progressiva. Clique em qualquer quadradinho para selecionar a variação — é o jeito mais rápido de montar uma paleta monocromática para botões, hover e fundos.
A ferramenta mostra a mesma cor em 7 formatos: HEX (#2f88ff, ideal para CSS), RGB (rgb(47, 136, 255)), HSL (hsl(214, 100%, 59%)), LAB, LCH, OKLAB e OKLCH (padrões modernos de design system). Cada formato tem seu botão de copiar.
Sim. Todas as cores geradas ficam salvas na seção Recentes enquanto a página estiver aberta. Basta clicar em qualquer círculo para voltar àquela cor com todos os formatos e tons.
Sim, é 100% gratuito, sem cadastro e sem limite — gere quantas cores quiser, no celular ou no computador. Tudo roda no seu navegador, então nada é enviado para servidores.
Para CSS, HTML e a maioria dos editores: HEX (#2f88ff). Para manipular opacidade ou usar no canvas: RGB. Para ajustar tom na mão (clarear/escurecer): HSL. Para design systems modernos e Tailwind v4: OKLCH. A ferramenta entrega os 7 — copie o do seu contexto.
Use a aba Filtro para travar a família da sua marca (ex: azul para tecnologia e saúde) e sorteie até achar o tom. Depois pegue um Tom Escuro para hover/botões e um Tom Claro para fundos — você sai com uma mini-paleta pronta. Para texto, garanta contraste: teste branco e preto sobre a cor.
Anote o HEX da cor principal, escolha 1 Tom Escuro (botões, hover) e 1 Tom Claro (fundos, bordas) e volte aos Recentes para comparar candidatas lado a lado. Repita o sorteio com o mesmo filtro para achar uma cor de destaque (ex: laranja sobre azul). Regra prática: 60% neutro, 30% cor principal, 10% destaque.
São sorteadas de milhões de combinações HSL, então repetições exatas são raríssimas — e o histórico de Recentes evita que você perca uma boa. Sim, pode usar em sites, logos, posts e projetos de clientes sem restrição: cores não têm dono, e nada é enviado ou registrado em servidor.