프로그래밍 방식으로 고 대비 색상을 선택하십시오

StackOverflow https://stackoverflow.com/questions/407793

  •  03-07-2019
  •  | 
  •  

문제

이것은 간단한 질문이어야하지만, 그것을 작동시킬 방법을 찾을 수 없었습니다.

본질적으로, 나는 웹 개발에 사용하는 바보 같은 로컬 호스트 페이지가 있습니다. 개발 서버와 로컬 버전의 C# 코드 (호스트 파일을 통해 Dev URL에서 리디렉션 됨)를 서핑 할 때는 로컬 또는 서버에서 'dev.foo.com'포인트를 잊어 버린 것으로 알려져 있습니다.

그래서 기본 웹 페이지의 기본 페이지로 로컬로 실행되는 페이지를 만들 었으므로 서버에서 내 로컬 호스트를 쉽게 식별 할 수 있습니다.

이 페이지는 임의의 배경색 설정을 포함하여 무작위로 무작위로 많은 일을합니다 (D & D에 대한 캐릭터의 시작 통계를 포함하여). 0에서 255 사이의 3 개의 랜덤 숫자를 생성하고 CSS의 신체 배경색의 RGB 값으로 설정하여이를 수행합니다.

3 개의 ints r, g 및 b가 주어지면 두 번째 색상이 첫 번째 색상과 높은 대비를 갖도록 R2, G2 및 B2를 어떻게 결정합니까? 나는 페이지에 임의의 배경색이있는 것을 좋아하지만 (착륙 페이지의 모양에 익숙해지지 않도록합니다) 텍스트를 읽을 수 있습니다.

도움이 되었습니까?

해결책

색상 비전 자체가 해상도가 너무 낮기 때문에 텍스트를 읽을 수있는 밝기의 차이가 필요합니다.

따라서 알고리즘으로 다음을 제안합니다.

  • 임의의 배경색을 선택하십시오.

  • 그런 다음 빛이 빛인지 어두운 색인지 결정하십시오. 예를 들어 세 가지 기본 색상의 평균이 128인지 여부를 확인할 수 있습니다.

  • 밝은 색상의 경우 검은 색 텍스트를 사용하십시오. 어두운 흰색 텍스트.

다른 팁

"대비"는로드 된 단어입니다. 텍스트를 읽을 수있는 것에 관심이 있다면, 쉬운 방법 중 하나는 HSL과 같은 휘도 기반 컬러 공간에서 작동하고 휘도에 큰 차이가있는 전경과 배경색을 선택하는 것입니다.

HSL과 RGB 간의 전환은 잘 알려져 있습니다. 세부 사항은 Wikipedia를 참조하십시오.

실제 색상 대비에 대해 이야기하고 있다면, 거의 잘라 내고 건조되지 않습니다 (내가 아는 한 단일 색상 공간으로 축소되지 않은 지각 적 요인이 많이 있습니다). 당신은 그 수준의 정교함이 필요하지 않습니다.

이 PHP 솔루션을 확인하십시오. PHP와의 색상 대비 계산 Andreas Gohr. 물론 모든 언어로 포팅 될 수 있습니다.

그는 또한 자신의 대비 분석기에 대한 아주 좋은 데모를 가지고 있으며,이를 통해 최소한의 대비 수준을 찾을 수 있습니다.

방법을 사용할 수 있습니다 GetBrightness() ~에 Color 수업. 플로트 값을 0.0 (검은 색)에서 1.0 (흰색)으로 반환합니다. 간단한 해결책은 다음과 같습니다.

var color1 = new Color.FromArgb(r1, g1, b1);
var brightness = color1.GetBrightness();

var color2 = brightness > 0.5 ? Color.Black : Color.White;

나는 Palm OS 응용 프로그램에서 이런 일을했습니다. 이것이 제가 생각해 낸 것입니다. "높은 대비"색상을 제공하지는 않지만 텍스트 색상과 충분히 다른 배경 색상을 읽을 수 있습니다.

  // Black background is a special case.  It's fairly likely to occur and 
  // the default color shift we do isn't very noticeable with very dark colors.
  if (backColor.r < 0x20 && backColor.g < 0x20 && backColor.b < 0x20)
  {
      textColor.r = backColor.r + 0x20;
      textColor.g = backColor.g + 0x20;
      textColor.b = backColor.b + 0x20;
  }
  else
  {
      textColor.r = backColor.r + ((backColor.r < 128) ? 0x10 : -0x10);
      textColor.g = backColor.g + ((backColor.g < 128) ? 0x10 : -0x10);
      textColor.b = backColor.b + ((backColor.b < 128) ? 0x10 : -0x10);
  }

Palm의 컬러 취급은 약간 펑키 (16 비트 색상)입니다.

이것을 해결하기위한 몇 가지 좋은 리소스 (및 알고리즘)가 있습니다. http://juicystudio.com/article/luminositycontratioalgorithm.php

이 답변은 색상이 밝은지 어두운 지에 따라 2 ~ 3 개의 색상 선택 중 하나를 사용하는 것을 제안합니다.

나는 약간 다른 접근법을 사용하고 내 경우에는 우아하게 작동했습니다. 구현은 다음과 같습니다.

 int color = your_color;
 contrastColor = Color.rgb(255-(color >> 16)&0xFF, 255-(color >> 8)&0xFF, 255- color&0xFF);

간단하고 훌륭합니다.

모든 비트를 뒤집으면 "반대"색상이 나타납니다.

C#의 ~ 운영자라고 생각합니다.

R2 = ~R1;
G2 = ~G1;
B2 = ~B1;

최상의 대조를 위해이 코드를 사용하십시오

function lumdiff($R1,$G1,$B1,$R2,$G2,$B2){

    $L1 = 0.2126 * pow($R1/255, 2.2) +
          0.7152 * pow($G1/255, 2.2) +
          0.0722 * pow($B1/255, 2.2);

    $L2 = 0.2126 * pow($R2/255, 2.2) +
          0.7152 * pow($G2/255, 2.2) +
          0.0722 * pow($B2/255, 2.2);

    if($L1 > $L2){
        return ($L1+0.05) / ($L2+0.05);
    }else{
        return ($L2+0.05) / ($L1+0.05);
    }
}

function get_the_contrast($c1, $c2) {
    return (lumdiff(hexdec(substr($c1,0,2)),
        hexdec(substr($c1,2,2)),hexdec(substr($c1,4,2)),
        hexdec(substr($c2,0,2)),hexdec(substr($c2,2,2)),
        hexdec(substr($c2,4,2))));
}

위의 방법 (AVG (빨간색, 녹색, 파란색)> 128)는 정말 좋지 않습니다.

private Color GetContrastingColor(Color color)
{
    int r = color.R > 0 ? 256 - color.R : 255;
    int g = color.G > 0 ? 256 - color.G : 255;
    int b = color.B > 0 ? 256 - color.B : 255;
    return System.Drawing.Color.FromArgb(r, g, b);
}

감사합니다 @starblue !

여기에 있습니다 C# 내가 사용하는 코드 

 public static string GetContrastBlackOrWhiteColorAsHtmlColorCode(Color c)
        {
            System.Drawing.Color color = System.Drawing.ColorTranslator.FromHtml("transparent");

            try
            {
                if (c.R >= 128 && c.G >= 128 && c.B >= 128)
                {
                    return System.Drawing.ColorTranslator.ToHtml(Color.Black);
                }
                else
                {
                    return System.Drawing.ColorTranslator.ToHtml(Color.White);
                }
            }
            catch (Exception)
            {
            }

            return System.Drawing.ColorTranslator.ToHtml(color);
        }
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top