Como encontrar a boa aparência font color se a cor de fundo é conhecido? [fechadas]
https://stackoverflow.com/questions/301869
-
08-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Parece haver tantos roda de cores, selecionador de cor e correspondência de cores web apps lá fora, onde você dá uma cor e o que vai encontrar um par de outras cores que vão criar um layout harmônica quando está sendo usado em combinação . No entanto a maioria deles focar apenas as cores de fundo e qualquer texto impresso em cada cor de fundo (se o texto é impresso em tudo na pré-visualização) é preto ou branco.
O meu problema é diferente. Eu sei a cor de fundo que deseja usar para a área de texto. O que precisa de ajuda com está escolhendo um par de cores (quanto mais, melhor) eu posso usar como cores da pia batismal neste fundo. O mais importante é que a cor irá certificar-se a fonte é legível (contraste não ser muito baixo, talvez também não ser muito elevado para evitar que os olhos são forçados) e, claro, que a combinação de primeiro plano e do fundo apenas parece ser bom.
Qualquer pessoa estar ciente de tal pedido? Eu preferiria uma aplicação web para qualquer coisa que eu tenho que baixar. Obrigado.
Solução
Se você precisar de um algoritmo, tente o seguinte: Converter a cor do espaço RGB para o espaço HSV (Hue, Saturation, Value). Se o seu quadro UI não pode fazê-lo, verifique este artigo: http://en.wikipedia.org / wiki / HSL_and_HSV # Conversion_from_RGB_to_HSL_or_HSV
Hue está em [0360). Para encontrar a cor "oposto" (pense colorwheel), basta adicionar 180 graus:
h = (h + 180) % 360;
Para saturação e valor, inverter-los:
l = 1.0 - l;
v = 1.0 - v;
converter de volta para RGB. Isto deve sempre dar-lhe um alto contraste, mesmo que a maioria das combinações vai olhar feio.
Se você quiser evitar a parte "feia", construir uma tabela com várias "boas" combinações, encontrar aquele com a menor diferença
def q(x):
return x*x
def diff(col1, col2):
return math.sqrt(q(col1.r-col2.r) + q(col1.g-col2.g) + q(col1.b-col2.b))
e uso isso.
Outras dicas
A aprovação, esta ainda não é a melhor solução possível, mas um bom ponto para começar. Eu escrevi um pequeno aplicativo Java que calcula a relação de contraste de duas cores e só processa cores com uma proporção de 5: 1 ou melhor - esta relação eo uso fórmula I foi liberado pelo W3C e provavelmente irá substituir a atual recomendação (que considero muito limitado). Ele cria um arquivo no diretório de trabalho atual com o nome "escolhido-font-colors.html", com a cor de fundo de sua escolha e uma linha de texto em todas as cores que passou neste teste W3C. Ele espera que 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 a partir da lista. Todas as cores dadas passou no teste W3C para esta cor de fundo. Você pode alterar o ponto de corte, substituindo 5 com um número de sua escolha (números mais baixos permitem contrastes mais fracos, por exemplo, 3 só vai ter certeza de contraste é de 3: 1, 10 irá certificar-se que é pelo menos 10: 1) e você também pode cortado para evitar demasiado elevados contrastes (fazendo-se que é mais pequeno do que um certo número), por exemplo, acrescentando
|| cDiff > 18.0
para a cláusula if irá certificar-se contrário não vai ser muito extremo, como contrastes muito extremas podem provocar tensão ocular. Aqui está o código e se divertir brincar com ele um pouco: -)
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 eu não acho que isso é realmente possível. Seja ou não duas cores "encaixar" como fundo eo primeiro plano cores é dependente de tecnologia de exibição e características fisiológicas da visão humana, mas o mais importante em cima gostos pessoais em forma de experiência. Uma corrida rápida através de shows MySpace muito claramente que nem todos os seres humanos percebem as cores da mesma maneira. Eu não acho que este é um problema que pode ser resolvido através de algoritmos, embora possa haver uma em algum lugar do banco de dados enorme de cores correspondentes aceitáveis.
Eu tenho implementado algo semelhante por um motivo diferente - que era código para dizer ao usuário final, se as cores de primeiro plano e de fundo que eles selecionados resultaria em texto ilegível. Para fazer isso, em vez de examinar os valores RGB, eu converti o valor da cor de HSL / HSV e, então, determinado pela experimentação que o meu ponto de corte foi para facilitar a leitura quando comparados os valores fg e bg. Isso é algo que você pode querer / necessidade de considerar.
Em um aplicativo recente que eu fiz, eu usei as cores invertidas. Com os R, G e B valores em lado, apenas calcular (neste exemplo, a gama de cor varia de 0 a 255):
r = 127-(r-127) and so on.
Pode ser estranho para responder a minha própria pergunta, mas aqui é outro selecionador muito legal cor que eu nunca vi antes. Não resolve o meu problema seja: -. ((((No entanto eu acho que é muito mais frio do que estes já sei
À direita, em Ferramentas, selecione "Color Sphere", uma esfera muito poderoso e personalizável (veja o que você pode fazer com os pop-ups no topo), "Color Galaxy", eu ainda não sei como funciona este , mas parece legal e "Color Studio" também é bom. Além disso, pode exportar para todo o tipo de formatos (por exemplo, Illustrator ou Photoshop, etc.)
Como sobre isso, eu escolho a minha cor de fundo lá, deixá-lo criar uma cor de cortesia (desde o primeiro pop-up) - este deve ter maior contraste e, assim, ser melhor legível, agora selecionar a cor complementar como a cor principal e selecione neutra ? Hmmm ... não muito grande também, mas estamos ficando melhor; -)
Você considerou deixar o usuário do seu aplicativo seleccionar o seu próprio esquema de cores? Sem falhar você não será capaz de agradar a todos os seus usuários com a sua selecção, mas você pode permitir-lhes encontrar o que lhes agrada.
Semelhante a sugestão de @ Aaron Digulla exceto que eu gostaria de sugerir uma ferramenta de design gráfico, selecione a cor base, no seu caso a cor de fundo, em seguida, ajustar o matiz, saturação e valor. Usando isso, você pode criar amostras de cores muito facilmente. Paint.Net é livre e eu usá-lo o tempo todo para este e também o pay-for-ferramentas também vai fazer isso.
Pessoalmente, eu não acho que podemos descobrir um algoritmo para calcular a cor do texto mais acompanhado por especificando a cor de fundo.
Eu acho que atualmente o artista deve ter uma lista de pares de cores que tem boa qualidade de leitura, podemos adicioná-los a uma tabela e definir um desses pares aleatoriamente como nosso lendo tema ...
isso é muito razoável, e não vamos ficar feia pares de cores ....
