색상환, 색상 선택기 및 색상 일치 웹 앱이 너무 많은 것 같습니다. 여기서 하나의 색상을 제공하면 조합하여 사용할 때 조화로운 레이아웃을 생성하는 몇 가지 다른 색상을 찾을 수 있습니다. 그러나 대부분은 배경색에만 초점을 맞추고 각 배경색에 인쇄 된 모든 텍스트 (미리보기에서 텍스트가 전혀 인쇄되는 경우)는 검정 또는 흰색입니다.
내 문제는 다릅니다. 텍스트 영역에 사용할 배경색을 알고 있습니다. 도움이 필요한 것은이 배경에서 글꼴 색상으로 사용할 수있는 몇 가지 색상을 선택하는 것입니다. 가장 중요한 것은 색상이 글꼴을 읽을 수 있는지 확인하고 (대비가 너무 낮지 않고 눈이 스트레스를받지 않도록 너무 높지 않음) 물론 전경과 배경의 조합이 좋아 보이는지 확인하는 것입니다.
누구든지 그러한 응용 프로그램을 알고 있습니까? 다운로드해야하는 모든 것보다 웹 애플리케이션을 선호합니다. 감사.
답변:
알고리즘이 필요한 경우 다음을 시도하십시오. RGB 공간에서 HSV 공간 (색조, 채도, 값)으로 색상을 변환합니다. UI 프레임 워크가이를 수행 할 수없는 경우 다음 문서를 확인하십시오. http://en.wikipedia.org/wiki/HSL_and_HSV#Conversion_from_RGB_to_HSL_or_HSV
색조는 [0,360)입니다. "반대"색상을 찾으려면 (색상환을 생각해보십시오) 180도를 추가하십시오.
h = (h + 180) % 360;
채도와 값의 경우 반전 :
l = 1.0 - l;
v = 1.0 - v;
RGB로 다시 변환합니다. 대부분의 조합이보기 좋지 않더라도 항상 높은 대비를 제공해야합니다.
"추악한"부분을 피하려면 여러 "좋은"조합으로 테이블을 작성하고 차이가 가장 적은 테이블을 찾으십시오.
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))
그것을 사용하십시오.
좋아요, 이것은 여전히 최선의 해결책은 아니지만 시작하기 좋은 점입니다. 두 가지 색상의 명암비를 계산하고 5 : 1 이상의 비율로만 색상을 처리하는 작은 Java 앱을 작성했습니다.이 비율과 제가 사용하는 공식은 W3C에서 출시되었으며 현재 권장 사항을 대체 할 것입니다. 나는 매우 제한적이라고 생각한다). 현재 작업 디렉토리에 "chosen-font-colors.html"이라는 이름의 파일을 생성하며, 선택한 배경색과이 W3C 테스트를 통과 한 모든 색상의 텍스트 줄을 사용합니다. 배경색 인 단일 인수가 필요합니다.
예를 들어 이렇게 부를 수 있습니다.
java FontColorChooser 33FFB4
그런 다음 원하는 브라우저에서 생성 된 HTML 파일을 열고 목록에서 색상을 선택하십시오. 주어진 모든 색상은이 배경색에 대한 W3C 테스트를 통과했습니다. 5를 원하는 숫자로 대체하여 컷오프를 변경할 수 있으며 (낮은 숫자는 더 약한 대비를 허용합니다. 예를 들어 3은 대비가 3 : 1인지 확인하고 10은 대비가 10 : 1 이상인지 확인합니다.) 너무 높은 대비를 피하기 위해 잘라냅니다 (특정 숫자보다 작은 지 확인), 예 : 추가
|| cDiff > 18.0
너무 극단적 인 대비가 눈에 스트레스를 줄 수 있으므로 대비가 너무 과도하지 않도록 if 절에 추가합니다. 여기에 코드가 있고 약간 재미있게 놀아보세요 :-)
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);
}
}
이것은 흥미로운 질문이지만 실제로 가능하다고 생각하지 않습니다. 두 가지 색상이 배경색과 전경색으로 "적합"되는지 여부는 디스플레이 기술과 인간 시각의 생리적 특성에 달려 있지만 가장 중요한 것은 경험에 의해 형성되는 개인적인 취향에 달려 있습니다. MySpace를 빠르게 살펴보면 모든 인간이 같은 방식으로 색상을 인식하는 것은 아니라는 것을 매우 분명하게 보여줍니다. 어딘가에 수용 가능한 일치하는 색상의 거대한 데이터베이스가있을 수 있지만 이것이 알고리즘 적으로 해결할 수있는 문제라고 생각하지 않습니다.
최근에 만든 응용 프로그램에서는 반전 된 색상을 사용했습니다. r, g 및 b 값을 사용하여 다음을 계산하십시오 (이 예에서는 색상 범위가 0에서 255까지 다양 함).
r = 127-(r-127) and so on.
내 질문에 답하는 것이 이상 할 수 있지만 여기에 내가 본 적이없는 또 다른 정말 멋진 색상 선택기가 있습니다. 그것은 내 문제도 해결하지 못합니다 :-((((하지만 이미 알고있는 이것들보다 훨씬 멋지다고 생각합니다.
오른쪽의 도구 아래에서 매우 강력하고 사용자 정의 가능한 구인 "색상 구", "색상 은하"를 선택합니다.이게 어떻게 작동하는지 잘 모르겠지만 모양이 보입니다. 시원하고 "Color Studio"도 좋습니다. 또한 모든 종류의 형식 (예 : Illustrator 또는 Photoshop 등)으로 내보낼 수 있습니다.
어떻습니까? 거기에서 내 배경색을 선택하고 (첫 번째 팝업에서) 보완 색상을 만들도록합니다. 이것은 가장 높은 대비를 가져야하며 따라서 가장 읽기 쉬워야합니다. 이제 보색을 기본 색상으로 선택하고 중립을 선택합니까? 흠 ... 너무 좋지는 않지만 우리는 좋아지고 있습니다 ;-)
그래픽 디자인 도구를 제안한다는 점을 제외하면 @Aaron Digulla의 제안과 유사합니다. 기본 색상 (귀하의 경우 배경색)을 선택한 다음 색조, 채도 및 값을 조정합니다. 이를 사용하면 색상 견본을 매우 쉽게 만들 수 있습니다. Paint.Net은 무료이며이를 위해 항상 사용하며 유료 도구도이 작업을 수행합니다.