주어진 색상의 반대 색상을 생성하는 방법은 무엇입니까?

주어진 색상과 반대되는 색상 만들기

이 문제의 목표는 주어진 색상과 반대되는 색상을 생성하는 것입니다. 색상. 반대 색상은 어둡거나 밝은 측면을 나타냅니다. 예를 들어, 주어진 색상이 검정색이라면 반대 색상은 흰색이 됩니다.

이 반대 색상을 생성하려면 create_opp_color()라는 함수가 필요합니다. 이 함수는 현재 색상을 인수로 받아들이고 반대 색상을 반환해야 합니다. 이 작업에 접근하는 방법은 다음과 같습니다.

함수 구현:

1. HEX를 RGB로 변환: 주어진 색상은 16진수 형식. 먼저 RGB 구성요소로 변환합니다.
2. 색상 구성요소 반전: R, G, B 구성요소의 값을 반전합니다(255에서 뺍니다).
3. 역전된 구성요소를 HEX로 변환: 각 반전된 구성요소를 다시 HEX 값으로 변환합니다.
4. 역전된 구성요소 채우기: 각 HEX 구성요소는 2자리 숫자가 되도록 0으로 채워야 합니다. HEX 값.
5. HEX 색상 문자열 재구성: 패딩된 HEX 구성요소를 연결하여 반대 색상 문자열을 형성합니다.

JavaScript로 구현:

function create_opp_color(currentColor) {
    if (currentColor.indexOf('#') === 0) {
        currentColor = currentColor.slice(1);
    }
    if (currentColor.length === 3) {
        currentColor = currentColor.repeat(2);
    }
    const rgb = hexToRgb(currentColor);
    const invertedRgb = {
        r: 255 - rgb.r,
        g: 255 - rgb.g,
        b: 255 - rgb.b
    };
    const invertedHex = rgbToHex(invertedRgb);
    return '#' + invertedHex;
}

function rgbToHex(rgb) {
    let hex = '';
    for (const key in rgb) {
        if (rgb.hasOwnProperty(key)) {
            const component = rgb[key].toString(16);
            hex += component.length === 1 ? '0' + component : component;
        }
    }
    return hex;
}

function hexToRgb(hex) {
    let rgb = {};
    ['r', 'g', 'b'].forEach((key, i) => {
        rgb[key] = parseInt(hex.substr(i * 2, 2), 16);
    });
    return rgb;
}

고급 기술:

명암 대비가 더 필요한 경우 원본 색상의 밝기를 기준으로 검정색 또는 흰색을 반대 색상으로 활용할 수 있습니다. 이를 위해 수정된 기능은 다음과 같습니다.

function create_opp_color(currentColor) {
    if (currentColor.indexOf('#') === 0) {
        currentColor = currentColor.slice(1);
    }
    if (currentColor.length === 3) {
        currentColor = currentColor.repeat(2);
    }
    const rgb = hexToRgb(currentColor);
    const brightness = Math.round((rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114) / 255 * 100);

    return brightness > 50 ? '#000000' : '#FFFFFF';
}

이제 이 기능을 사용하면 밝은 색상이든 어두운 색상이든 특정 색상의 반대 색상을 쉽게 생성할 수 있습니다.

위 내용은 주어진 색상의 반대 색상을 생성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!