Gerador de Cor Aleatória

Como cores são representadas em computação

Uma cor digital é uma tripla numérica (ou quádrupla, com alfa) sob um modelo de cor específico. Os modelos mais comuns no navegador são RGB (Red/Green/Blue, aditivo, usado por monitores), HEX (RGB em hexadecimal — #RRGGBB), RGBA (RGB mais canal alfa para opacidade, 0-255 ou 0.0-1.0) e HSL (Hue 0-360°, Saturation 0-100%, Lightness 0-100%), intuitivo para humanos e modelo canônico no CSS.

Com 8 bits por canal, o RGB oferece 24 bits de cor — cerca de 16,7 milhões de combinações únicas. Pipelines de impressão e design também usam CMYK (Cyan/Magenta/Yellow/Key, subtrativo, usado em impressoras), Lab / CIELAB (perceptualmente uniforme — usado para computar diferenças de cor com ΔE) e HSB/HSV (Hue/Saturation/Value, semelhante ao HSL mas com Value em vez de Lightness). O CSS moderno adiciona OKLCH e HWB do CSS Color Module 4 — OKLCH é essencialmente um substituto perceptualmente uniforme do HSL e é a forma mais precisa de interpolar entre duas cores.

Wide gamut e P3

Monitores comuns usam o gamut sRGB. Displays modernos (MacBooks recentes, iPhones, monitores profissionais) cobrem o gamut Display P3, que mostra aproximadamente 50% mais cores que o sRGB — especialmente vermelhos e verdes saturados. O CSS Color 4 permite alvejar o P3 explicitamente com color(display-p3 r g b).

Por que random puro em RGB fica feio

Sortear R, G, B uniformemente em 0-255 produz muitos marrons, cinzas e cores escuras — a porção visualmente "interessante" do cubo RGB é uma pequena fração do total. Uma abordagem melhor é sortear em HSL com Saturation e Lightness controlados, por exemplo S ∈ [40, 80] e L ∈ [40, 60], o que mantém as cores vibrantes e legíveis. Para uma distribuição ainda mais suave, sorteie um hue aleatório e amostre S/L de uma distribuição normal em torno do centro.

Acessibilidade: contraste WCAG e daltonismo

Ao usar cores aleatórias em UI, sempre revalide o contraste. O padrão WCAG exige contraste 4.5:1 para texto normal (nível AA) e 7:1 para AAA. Cerca de 8% dos homens e 0,5% das mulheres têm alguma forma de daltonismo — protanopia (vermelho), deuteranopia (verde) e tritanopia (azul) são as mais comuns. Nunca use a cor como único meio de transmitir informação.

Perguntas frequentes

Por que "cor aleatória" quase sempre decepciona? Porque o cubo RGB é majoritariamente sem graça — a maior parte das cores interessantes vive em uma casca fina. Geradores que ficam bons na prática sorteiam em HSL/OKLCH com saturação e luminosidade limitadas.

A ferramenta pode produzir uma paleta completa (análoga, complementar, triádica)? Sim — derive paletas deslocando o hue: complementar é H + 180°, triádica é H ± 120°, análoga é H ± 30°, e complementar dividida é H + 150° e H + 210°.

Devo usar HEX, RGB ou HSL no meu CSS? Qualquer um funciona. HEX é o mais curto, RGB combina bem com opacidade, HSL é o mais fácil de ajustar à mão. Em projetos modernos, considere OKLCH para interpolações e gradientes — o resultado fica muito mais natural.

Tailwind ou Material Design têm relação com isso? Sim. O Tailwind usa uma escala fixa de 50–950 por hue (slate-100 ... slate-900) onde cada degrau é aproximadamente um delta perceptual fixo. O Material Design 3 usa tokens de cor dinâmicos derivados de um único hue semente — algo essencialmente baseado em OKLCH por baixo dos panos.