与えられた色の反対の色を生成するにはどうすればよいですか?

指定された色の反対の色を作成する

この問題の目標は、指定された色の反対の色を生成することです。色。反対の色は、暗い/明るい側面を指します。たとえば、指定された色が黒の場合、反対の色は白になります。

この反対の色を作成するには、create_opp_color() という名前の関数が必要です。この関数は、現在の色を引数として受け入れ、反対の色を返す必要があります。このタスクに取り組む方法は次のとおりです:

関数の実装:

1. HEX を RGB に変換: 指定された色は、 16 進形式。まず、RGB コンポーネントに変換します。
2. カラーコンポーネントの反転: R、G、B コンポーネントの値を反転します (255 から減算します)。
3. 反転コンポーネントを HEX に変換: 各反転コンポーネントを HEX に変換します。
4. 反転コンポーネントのパッド: 2 桁の HEX 値になるように、各 HEX コンポーネントにゼロをパッドする必要があります。
5. HEX カラー文字列の再構築: パディングされた HEX コンポーネントを連結して反対の色を形成しますstring.

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 中国語 Web サイトの他の関連記事を参照してください。