Ok, ainda não é a melhor solução possível, mas é um bom ponto de partida. Eu escrevi um pequeno aplicativo Java que calcula a proporção de contraste de duas cores e só processa cores com uma proporção de 5: 1 ou melhor - esta proporção e a fórmula que uso foram lançadas pelo W3C e provavelmente irão substituir a recomendação atual (que Considero muito limitado). Ele cria um arquivo no diretório de trabalho atual denominado "choice-font-colors.html", com a cor de fundo de sua escolha e uma linha de texto em todas as cores que passaram neste teste W3C. Ele espera um único argumento, sendo a cor de fundo.
Por exemplo, você pode chamá-lo assim
java FontColorChooser 33FFB4
em seguida, basta abrir o arquivo HTML gerado em um navegador de sua escolha e escolher uma cor da lista. Todas as cores fornecidas passaram no teste W3C para esta cor de fundo. Você pode alterar o corte substituindo 5 por um número de sua escolha (números menores permitem contrastes mais fracos, por exemplo, 3 garantirá que o contraste seja 3: 1, 10 garantirá que seja pelo menos 10: 1) e você também pode corte para evitar contrastes muito altos (certificando-se de que é menor que um certo número), por exemplo, adicionando
|| cDiff > 18.0
à cláusula if garantirá que o contraste não seja muito extremo, pois contrastes muito extremos podem estressar seus olhos. Aqui está o código e divirta-se brincando com ele :-)
import java.io.*;
/* For text being readable, it must have a good contrast difference. Why?
* Your eye has receptors for brightness and receptors for each of the colors
* red, green and blue. However, it has much more receptors for brightness
* than for color. If you only change the color, but both colors have the
* same contrast, your eye must distinguish fore- and background by the
* color only and this stresses the brain a lot over the time, because it
* can only use the very small amount of signals it gets from the color
* receptors, since the breightness receptors won't note a difference.
* Actually contrast is so much more important than color that you don't
* have to change the color at all. E.g. light red on dark red reads nicely
* even though both are the same color, red.
*/
public class FontColorChooser {
int bred;
int bgreen;
int bblue;
public FontColorChooser(String hexColor) throws NumberFormatException {
int i;
i = Integer.parseInt(hexColor, 16);
bred = (i >> 16);
bgreen = (i >> 8) & 0xFF;
bblue = i & 0xFF;
}
public static void main(String[] args) {
FontColorChooser fcc;
if (args.length == 0) {
System.out.println("Missing argument!");
System.out.println(
"The first argument must be the background" +
"color in hex notation."
);
System.out.println(
"E.g. \"FFFFFF\" for white or \"000000\" for black."
);
return;
}
try {
fcc = new FontColorChooser(args[0]);
} catch (Exception e) {
System.out.println(
args[0] + " is no valid hex color!"
);
return;
}
try {
fcc.start();
} catch (IOException e) {
System.out.println("Failed to write output file!");
}
}
public void start() throws IOException {
int r;
int b;
int g;
OutputStreamWriter out;
out = new OutputStreamWriter(
new FileOutputStream("chosen-font-colors.html"),
"UTF-8"
);
// simple, not W3C comform (most browsers won't care), HTML header
out.write("<html><head><title>\n");
out.write("</title><style type=\"text/css\">\n");
out.write("body { background-color:#");
out.write(rgb2hex(bred, bgreen, bblue));
out.write("; }\n</style></head>\n<body>\n");
// try 4096 colors
for (r = 0; r <= 15; r++) {
for (g = 0; g <= 15; g++) {
for (b = 0; b <= 15; b++) {
int red;
int blue;
int green;
double cDiff;
// brightness increasse like this: 00, 11,22, ..., ff
red = (r << 4) | r;
blue = (b << 4) | b;
green = (g << 4) | g;
cDiff = contrastDiff(
red, green, blue,
bred, bgreen, bblue
);
if (cDiff < 5.0) continue;
writeDiv(red, green, blue, out);
}
}
}
// finalize HTML document
out.write("</body></html>");
out.close();
}
private void writeDiv(int r, int g, int b, OutputStreamWriter out)
throws IOException
{
String hex;
hex = rgb2hex(r, g, b);
out.write("<div style=\"color:#" + hex + "\">");
out.write("This is a sample text for color " + hex + "</div>\n");
}
private double contrastDiff(
int r1, int g1, int b1, int r2, int g2, int b2
) {
double l1;
double l2;
l1 = (
0.2126 * Math.pow((double)r1/255.0, 2.2) +
0.7152 * Math.pow((double)g1/255.0, 2.2) +
0.0722 * Math.pow((double)b1/255.0, 2.2) +
0.05
);
l2 = (
0.2126 * Math.pow((double)r2/255.0, 2.2) +
0.7152 * Math.pow((double)g2/255.0, 2.2) +
0.0722 * Math.pow((double)b2/255.0, 2.2) +
0.05
);
return (l1 > l2) ? (l1 / l2) : (l2 / l1);
}
private String rgb2hex(int r, int g, int b) {
String rs = Integer.toHexString(r);
String gs = Integer.toHexString(g);
String bs = Integer.toHexString(b);
if (rs.length() == 1) rs = "0" + rs;
if (gs.length() == 1) gs = "0" + gs;
if (bs.length() == 1) bs = "0" + bs;
return (rs + gs + bs);
}
}
Esta é uma pergunta interessante, mas não acho que seja realmente possível. Se duas cores "se encaixam" ou não como cores de fundo e de primeiro plano, depende da tecnologia de exibição e das características fisiológicas da visão humana, mas o mais importante, dos gostos pessoais moldados pela experiência. Uma rápida olhada no MySpace mostra claramente que nem todos os seres humanos percebem as cores da mesma maneira. Não acho que esse seja um problema que possa ser resolvido por algoritmos, embora possa haver um enorme banco de dados em algum lugar de cores correspondentes aceitáveis.
fonte
Implementei algo semelhante por um motivo diferente - que era um código para informar ao usuário final se as cores de primeiro e segundo plano que eles selecionaram resultariam em texto ilegível. Para fazer isso, em vez de examinar os valores RGB, converti o valor da cor em HSL / HSV e, em seguida, determinei por experimentação qual era o meu ponto de corte para legibilidade ao comparar os valores fg e bg. Isso é algo que você pode querer / precisar considerar.
fonte
Em um aplicativo recente que fiz, usei as cores invertidas. Com os valores de r, g e b em mãos, basta calcular (neste exemplo, a faixa de cores varia de 0 a 255):
fonte
Pode ser estranho responder minha própria pergunta, mas aqui está outro seletor de cores muito legal que eu nunca vi antes. Também não resolve o meu problema: - (((((no entanto acho que é muito mais legal para estes que já conheço).
http://www.colorjack.com/
À direita, em Ferramentas selecione "Color Sphere", uma esfera muito poderosa e personalizável (veja o que você pode fazer com os pop-ups no topo), "Color Galaxy", ainda não tenho certeza de como isso funciona, mas parece legal e "Color Studio" também é bom. Além disso, pode exportar para todos os tipos de formatos (por exemplo, Illustrator ou Photoshop, etc.)
Que tal isso, eu escolho minha cor de fundo lá, deixo criar uma cor complementar (desde o primeiro pop up) - isso deve ter o maior contraste e, portanto, ser mais legível, agora selecione a cor complementar como cor principal e selecione neutro? Hmmm ... não muito bem também, mas estamos melhorando ;-)
fonte
Você já pensou em permitir que o usuário do seu aplicativo selecione seu próprio esquema de cores? Sem falta, você não será capaz de agradar a todos os seus usuários com sua seleção, mas pode permitir que eles encontrem o que lhes agrada.
fonte
Semelhante à sugestão de @Aaron Digulla, exceto que eu sugeriria uma ferramenta de design gráfico, selecione a cor de base, no seu caso, a cor de fundo, então ajuste o Matiz, Saturação e Valor. Usando isso, você pode criar amostras de cores com muita facilidade. O Paint.Net é grátis e eu o uso o tempo todo para isso e também as ferramentas de pagamento também fazem isso.
fonte
Pessoalmente, não acho que possamos encontrar um algoritmo para calcular a cor de texto mais correspondente especificando a cor de fundo.
Acho que atualmente o artista deve ter uma lista de pares de cores que tenham boa qualidade de leitura, podemos adicioná-los a uma mesa e definir um desses pares aleatoriamente como nosso tema de leitura ...
isso é muito razoável, e não teremos pares de cores feias ....
fonte