5

ユーザーが16進色を指定できるカラーピッカーがあります。

また、ユーザーが彩度を調整し、新しい16進色を出力として取得できる彩度スライダーも必要です。

JavaScriptで、彩度値と16進色を新しい16進色に変換する方法はありますか？

たとえば、値が＃FF0000で、彩度が50（100のうち）であるとすると、これから新しい16進色を確認するにはどうすればよいでしょうか。

ウェブサイトのプラグインとして作成しているため、ライブラリを使用できません。できるだけ軽量に保つようにしています。

4

5 に答える 5

8

http://jsfiddle.net/5sfDQ/

$("#color, #saturation").change(function(){
    updateColor();
});

function updateColor(){
    var col = hexToRgb($("#color").val());
    var sat = Number($('#saturation').val())/100;
    var gray = col.r * 0.3086 + col.g * 0.6094 + col.b * 0.0820;

    col.r = Math.round(col.r * sat + gray * (1-sat));
    col.g = Math.round(col.g * sat + gray * (1-sat));
    col.b = Math.round(col.b * sat + gray * (1-sat));

    var out = rgbToHex(col.r,col.g,col.b);

    $('#output').val(out);

    $('body').css("background",out);
}

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}
于 2012-11-12T17:29:03.170 に答える
2 
function applySat(sat, hex) {
    var hash = hex.substring(0, 1) === "#";

    hex = (hash ? hex.substring(1) : hex).split("");

    var long = hex.length > 3,
        rgb = [],
        i = 0,
        len = 3;

    rgb.push( hex.shift() + (long ? hex.shift() : "") );
    rgb.push( hex.shift() + (long ? hex.shift() : "") );
    rgb.push( hex.shift() + (long ? hex.shift() : "") );

    for( ; i < len; i++ ) {
        if ( !long ) {
            rgb[i] += rgb[i];
        }

        rgb[i] = Math.round( parseInt(rgb[i], 16)/100*sat).toString(16);

      rgb[i] += rgb[i].length === 1 ? rgb[i] : "";
    }

    return (hash ? "#" : "") + rgb.join("");
}

console.log(applySat(50, "#ff0000")); // "#7f0000";
console.log(applySat(50, "ff0000")); // "7f0000";
console.log(applySat(50, "#fed")); // "#7f776f"
console.log(applySat(50, "fed")); // "7f776f"
console.log(applySat(20, "#addfaa")); // "#232d22"
于 2012-11-12T17:37:23.993 に答える
1

本当にライブラリを使いたくない場合は、mjijackson の RGB から HSL への変換ページ を参照してください。

コードをコピーして、RGB hex から HSL (または HSV) への変換を行います。スライダーを動かすと、これらを使用してカラー モデル間で変換して彩度値を取得し、それを変更してから、結果の RGB カラーを取得する必要があります。

注: HSL および HSVは、標準カラー モデルです。他のいくつかの回答は、これらの標準カラー モデルに対応しない「彩度」の定義を提案しています。別の定義では、GIMP、Photoshop、またはその他の一般的なグラフィックス アプリケーションに期待するものと一致する結果が得られないため、ユーザーは混乱するでしょう。

于 2012-11-13T03:38:01.153 に答える
1

本当にシンプルで簡単な機能で、色を入力し、彩度を下げる量を追加します。それはかなり良い仕事をしますが、完全に正確ではありません。

    function addSaturation(color, amount){
        var color = color.replace('#', '').split('');
        var letters = '0123456789ABCDEF'.split('');
        for(var i = 0; i < color.length; i++){
            var newSaturation = 0;
            if(letters.indexOf(color[i]) + amount > 15) newSaturation = 15;
            else if(letters.indexOf(color[i]) + amount < 0) newSaturation = 0;
            else newSaturation = letters.indexOf(color[i]) + amount;
            color[i] = letters[newSaturation];
        }
        return "#" + color.join('');
    }

正または負の金額も使用できます。

于 2014-10-06T20:50:16.783 に答える
0

このソリューションで提供されている Javascript を利用して、ニーズに合わせることができます

要素の彩度を変更するには、3 つの HEX 値のそれぞれを同時にシフトし、値を 128 (256 の半分) に近づけます。

background-color: #FF0000; // rgb(255, 0, 0)

これに...

background-color: #BF4040; // rgb(191, 64, 64)
于 2012-11-12T17:17:20.250 に答える