Computação Gráfica - 03
Prof. Jorge [email protected]
www.univasf.edu.br/~jorge.cavalcanti
www.twitter.com/jorgecav
Universidade Federal do Vale do São FranciscoCurso de Engenharia da Computação
13/11/2018Computação Gráfica – Parte 06Página 2
Cores em Computação Gráfica
• Uso de cores permite melhorar a legibilidade dainformação, possibilita gerar imagens realistas, focaratenção do observador, passar emoções e muitomais.
• Colorimetria – Conjunto de técnicas que permitemdefinir e comparar cores. Estuda como o olhohumano percebe cada cor.
• Qualquer cor pode ser definida por três parâmetros:intensidade, tonalidade cromática e saturação.
13/11/2018Computação Gráfica – Parte 06Página 3
Cores em Computação Gráfica
• Intensidade – indica o grau de intensidade luminosada superfície examinada, normalmente associada oubrilho ou claridade do material.
• Tonalidade cromática – Caracteriza o comprimento daonda dominante da cor, também chamado de matiz.
• Saturação – mede a pureza da cor, ou seja o quantoela é saturada em um só tom.
13/11/2018Computação Gráfica – Parte 06Página 4
Processo de formação de cores
• Percepção de cores
– As diferentes cores, ou espectros luminosos, que podem serpercebidos pelo sistema visual humano correspondem a umapequena faixa de freqüências do espectro eletromagnético, queinclui as ondas de rádio, microondas, os raios infravermelhos eos raios X, como mostrado na figura abaixo:
13/11/2018Computação Gráfica – Parte 06Página 5
Processo de formação de cores
• Percepção visual do mundo baseada nas coresdos objetos
– Alguns animais só enxergam em preto e branco
– Outros conseguem ver cores para nós invisíveis
• Conseguimos distinguir algumas dezenas detons de cinza
• Discernimos vários milhões de coresdiferentes
• Só percebemos as cores na presença de luz
13/11/2018Computação Gráfica – Parte 06Página 6
O que são Modelos de Cores ?
• Você precisa de um método para definir cores.
• Os modelos de cores fornecem diversosmétodos para definir cores, cada modelodefinindo usando componentes de coresespecíficos.
• Há vários modelos de cores que podem serescolhidos ao se criar um gráfico.
13/11/2018Computação Gráfica – Parte 06Página 7
Sistemas de cores aditivas
• Usados nos monitores de vídeo e TV.
• A cor é gerada pela mistura de vários comprimentosde onda luminosa, provocando uma sensação de corquando atinge o olho.
• No processo aditivo, o preto é gerado pela ausênciade qualquer cor, indicando que nenhuma luz étransmitida.
• O branco é a mistura de todas elas.
13/11/2018Computação Gráfica – Parte 06Página 8
Modelo de cor RGB
• O modelo de cor RGB define a cor usandoos seguintes componentes:
– vermelho (R)
– verde (G)
– azul (B)
• Os componentes R, G e b são asquantidades de luz vermelha, verde e azulque uma cor RGB tem e são medidos emvalores que variam de 0 a 255.
13/11/2018Computação Gráfica – Parte 06Página 9
Modelo de cor RGB
• Os monitores usam o modelo de cor RGB. Quandovocê adiciona luz vermelha, azul e verde juntas, deforma que o valor de cada componente seja 255,aparece a cor branca.
• Quando o valor de cada componente é 0, oresultado é preto puro.
13/11/2018Computação Gráfica – Parte 06Página 10
Modelo de cor RGB
• A representação da cor C de cada pixel de umaimagem pode ser obtida matematicamente por:
– C = r.R + g.G + b. B
13/11/2018Computação Gráfica – Parte 06Página 11
O cubo RGB
13/11/2018Computação Gráfica – Parte 06Página 12
O cubo RGB
13/11/2018Computação Gráfica – Parte 06Página 13
Canais RGB
13/11/2018Computação Gráfica – Parte 06Página 14
Canais RGB
13/11/2018Computação Gráfica – Parte 06Página 15
Sistemas de cores subtrativas
• Usados nas impressões e pinturas. Possui como coresprimárias o Azul Ciano, o Magenta e Amarelo (CMY).
• No processo subtrativo, cores da luz branca sãoabsorvidas.
• A luz branca ao atingir um objeto tem parte absorvidae parte refletida.
• O branco corresponde a ausência de qualquer cor e opreto a mistura de todas.
13/11/2018Computação Gráfica – Parte 06Página 16
Modelo de cor CMYK
• O modelo de cor CMYK define a cor usando osseguintes componentes:
• ciano (C)
• magenta (M)
• amarelo (Y)
• preto (K)
• Os componentes C M Y K são quantidades de tintaciano, magenta, amarelo e preto que uma cor CMYKcontém e são medidos em porcentagem de 0 a 100.
13/11/2018Computação Gráfica – Parte 06Página 17
Modelo de cor CMYK
• Os materiais impressos são reproduzidos usando omodelo de cor CMYK.
• Ao combinar ciano, magenta, amarelo e preto, deforma que o valor de cada componente seja 100, oresultado é preto.
• Quando o valor de cada componente é 0, oresultado é branco puro.
13/11/2018Computação Gráfica – Parte 06Página 18
Modelo de cor CMYK
13/11/2018Computação Gráfica – Parte 06Página 19
Combinações de cores
+
+
+
=
=
=
Subtrativas
+
+
+
=
=
=
Aditivas
Para Visualizar as combinações de cores nos Sistemas RGB E CMYK – Clique em http://www.htwins.net/lightmix/
13/11/2018Computação Gráfica – Parte 06Página 20
Modelo de cor HSV (HSB)
• Um modelo de cor que define três componentes:matiz (H), saturação (S) e brilho (V - Value).
• O matiz determina a cor ou tonalidade (amarelo,laranja, vermelho, etc.);
• O brilho determina a intensidade percebida (cormais clara ou mais escura);
– Distância para o preto.
• A saturação determina a profundidade ou “pureza”da cor (de esmaecida a intensa).
– Distância para o cinza.
13/11/2018Computação Gráfica – Parte 06Página 21
Modelo de cor HSV
• O matiz descreve o pigmento de uma cor eé medido em graus de 0 a 359.
– Por exemplo: 0 grau é vermelho; 60 graus,amarelo; 120 graus, verde;, 180 graus, ciano;240 graus, azul e 300 graus, magenta.
– A saturação descreve a vivacidade ou oesmaecimento de uma cor e é medida emporcentagem de 0 a 100 (quanto maior aporcentagem, maior a vivacidade da cor).
– O brilho descreve a quantidade de branco queuma cor contém e é medido em porcentagem de0 a 100 (quanto maior a porcentagem, maior obrilho da cor).
13/11/2018Computação Gráfica – Parte 06Página 22
• Por utilizar um sistema de cores que são mais intuitivasdo que combinações de cores primárias, é maisadequada para ser usada na especificação de cores emnível de interface com o usuário.
Modelo de cor HSV
13/11/2018Computação Gráfica – Parte 06Página 23
Modelo de cor HSV
13/11/2018Computação Gráfica – Parte 06Página 24
O modelo HSL
• Também utiliza os conceitos de matiz (Hue), purezade cor (Saturação) e luminosidade (Lightness).
• É um modelo comumente usado em aplicações degráficas por causa da forma como as cores sãoemuladas neste modelo, que se aproxima mais decomo o ser humano produz a percepção da cor.
• Permite que se pense em termos de cores mais“claras” e mais “escuras”;
• As cores são especificadas através de um ângulo.
13/11/2018Computação Gráfica – Parte 06Página 25
O modelo HSL
• A escala de “cinzas” encontra-se em S=0; nessemodelo, os matizes com máxima saturação possuem L= 0.5, e como no modelo HSV, são definidos naextremidade do hexágono.
13/11/2018Computação Gráfica – Parte 06Página 26
Sistemas de Cores
• Vantagens dos modelo HSV/HSL
– Simplicidade e facilidade de implementação;
– Popularidade entre os programadores decomputação gráfica.
• Desvantagem do modelo HSV/HSL
– A cor produzida pode variar de umdispositivo para outro.
13/11/2018Computação Gráfica – Parte 06Página 27
Uso de cores nas imagens
• A cor, como elemento fundamental em qualquerprocesso de comunicação merece atenção especial.
• Ela interfere nos sentidos, emoções e intelecto. Seuuso correto pode resultar numa rápida e corretaassimilação da informação.
• O uso de cores permite:
– Mostrar as coisas conforme são vistas na natureza.
– Representar associações simbólicas.
– Chamar e direcionar a atenção.
– Determinar um estado de espírito.
– Tornar a imagem mais fácil de ser memorizada.
13/11/2018Computação Gráfica – Parte 06Página 28
• Quantas cerejas?
Uso de cores nas imagens
13/11/2018Computação Gráfica – Parte 06Página 29
Uso de cores nas imagens
• Por se tratar de um recurso tão poderoso, o uso decor deve ser feito com cautela.
• Algumas observações sobre uso de cores:
– Uma escolha não adequada de cores pode interferir nalegibilidade da imagem;
– As cores podem apresentar características distintas emcondições diferentes;
– As cores devem ser selecionadas de modo a não causaremfadiga nos olhos do usuário e nem deixá-lo confuso.
– http://www.dokimos.org/ajff/
– http://fuzzymartian.tripod.com/
– http://www.angelfire.com/super/badwebs/
13/11/2018Computação Gráfica – Parte 06Página 30
Cores na WEB – ColorBrewer 2.0
13/11/2018Computação Gráfica – Parte 06Página 32
Cores na WEB – w3schools.com
13/11/2018Computação Gráfica – Parte 06Página 33
Tabela de Contrastes
13/11/2018Computação Gráfica – Parte 06Página 34
Tabela de Contrastes
Não use vermelho sobre azul.
Essas cores são opostas no
final do espectro
eletromagnético, dificultando
para os seus olhos focarem
ambas as cores.
Top Related