JavaScript에서 대조적 인 색상을 계산합니다

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

  •  10-07-2019
  •  | 
  •  

문제

현재 사용자가 작업중 인 페이지 중 하나에서 표시된 텍스트의 배경을 변경할 수 있습니다.

우리는 유지하기 위해 전경 색상을 자동으로 변경하고 싶습니다. 합리적인 텍스트의 대비.

우리는 또한 색상 범위가 재량이라는 것을 선호합니다. 예를 들어, 배경이 255 단위로 흰색에서 검은 색으로 바뀌는 경우 255 개의 전경 색상을보고 싶지 않습니다. 이 시나리오에서 아마도 2 ~ 4, 합리적인 차이.

공식을 채찍질하기 위해 UI/디자인/컬러 전문가/화가가 있습니까?

도움이 되었습니까?

해결책

가독적 인 측면에서, 당신은 어떤 배경이든 흑백 텍스트를 사용하고 싶습니다. 따라서 RGB를 HSV로 변환하고 v가 <0.5인지 확인하십시오. 그렇다면 흰색은 그렇지 않다면 검은 색입니다.

먼저 시도해보고 매력적이 있는지 확인하십시오.

그렇지 않다면, 배경이 너무 밝거나 너무 어두울 때 흰색과 검은 색이 너무 뚜렷하지 않기를 원할 것입니다. 이것을 아래로 내려 놓으려면 동일한 색조와 채도를 유지 하고이 값을 밝기에 사용하십시오.

background V  foreground V
0.0-0.25      0.75
0.25-0.5      1.0
0.5-0.75      0.0
0.75-1.0      0.25

중간 색상으로, 여전히 검은 색이나 흰색 텍스트가 표시되어 잘 읽을 수 있습니다. 어두운 색상이나 밝은 색상에서는 동일한 색상 텍스트를 볼 수 있지만 밝기 측면에서는 3/4 이상 떨어져 있으므로 여전히 읽을 수 있습니다. 멋져 보이길 바래요 :)

다른 팁

루마에서 흑백 결정을 내리는 것은 저에게 꽤 잘 작동합니다. Luma는 R, G 및 B 값의 가중 합계로, 비디오 응용 분야에서 일반적으로 일반적으로 일반적으로 인간의 인식에 맞게 조정됩니다. 루마의 공식적인 정의는 시간이 지남에 따라 다른 가중치로 바뀌었다. 여기를 봐: http://en.wikipedia.org/wiki/luma_(Video). Rec를 사용하여 최상의 결과를 얻었습니다. 아래 코드에서와 같이 709 버전. 아마도 165의 흑백 임계 값이 좋아 보인다.

function contrastingColor(color)
{
    return (luma(color) >= 165) ? '000' : 'fff';
}
function luma(color) // color can be a hx string or an array of RGB values 0-255
{
    var rgb = (typeof color === 'string') ? hexToRGBArray(color) : color;
    return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]); // SMPTE C, Rec. 709 weightings
}
function hexToRGBArray(color)
{
    if (color.length === 3)
        color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2);
    else if (color.length !== 6)
        throw('Invalid hex color: ' + color);
    var rgb = [];
    for (var i = 0; i <= 2; i++)
        rgb[i] = parseInt(color.substr(i * 2, 2), 16);
    return rgb;
}

노력하다 이 예, R, G 및 B 값의 평균에 따라 검은 색 또는 흰색으로 설정합니다. 테스트에도 좋습니다! 잘 작동하지 않는 케이스를 찾으면 더 나은 알고리즘을 대체하십시오.

<html> 
<head> 
<script> 
function rgbstringToTriplet(rgbstring)
{
    var commadelim = rgbstring.substring(4,rgbstring.length-1);
var strings = commadelim.split(",");
var numeric = [];
for(var i=0; i<3; i++) { numeric[i] = parseInt(strings[i]); }
return numeric;
}

function adjustColour(someelement)
{
   var rgbstring = someelement.style.backgroundColor;
   var triplet = rgbstringToTriplet(rgbstring);
   var newtriplet = [];
   // black or white:
   var total = 0; for (var i=0; i<triplet.length; i++) { total += triplet[i]; } 
   if(total > (3*256/2)) {
     newtriplet = [0,0,0];
   } else {
 newtriplet = [255,255,255];
   }
   var newstring = "rgb("+newtriplet.join(",")+")";
   someelement.style.color = newstring;
   return true;
}

function randomiseBackground(someelement)
{
 var vals = [];
 for(var i=0; i<3; i++) { vals[i]=Math.floor(Math.random()*256+1); }
 someelement.style.backgroundColor="rgb("+vals.join(",")+")";
 return true;
}
</script> 
</head> 
<body onload="adjustColour(document.getElementById('mypara'));"> 
<p id="mypara" style="background-color:#2287ea">Some text</p> 
<form> 
    <input type=button onclick="var elem=document.getElementById('mypara'); randomiseBackground(elem); adjustColour(elem);" value="randomise background" /> 
</form> 
</body> 
</html>

당신은 아마도 색조를 바꾸고 싶지만 채도 나 값은 아닙니다.

따라서 RGB 값을 HSV로 변환하고 180도 (물론 모듈로 360도)를 추가하고 RGB로 다시 변환하십시오.

전환 포럼 로스가 여기 있습니다.

JavaScript가 10 진수 값을 다루는 방법으로 인해 약간 복잡한 t 구현입니다. 이 목적을 위해 배경이 색상을 변경하는 것이 훨씬 좋았지 만 텍스트는 흑백으로 전환됩니다. 대조적 인 색상을 많이 사용하는 경우 많은 조합이 서기가 어려울 것입니다. 또한 일부 사람들은 Colorblind이므로 접근성 관점에서 좋은 아이디어가 아닙니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top