Calculadora de cor e imagem: contraste e paletas

Cinco painéis compartilham um mesmo motor de cor: Converter (HEX, RGB, HSL, HSV, CMYK, LAB, LCH), Contraste (a proporção WCAG com selos AA/AAA), Paletas (seis esquemas de harmonia, tons e sombras, pré-visualizações de daltonismo), Imagem (cor média, paleta dominante, histograma RGB de um arquivo) e Fotografia (profundidade de campo, exposição, astro, saída). Cada painel tem o próprio endereço — /life/color/convert, /life/color/contrast, /life/color/image, /life/color/photo — e roda no navegador.

更新 2026-10-015 个来源约 5 分钟读完

Como usar

Converter uma cor.Ajuste o seletor ou digite um valor HEX, ou arraste os controles R/G/B e H/S/L; oito cartões se atualizam juntos, cada um copiável, e a cor CSS nomeada mais próxima informa sua distância ΔE₇₆.
Verificar o contraste.Escolha primeiro plano e fundo: uma proporção, quatro selos (AA/AAA, texto normal e grande) e uma amostra ao vivo. Se AA normal falhar, clique na amostra sugerida para aplicar uma correção só de luminosidade que chega a 4.5 : 1.
Montar uma paleta.Seis linhas — complementar, complementar dividida, triádica, tetrádica, análoga, monocromática — seguem a cor base, e depois vem uma faixa de 13 níveis de tons e sombras; cada amostra copia como HEX. A pré-visualização de daltonismo mostra um esquema escolhido em protanopia, deuteranopia e tritanopia.
Ler uma imagem.O arquivo escolhido é decodificado localmente e reduzido a no máximo 480 px de largura. Clique em um pixel para HEX, RGB e HSL; o painel acrescenta a cor média, até seis cores dominantes de um median cut e um histograma RGB de 64 classes.
Planejar uma foto.As abas de Fotografia cobrem profundidade de campo, exposição (EV, escada de obturador, filtros ND e contagem regressiva, sunny-16, flash), astro (regras 500 e NPF, rastros de estrelas, fase da lua) e saída (tamanho de impressão, estimativa de arquivo, timelapse).

Exemplos resolvidos

Leituras dos valores padrão desta página.

Você digita	A página mostra
`#4a90e2`	hsl(212, 72%, 59%), hsv(212, 67%, 89%), cmyk(67%, 36%, 0%, 11%), lab(58.87 3.995 -48.11), lch(58.87 48.27 274.7), luminância 0.2689, mais próximo cornflowerblue · #6495ed · ΔE₇₆ = 6.26
`#999999` sobre branco	2.85 : 1 — os quatro selos falham; o primeiro plano sugerido #757575 dá 4.61 : 1
`#767676`, depois `#777777`, sobre branco	4.54 : 1 passa AA normal e os dois selos de texto grande; 4.48 : 1 falha AA normal por 0.02
Base da paleta `#4a90e2`	triádica #4a90e2 / #e24a90 / #90e24a; tons e sombras #e5effb → #0b1520; par complementar em deuteranopia #6b66ce / #cbd06b
Foto: 50 mm, f/8, 3 m, full-frame; f/8, 1/250 s, ISO 100	perto 2.36 m, longe 4.12 m, total 1.76 m, hiperfocal 10.88 m; EV 13.97; ND1000 em 1/125 s dá 8.2″
Foto: 24 mm, f/2.8, 24 MP, declinação 0°; 6000 × 4000 px a 300 dpi	regra 500 20.8 s, NPF 11.6 s, rastro 6.1 px; impressão 50.8 × 33.9 cm, Excelente, RAW 14 bits 24.8 MB

Os números WCAG por trás dos selos

Cada canal sRGB é linearizado (÷12.92 abaixo do ponto de corte 0.04045, caso contrário ((v + 0.055) / 1.055)²·⁴), a luminância relativa é L = 0.2126 R + 0.7152 G + 0.0722 B, e a proporção de contraste é (L_light + 0.05) / (L_dark + 0.05) — preto sobre branco 21.00 : 1, cores iguais 1.00 : 1. Limiares: AA normal 4.5, AA grande 3.0, AAA normal 7.0, AAA grande 4.5. Os cartões de conversão seguem sRGB → RGB linear → XYZ (D65) → CIELAB → LCH; o cartão do nome mais próximo usa ΔE₇₆ contra as 148 palavras-chave CSS.

Premissas e limites

Somente sRGB.: Sem perfil de monitor ou verificação de gamut; o cartão CMYK é uma simples subtração c/m/y/k — um valor de diálogo, não uma prova de impressão.
Arredondamento na tela.: LAB e LCH mostram quatro algarismos significativos e as proporções duas casas decimais; os veredictos comparam o valor sem arredondamento.
Análise, não edição.: O painel Imagem nunca grava pixels: sem corte, redimensionamento, filtro, conversão de formato ou exportação. O planejamento de fotos pertence ao painel Fotografia, os horários do céu ao painel Astronomia Sol e o empacotamento de bits de cor à calculadora de programador.

A armadilha do limite de texto grande

O selo que as pessoas leem errado é AAA grande: exige 4.5 : 1, igual a AA normal, e não o 3 : 1 que AA grande permite — passar em «texto grande» no AA não garante nada no AAA. Sobre branco, #767676 dá 4.54 : 1 e passa AA normal mais os dois selos de texto grande (AAA normal exige 7.0), enquanto #777777 dá 4.48 : 1 e falha AA normal por dois centésimos. «Grande» significa 18 pt normal ou 14 pt negrito, e a proporção é simétrica: trocar texto e fundo não muda nada.

Onde ajuda

Trabalho de interface e marca

Confira texto de corpo e botões contra os dois fundos, mantenha um par de modo escuro honesto, tire uma harmonia de seis cores de um logotipo e veja se uma paleta de status vermelho/verde sobrevive à deuteranopia.

Fotografia e trabalho de imagem

Amostre a cor média e as dominantes de uma foto antes de escolher um tom de sobreposição, depois verifique se 50 mm em f/8 mantém um assunto a 3 m em 1.76 m, quanto o ND1000 estica 1/125 s ou quantos quadros de 24 MP preenchem um timelapse de 100 s.

Cor no código e na impressão

Entregue a um desenvolvedor a string exata hsl(212, 72%, 59%) ou LAB, verifique um hex de marketing contra uma página branca ou confira uma leitura CMYK antes de enviar a arte a uma gráfica.

Referências

W3C, WCAG 2.2 — Contrast (Minimum) and Contrast (Enhanced), w3.org （访问日期：2026-10-01）— os limiares 4.5 : 1, 3 : 1 e 7 : 1 e a definição de texto grande.
W3C, WCAG 2.2 — relative luminance, w3.org （访问日期：2026-10-01）— os coeficientes e o deslocamento de 0.05 por trás de cada proporção.
Wikipedia, CIELAB color space, en.wikipedia.org （访问日期：2026-10-01）— a transformação de XYZ para Lab e a forma polar LCH dos cartões de resultado.
Wikipedia, Median cut, en.wikipedia.org （访问日期：2026-10-01）— o algoritmo de cor dominante por trás das seis amostras de imagem.
Wikipedia, Depth of field, en.wikipedia.org （访问日期：2026-10-01）— a distância hiperfocal e os limites próximo e distante que a aba Foto informa.