[解決済み] 現在の色と反対の色を生成するには？

質問

現在の色と反対の色を作りたいのですが、どうすればいいですか？つまり、現在の色が 黒 である場合、私は 白 .

実は私は、テキスト (があります（このテキストの色は動的で、その色はランダムに作ることができます）。 . このテキストは div の中にあり、そのテキストの反対色を background-color の div . 私はそのテキストを クリア の中に div (カラーパースペクティブ) .

反対色 という意味です。暗い / 明るい

現在のテキストの色を持っているので、それをこの関数に渡すことができます。

var TextColor = #F0F0F0;    // for example (it is a bright color)

function create_opp_color(current color) {

    // create opposite color according to current color

}

create_opp_color(TextColor); // this should be something like "#202020" (or a dark color)

を作成するアイデアはありますか？ create_opp_color() 関数を作ることはできますか？

どのように解決するのですか？

アップデイト : 生産準備中 のコードを GitHub .

私ならこうする。

1. HEX を RGB に変換する
2. R,G,B 成分を反転させる
3. 各成分をHEXに変換して戻す
4. 各コンポーネントをゼロでパッドして出力

function invertColor(hex) {
    if (hex.indexOf('#') === 0) {
        hex = hex.slice(1);
    }
    // convert 3-digit hex to 6-digits.
    if (hex.length === 3) {
        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    if (hex.length !== 6) {
        throw new Error('Invalid HEX color.');
    }
    // invert color components
    var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
        g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
        b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
    // pad each with zeros and return
    return '#' + padZero(r) + padZero(g) + padZero(b);
}

function padZero(str, len) {
    len = len || 2;
    var zeros = new Array(len).join('0');
    return (zeros + str).slice(-len);
}

出力例です。

アドバンスドバージョンです。

これには bw オプションがあり、黒に反転するか白に反転するかを決定します。したがって、人間の目にとって一般的に良いコントラストを得ることができます。

function invertColor(hex, bw) {
    if (hex.indexOf('#') === 0) {
        hex = hex.slice(1);
    }
    // convert 3-digit hex to 6-digits.
    if (hex.length === 3) {
        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    if (hex.length !== 6) {
        throw new Error('Invalid HEX color.');
    }
    var r = parseInt(hex.slice(0, 2), 16),
        g = parseInt(hex.slice(2, 4), 16),
        b = parseInt(hex.slice(4, 6), 16);
    if (bw) {
        // https://stackoverflow.com/a/3943023/112731
        return (r * 0.299 + g * 0.587 + b * 0.114) > 186
            ? '#000000'
            : '#FFFFFF';
    }
    // invert color components
    r = (255 - r).toString(16);
    g = (255 - g).toString(16);
    b = (255 - b).toString(16);
    // pad each with zeros and return
    return "#" + padZero(r) + padZero(g) + padZero(b);
}

出力例です。