Como Calibrar Cor para a Web
Quando a laranja é mais vermelha? Web designers, mesmo os exigentes, às vezes ignoram a mudança de cores nos monitores.
Como um web designer pode gerenciar cores quando as telas de seus usuários podem ser de qualquer tamanho ou cor ou podem ser visualizadas sob quaisquer condições de iluminação?
Ao contrário de corrigir erros de HTML, que afetam os navegadores conforme a página é carregada, a obtenção de cores precisas faz parte do processo de trabalho do designer.
A manutenção das cores nos projetos é possível quando os problemas são compreendidos. Leia sobre os desafios - e soluções - para obter cores consistentes na Web.
Você consegue identificar a diferença entre as fotos abaixo?
Uma das imagens é um pouco mais azul que a outra. Essa "mudança de cor", ou matiz geral de um matiz particular, pode passar despercebida pelo observador casual. Afinal de contas, uma ligeira mudança de tonalidade não diminui a flor nem diminui os detalhes da gota de orvalho. É uma mudança cumulativa.
Ao longo do tempo, imagens JPEG de qualidade máxima e ícones PNG de 256 cores consomem uma largura de banda preciosa. A complexidade em HTML aumenta a carga de trabalho do navegador com cada carregamento de página. Ao contrário desses problemas, que se somam à medida que os visitantes navegam pelo site, o gerenciamento de cores é um problema no processo de design . Imagens criadas em um monitor não calibrado tornam-se inconsistentes ao longo do tempo.
Mudança de cor poderia passar por outro nome: desatenção.
Quando podemos dizer que a cor de um gráfico corresponde à página perto o suficiente? Em que ponto a cor de uma foto é muito imprecisa? Quais detalhes não importam para o projeto como um todo? Todos podem ter respostas diferentes, mas ninguém que leva as imagens digitais a sério pode ignorar a calibração de cores.
A indústria de impressão tem lutado para obter cores precisas por décadas. Garantir que as mesmas cores exatas apareçam em todos os estágios de produção - inclusive em vários monitores, impressoras de escritório e impressoras high-end - gerou sua própria indústria de dispositivos de calibração, soluções de software e até mesmo padrões ISO.
A comunidade de web design geralmente não se preocupa com as verificações de imprensa. Mas talvez devesse.
A Web teve problemas de cores, uma vez que tinha cor
Nos anos 90, obter cores precisas na Web significava usar uma paleta de 216 cores "seguras para a Web". Esses matizes e sombras eram (principalmente) garantidos para não serem aplicados quando exibidos em monitores que não conseguiam lidar com cores de mais de 8 bits.
Acima é um gradiente com e sem pontilhamento. Hoje, a grande maioria dos computadores pode mostrar cores de 24 bits ou melhor (de acordo com essas estatísticas de exibição do navegador e rastreamento de sites do Google Analytics, incluindo Webdesigner Depot). Ou seja, cada pixel pode mostrar um dos milhões de cores, tornando a calibração complicada e mais crítica.
Há muito tempo, a web conta com códigos hexadecimais, como # F35C23, para definir cores. Essas seqüências de seis caracteres podem exibir uma grande variedade de matizes e valores com grande precisão. Uma imagem que tenha # F35C23 e um plano de fundo CSS em # F35C23 corresponderá perfeitamente.
O problema é que o código define uma combinação de vermelho, verde e azul, mas nem sempre resulta em cores consistentes. As telas de exibição respondem pela diferença.
Branco é branco, exceto quando não é
Muitos fatores afetam a precisão das cores ao criar e editar imagens digitais. Assim como na impressão, a cor na web depende do ambiente em que a imagem é criada. Ao contrário da impressão, as imagens baseadas na Web podem mudar sempre que são exibidas porque os monitores dos usuários podem variar, e nenhuma verificação de imprensa pode detectar problemas que surgem.
Embora muitos navegadores modernos possam exibir
Mas nem todos os monitores são construídos da mesma forma e, portanto, um tom específico de laranja pode ser inconsistente em diferentes telas. Aqui estão algumas das causas da mudança de cor:
- Pequenas mudanças entre fabricantes e modelos são responsáveis por pequenas imprecisões na tonalidade e matiz.
- Muitas telas (especialmente monitores CRT ) mudam de cor ao longo dos anos e até aquecem ao longo de um dia.
- Até recentemente, o Mac OS X e o Windows usavam duas “gamas” diferentes, o que significava que as imagens em Macs eram mais brilhantes que as do PC. O Mac OS X 10.6 (Snow Leopard) usa o gama mais comum de 2.2 , que é o mesmo que o Windows e muitos televisores e filmadoras.
- As pessoas navegam na Web a partir de muitos locais diferentes e em muitas condições de iluminação diferentes. O efeito das luzes no teto e a quantidade e cor da luz natural afetam a aparência da cor na tela.
Acima, calibração diferente mostra que "branco" é geralmente uma cor assumida:
- A imagem original, filmada sob luz fluorescente com uma câmera point-and-shoot.
- Mudança de cor aproximada em um Mac antes do Snow Leopard.
- Mudança de cor aproximada em um monitor CRT de envelhecimento.
- Perto da cor real, como visto no laptop em que a foto foi processada.
Um monitor levemente vermelho pode mostrar um azul perfeito como um pouco púrpura, ou mostrar um verde com um tom amarelo. Os monitores configurados com brilho demais apagam sombras e realces; monitores definidos muito escuros sombras enlameadas e aumentam a chance de mudança de cor em realces. Para os designers que se importam com esses detalhes, o controle de qualidade é definitivamente um desafio.
Deslocamento de cor PNG
Simplificando, o valor gama altera a luminosidade de uma imagem exibida. Projetado para exibição digital, o formato de imagem PNG permite que os designers adicionem correção de gama a cada imagem. Mas sem conhecer a luminosidade do dispositivo de saída (ou seja, sem saber o tipo de monitor em que a imagem aparecerá), os designers têm dificuldade em adicionar correção de gama precisa.
Esta característica tornou-se o problema mais notório da PNG. Na Web, uma imagem às vezes corresponderá às cores hexadecimais especificadas no CSS e, outras vezes, não corresponderá - mesmo que tenha sido criada com a cor correta.
Programas como o PNGCrush (Windows) e PNGenie (Mac) pode remover informações em excesso de arquivos PNG, incluindo a configuração de gama, o que torna a cor mais confiável.
Outros problemas
Evitar a mudança de cores pode exigir mudanças na maneira como os designers trabalham. Calibração de cores ruim se destacará com o tempo. É um daqueles detalhes de design que não são comentados e que não devem ser notados.
Soluções Industriais
Várias soluções tiraram muito do trabalho de adivinhação do gerenciamento de cores e da prevenção da mudança de cores.
o Consórcio Internacional de Cores (
Perfis ICC são arquivos que contêm informações sobre como vários dispositivos exibem cores. As impressoras e a maioria dos computadores são fornecidos com perfis ICC integrados, porque seus fabricantes sabem exatamente como funcionam. Mas os perfis ICC personalizados podem adaptar um determinado dispositivo a determinadas condições - por exemplo, quando um monitor é usado sob luzes fluorescentes, em vez de ao lado de uma janela grande.
Além de combinar as cores nas telas (e na impressão), o Adobe Flash Player 10 oferece suporte a perfis ICC , permitindo o gerenciamento de cores entre o Flash e as impressoras (supondo que a impressora do usuário final use um perfil ICC).
Em 1996, a Hewlett-Packard e a Microsoft definiram o padrão vermelho, verde, azul (
Essas soluções técnicas são respostas de toda a indústria de organizações profissionais. Mas os designers também podem tomar medidas para manter o trabalho consistente ao longo do tempo.
Dicas para preparar uma sala para trabalhos em cores
Que tipo de luz você está usando agora? Se você estiver lendo isso em sua área de trabalho principal e se a cor exata for importante para você, poderá executar etapas para melhorar sua área de trabalho agora mesmo.
- Dez segundos por meia hora
Faça uma pausa rápida e olhe para um cartão cinza de 18% . Observar o mesmo cartão sob as mesmas condições de iluminação é uma boa maneira de “redefinir” seus olhos. (Nota: os puristas recomendam 12% de cartões cinza. Eles são bons também, contanto que você use o mesmo cartão todas as vezes. O ponto é olhar para algo consistente e neutro.) - Dez minutos
Mova o seu monitor para fora da luz direta. Nunca deixe uma fonte de luz atingir diretamente a tela. - Quinze minutos
Remova acessórios de mesa coloridos (calendários, marcadores, fotos, pastas - qualquer coisa que não seja cinza) da sua linha de visão. Se o seu monitor for refletivo, não mantenha itens coloridos diretamente atrás de você. - Dez minutos por dia
Deixe seus olhos se ajustarem ao ambiente antes de começar a trabalhar. Dê aos seus olhos tempo para se adaptarem ao espaço de trabalho, especialmente se você acabou de chegar da luz solar ou da iluminação noturna externa. Se necessário, use um temporizador. - Dez minutos por semana
Limpe seu monitor. Use um pano sem fiapos para remover suavemente manchas de poeira e impressões digitais, ou consulte o manual do proprietário para instruções de limpeza. Faça o mesmo com seus óculos, se você usá-los. - Um dia ou mais
Cubra as janelas próximas com telas grossas ou cortinas. Os principais benefícios da luz natural são a precisão - é difícil se tornar mais natural que a luz solar - e a disponibilidade. Mas a luz natural varia. Ele muda ao longo do dia, com o clima e com as estações do ano. - Um fim de semana
Cerque seu espaço de trabalho com cinza neutro. Pinte as paredes e substitua os móveis escuros por algo sem graça. Idealmente, sua área de trabalho deve refletir apenas cerca de 60% da luz que a atinge. Pintura Cinza Neutra GTI Munsell é popular entre os fotógrafos para criar fundos neutros. - Um fim de semana ou tempo de envio
Se você não conseguir ajustar a iluminação do escritório, comprar ou montar um monitor para evitar reflexos e mudanças de condições.
Dicas para calibrar seu monitor
O objetivo da calibração é eliminar as mudanças de cores e otimizar o intervalo de tons do monitor. As sombras devem ser ricas, mas ainda mostrar detalhes. Os destaques mais brilhantes não devem ser nem muito quentes nem muito frios. A longo prazo, isso cria cores precisas e consistentes.
Aqui estão os passos gerais:
- Aqueça seu monitor por pelo menos 30 minutos.
- Selecione gamma (5000-9500 ° K, gama 1,8-2,2).
- Encontre os melhores pontos brancos e pretos.
- Equilibre vermelho, verde e azul para evitar projeções de cores.
- Repita este processo mensalmente.
Muitos programas orientarão você nesse processo. O Adobe Gamma é uma solução rápida popular para calibrar monitores CRT. Além de ser fácil de usar, é grátis com a compra do Photoshop ou do Photoshop Elements. Outras soluções são QuickGamma (Windows) e Datacolor's Spyder calibrador de hardware.
Colour Me Picky
Cores precisas e consistentes são um desses pequenos detalhes que a maioria das pessoas - incluindo os web designers - preferem ignorar diante de erros de análise, padrões da Web, desinformação de clientes e boa pressão no prazo.
Mas também é um desses elementos que contribuem para uma melhor experiência geral. Uma vez que os designers começam a notar desvios na tonalidade e sombras enlameadas, não querer fazer um trabalho melhor se tornará incomum.
Escrito exclusivamente para Webdesigner Depot por Ben Gremillion. Ben é um freelancer web designer quem resolve problemas de comunicação com melhor design.