[javascript] 16 진수 색상이 “너무 검은 색”인지 확인하는 방법은 무엇입니까?

Program / 글쓴이

색상 선택기에서 선택한 색상의 어둡기를 평가하여 “너무 검은 색”인지 확인하고, 그렇다면 흰색으로 설정하려고합니다. 나는 이것을 풀기 위해 16 진수 값의 첫 번째 문자를 사용할 수 있다고 생각했습니다. 작동하지만 합법적으로 “밝은”색상도 전환하고 있습니다.

이 작업을 코드가 있습니다.

        if (lightcolor.substring(0,3) == "#00"|| lightcolor.substring(0,3) == "#010"){
            lightcolor="#FFFFFF";
            color=lightcolor;
        }

색상이 특정 수준의 어둠을 넘어 섰다는 것을 알기 위해 16 진수 수학으로 더 효율적인 방법이 있어야합니까? lightcolor + “some hex value”<= “some hex value”와 같이 흰색으로 설정합니다.

나는 이것을 위해 사용될 수있는 tinyColor가 추가되었지만 확실하지 않습니다.

답변

세 가지 RGB 구성 요소를 개별적으로 추출한 다음 표준 공식을 사용하여 결과 RGB 값을인지 된 밝기로 변환해야합니다.

6 자 색상 가정 :

var c = c.substring(1);      // strip #
var rgb = parseInt(c, 16);   // convert rrggbb to decimal
var r = (rgb >> 16) & 0xff;  // extract red
var g = (rgb >>  8) & 0xff;  // extract green
var b = (rgb >>  0) & 0xff;  // extract blue

var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709

if (luma < 40) {
    // pick a different colour
}

편집하다

5 월 2014 년부터 tinycolor지금이 getBrightness()대신 위의 ITU-R 것들의 요소에 가중치를 CCIR601를 사용하여 불구하고 기능을,.

편집하다

결과 루마 값 범위는 0..255입니다. 여기서 0은 가장 어둡고 255는 가장 밝습니다. 128보다 큰 값은에서 밝은 것으로 간주됩니다 tinycolor. (@ pau.moreno 및 @Alnitak의 댓글에서 뻔뻔스럽게 복사 됨)

답변

TinyColor의 라이브러리는 (당신이 이미 언급 한) 검사와 그들 사이에 색상을 조작하기위한 여러 가지 기능을 제공합니다 :

  • getBrightness

    Web Content Accessibility Guidelines (버전 1.0)에 정의 된대로 0-255 범위에서 색상의인지 된 밝기를 반환합니다 .

    tinycolor("#fff").getBrightness(); // 255

  • isLight

    색상의 감지 된 밝기가 밝은 지 여부를 나타내는 부울을 반환합니다.

    tinycolor("#fff").isLight(); // true
tinycolor("#000").isLight(); // false

  • isDark

    색상의 감지 된 밝기가 어두운 지 여부를 나타내는 부울을 반환합니다.

    tinycolor("#fff").isDark(); // false
tinycolor("#000").isDark(); // true

  • getLuminance

    Web Content Accessibility Guidelines (버전 2.0)에 정의 된대로 0-1에서 색상의인지 된 광도를 반환합니다 .

    tinycolor("#fff").getLuminance(); // 1

답변

이 WooCommerce WordPress PHP 함수 ( wc_hex_is_light )를 발견 하고 JavaScript로 변환했습니다. 잘 작동합니다!

function wc_hex_is_light(color) {
    const hex = color.replace('#', '');
    const c_r = parseInt(hex.substr(0, 2), 16);
    const c_g = parseInt(hex.substr(2, 2), 16);
    const c_b = parseInt(hex.substr(4, 2), 16);
    const brightness = ((c_r * 299) + (c_g * 587) + (c_b * 114)) / 1000;
    return brightness > 155;
}

답변

휘도 를 계산할 수 있습니다 .

따라서 휘도는 표면이 얼마나 밝게 나타나는지를 나타내는 지표입니다.

따라서 텍스트가 흰색인지 검은 색인지 선택하는 것이 좋습니다.

var getRGB = function(b){
    var a;
    if(b&&b.constructor==Array&&b.length==3)return b;
    if(a=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(b))return[parseInt(a[1]),parseInt(a[2]),parseInt(a[3])];
    if(a=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(b))return[parseFloat(a[1])*2.55,parseFloat(a[2])*2.55,parseFloat(a[3])*2.55];
    if(a=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(b))return[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],
16)];
    if(a=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(b))return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)];
    return (typeof (colors) != "undefined")?colors[jQuery.trim(b).toLowerCase()]:null
};

var luminance_get = function(color) {
    var rgb = getRGB(color);
    if (!rgb) return null;
        return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
}

위의 방법을 사용하면 색상을 다른 형식으로 전달할 수 있지만 알고리즘은 기본적으로 luminance_get.

내가 그것을 사용할 때, 휘도가 더 크면 색상을 검정색으로 설정하고 180그렇지 않으면 흰색으로 설정했습니다.

답변

여기에는 휘도와 밝기 사이에 중요한 차이가 있습니다. 하루가 끝날 때 휘도는 특정 영역을 통해 이동하는 에너지의 양을 측정하는 것으로, 우리의 지각 시스템이 그 에너지를 인식하는 방식을 완전히 무시합니다. 반면에 밝기는 우리가 그 에너지를 어떻게 인식하는지에 대한 척도이며 휘도와 지각 시스템 사이의 관계를 고려합니다. (혼란의 요점으로 상대 휘도라는 용어가 있는데, 밝기 용어와 동의어로 사용되는 것 같습니다.

정확하게 말하면 다른 사람들이 제안한대로 “밝기”또는 “값”또는 “상대적 휘도”를 찾고 있습니다. 여러 가지 방법으로 계산할 수 있습니다 (예 : 인간이됩니다!) http://en.wikipedia.org/wiki/HSL_and_HSV#Lightness

  1. R, G, B의 최대 값을 취하십시오.
  2. R, G, B에서 최대 값과 최소값의 평균을 구합니다.
  3. 세 가지 모두의 평균을 취하십시오.
  4. 다른 사람들이 여기에서 제안한 가중 평균을 사용하십시오.

답변

이 작업은 16 진수 예를 들어 #fefefe

function isTooDark(hexcolor){
    var r = parseInt(hexcolor.substr(1,2),16);
    var g = parseInt(hexcolor.substr(3,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    // Return new color if to dark, else return the original
    return (yiq < 40) ? '#2980b9' : hexcolor;
}

반환 true또는 false변경으로 변경할 수 있습니다.

return (yiq < 40) ? '#2980b9' : hexcolor;

에

return (yiq < 40);

답변

가능한 해결책은 색상 을 RGB에서 HSB 로 변환하는 것 입니다. HSB는 색조, 채도 및 밝기를 나타냅니다 (HSV라고도하며 여기서 V는 값임). 그런 다음 확인할 매개 변수는 밝기입니다.