Há algum tempo atrás, vi-me na necessidade de criar um “gerador de header” para os sites de um cliente aqui da agência. Como estes sites seriam produções realizadas por pessoas que não seriam necessariamente designers, tive que facilitar as coisas.

No ato, a pessoa informava o nome do site, o tamanho do header e a cor predominante - e foi no ponto da cor que o problema apareceu - como uma pessoa não-designer escolheria uma cor que combinasse com o fundo e ao mesmo tempo desse contraste?

A cor a ser escolhida (ou pelo menos sugerida) deveria ser a cor complementar, ou seja, a cor diretamente inversa a ela.

Observando um pouco, percebi que as cores branco (em RGB 255,255,255) e o preto (em RGB 0,0,0) tinham a diferença de 255 tonalidades em cada uma das cores que forma o RGB. Então constatei que, subtraindo de qualquer cor, os “255” de cada uma dessas tonalidades, eu obteria a cor complementar.

Ai, programação vai, programação vem e criei o seguinte script, que também pode ser conferido em ação aqui.

Quero deixar claro que não inventei a roda, mas essa é uma informação desconhecida por muitos profissionais da área e que deve ser compartilhada.

cor_complementar.php

if (!$corInvertida){
$R = substr($corOriginal,1,2);
$G = substr($corOriginal,3,2);
$B = substr($corOriginal,5,2);
 
$R = hexdec($R);
$G = hexdec($G);
$B = hexdec($B);
 
$valor255="255";
 
$iR=($R-$valor255)*-1;
$iG=($G-$valor255)*-1;
$iB=($B-$valor255)*-1;
 
$R=dechex($R);
$G=dechex($G);
$B=dechex($B);
 
if(strlen($R) < 2){ $R="0".$R; }
if(strlen($G) < 2){	$G="0".$G; }
if(strlen($B) < 2){ $B="0".$B; }
 
$iR=dechex($iR);
$iG=dechex($iG);
$iB=dechex($iB);
 
if(strlen($iR) < 2){ $iR="0".$iR; }
if(strlen($iG) < 2){ $iG="0".$iG; }
if(strlen($iB) < 2){ $iB="0".$iB; }
 
$corInvertida = "#".$iR.$iG.$iB;
$corInvertida = strtoupper($corInvertida);
}
 
echo "A cor complementar de ".$corOriginal."é ".$corInvertida."."; ?>

Technorati Tags: cor complementar, cor, brilho, contraste, design, programação

A inclusão deste post foi feita em 1 de junho de 2007, sexta-feira, às 18:49 e arquivado em Design, PHP. Você pode acompanhar os comentários através do nosso RSS 2.0. Você pode deixar um comentário, ou apontar este link no seu próprio site.