O SPIP permite extrair automaticamente uma cor de uma imagem, para aplicá-la a outros elementos da interface.
Por exemplo, ao lado de um logo de uma matéria, iremos exibir o título dessa matéria numa cor tirada desse logo. Desse modo, ao tornar a apresentação mais variada (de uma matéria para outra, a cor usada muda de acordo com o logo), o facto da cor ser extraída da imagem garante uma certa coerência gráfica.
Esta função que consiste em recuperar uma cor de uma imagem é complementada por toda uma série de funções que permitem manipular essa cor, principalmente clarear e escurecer a cor. A lista de funções é longa, permitindo um número importante de efeitos.
couleur_extraire
A partir de uma imagem (logo de matéria, logo de seção..., mas também imagens de portfolio), pede-se ao SPIP para extrair uma cor.
[(#LOGO_RUBRIQUE|couleur_extraire)]
Atenção: não se trata do SPIP determinar a cor dominante da imagem, mas de extrair uma cor da imagem. Para que essa cor seja realmente "representativa", a imagem é reduzida para um tamanho máximo de 20 pixels; assim, as diferentes cores da imagem tornam-se relativamente "médias". Este valor de 20 pixels é experimental: é suficientemente baixo para evitar extrair uma cor pouco presente na imagem, e é suficientemente elevada para evitar que a cor seja sistematicamente acinzentada.
Usada sem parâmetros, a função couleur_extraire retorna uma cor situada ligeiramente acima do centro da imagem, Pode-se indicar um ponto preferido para a sondagem, passando-se dois valores (x e y) compreendidos entre 0 e 20 (aconselhável: entre 1 e 19, para evitar os efeitos de margens).
Por exemplo:
[(#LOGO_RUBRIQUE|couleur_extraire{15,5})]
retorna uma cor situada acima e à direita do centro da imagem.
Para compreender melhor o princípio, apliquemos esse filtro a um logo de cor uniforme:
O resultado é: ff9200.
Nota: os valores retornados são sistematicamente em codificação RGB hexadecimal, omitindo o "#" que precede habitualmente esses códigos. Deve-se reinserir esse cardinal ao usar esses valores.
Pode-se, por exemplo, aplicar essa cor ao fundo de um bloco:
<div style="[background-color: #(#LOGO_RUBRIQUE|couleur_extraire);] width: 100px; height: 100px;"></div>
Apliquemos esse filtro a uma fotografia:
Abaixo à esquerda, a cor extraída sem parametros, ou seja, presente um pouco acima do centro da imagem (castanho claro da pedra do edifício). Abaixo à direita, forçamos uma cor situada no topo direito da imagem (azul claro do céu).
[(#LOGO_RUBRIQUE|couleur_extraire)]
[(#LOGO_RUBRIQUE|couleur_extraire{15,5})]
O uso desse filtro é tecnicamente bem simples. Em contrapartida, é preciso criatividade e inventividade para o explorar... Veja alguns usos:
— cor de texto;
— cor de fundo de um bloco;
— cor de uma imagem tipográfica;
— alterar a cor de uma imagem com image_sepia...
Alterar a cor
Uma vez a cor extraída, é útil manipulá-la, de modo a jogar com diferentes variantes da cor, mantendo ao mesmo tempo a coerência gráfica.
- couleur_foncer (escurecer cor), couleur_eclaircir (clarear cor)
A partir da cor extraída de uma imagem, podemos exibir tonalidades mais escuras e mais claras.
[(#LOGO_RUBRIQUE|couleur_extraire)]
[(#LOGO_RUBRIQUE|couleur_extraire|couleur_foncer)]
[(#LOGO_RUBRIQUE|couleur_extraire|couleur_eclaircir)]
Aplicado às cores extraídas nos exemplos precedentes, dará:
Pode-se obeter assim facilmente gamas de cor, com tonalidades muito coerentes.
- couleur_foncer_si_claire (escurecer cor se clara), couleur_eclaircir_si_foncee (clarear cor se escura)
Se aplicamos a cor extraída ao fundo de um bloco de texto, é preciso determinar em que cor queremos apresentar o texto (por exemplo: preto sobre laranja ou branco sobre laranja?); é o que veremos, com as funções a seguir.
Por agora, decidimos que o texto será de uma certa cor. Queremos, por exemplo, que o texto seja preto. Precisamos então escolher a cor de fundo em função desse texto preto; é preciso que a cor do fundo seja clara (portanto: texto preto sobre fundo claro).
Se aplicamos o filtro couleur_eclaircir à nossa cor extraída, temos dois casos:
— se a cor é escura, ela será clareada e obtemos o efeito desejado;
— se a cor já é clara, clareamos ainda mais, e obeteremos um fundo que pode se tornar quase branco. Sendo a cor já clara, seria melhor usá-la tal qual ela é.
É aqui que aplicamos o filtro couleur_eclaircir_si_foncee:
— se a cor for escura, a clareamos;
— se a cor for clara, usamos tal qual ela é.
O filtro couleur_foncer_si_claire usa a lógica exatamente inversa. É muito útil, por exemplo, para apresentar texto branco sobre um fundo sistematicamente escuro, mas evitando tornar esse fundo quase preto quando a cor original já é escura.
- couleur_extreme (cor extrema), couleur_inverser (inverter cor)
O filtro couleur_extreme passa uma escura para preto e uma cor clara para branco. Isto é útil para apresentar texto preto ou branco sobre um fundo colorido.
Na realidade, recuperar a cor "extrema" é comumente usado com couleur_inverser, que inverte a cor RGB, transformando o preto em branco e o branco em preto.
Na prática, isto permite garantir um bom contraste, seja qual for a cor do fundo do bloco (sendo que, no exemplo precedente, escolhemos a cor do fundo do bloco em função de uma cor de texto).
Vamos aplicar , como cor de fundo, a cor extraída da imagem:
<div style="[background-color: #(#LOGO_ARTICLE|couleur_extraire);]"> ... </div>
Obtemos, então, de acordo com o logo da matéria, quer um fundo escuro, quer um fundo claro.
Apliquemos, para a cor do texto, a cor extraída, tornada "extrema":
[(#LOGO_ARTICLE|couleur_extraire|couleur_extreme)]
— Se a cor for escura, a cor extrema é preto; teremos texto preto sobre fundo escuro.
— Se a cor for clara, a cor extrema será branco; teremos texto branco sobre fundo claro.
Em ambos os casos, é pouco legível. Pode-se usar esta cor para outro efeito (por exemplo, uma borda à volta do div).
Resta-nos inverter a cor a aplicar ao texto;
<div
style="[color: #(#LOGO_ARTICLE|couleur_extraire|couleur_extreme|couleur_inverser);]
[background-color: #(#LOGO_ARTICLE||couleur_extraire);]">
...
</div>
— Se a cor extraída for escura, a cor extrema é preto e o inverso é portanto branco. Teremos texto branco sobre fundo escuro.
— Se a cor extraída for clara, a cor extrema é branco e o inverso é portanto preto. Teremos texto preto sobre fundo claro.
Em ambos os acasos, o contraste garante uma boa legibilidade.
O filtro couleur_extreme admite uma variável opcional, entre 0 e 1 (por padrão: 0.5), para regular o limiar de luminosidade a partir do qual se alterna entre preto e branco.
- couleur_saturation (saturação de cor) (SPIP 2.0), couleur_luminance (luminância de cor) (SPIP 2.1)
Os dois filtros a seguir são destinados a criar gamas de cores em que se controla totalmente a subtilidade, forçando o resultado numa escala absoluta (sendo que os filtros precedentes dão um resultado relativo ao valor original).
O filtro couleur_saturation (saturação de cor) percorre a saturação da cor:
— |couleur_saturation{0} retorna branco,
— |couleur_saturation{1} retorna a cor com a sua saturação máxima (que não é preto, exceto se partir de um cinzento puro),
— entre os valores 0 e 1, toda a variação da saturação da cor.
Jogar com a saturação permite obter variações extremamente finas a partir de uma cor, sem introduzir nessa cor efeitos de "acinzentado" (um laranja nunca se torna castanho, um verde nunca se torna acinzentado...). Por outro lado, o valor máximo é uma cor "pura", em que a luminância é muito variável (o azul levado à luminância máxima é muito escuro; o amarelo levado à sua luminância máxima continua a ser uma cor clara).
O filtro couleur_luminance percorre a luminância da cor:
— |couleur_luminance{0} retorna branco,
— |couleur_luminance{1} retorna preto,
— |couleur_luminance{0.5} retorna uma variante da cor original com uma luminância média.
Com esta função, trabalha-se com uma escala de 0 a 1, fácil de usar: vai-se sempre de 0 a 1, passando pela cor original. O resultado final é assim bam mais previsível: com uma variável de 0 a 0.5, obtém-se sempre uma cor clara, e de 0.5 a 1 uma cor escura.