CSS3 顏色值HSL表示方式&簡單實例

HSL色彩模式：就是色調(Hue)、飽和度(Saturation)、亮度(Lightness)三個顏色通道的改變以及它們相互之間的疊加來獲得各種顏色，色調(Hue)色調最大值360，飽和度和亮度有百分比表示0-100%之間。

因為人們看到顏色第一時間會產生“這是什么顏色？深淺如何？明暗如何？”這個疑問不是這是多少紅加多少綠多少藍混合而成的顏色，所以HSL色彩模式是人類對顏色最直接的感知。

HSL(H,S,L)

取值：

H：

Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360

S：

Saturation(飽和度)。取值為：0.0% - 100.0%

L：

Lightness(亮度)。取值為：0.0% - 100.0%

兼容性：

HSL被現代瀏覽器較好的支持，而且不需要任何前綴，IE6-IE7不支持。IE8支持該方式。

實例1:在css中直接使用hsl值

<style>
.test{background-color:hsl(360,50%,50%);}
</style>

實例2：使用Js修改dom時指定hsl值，以亮度為例

    <style>
        body {
            padding: 100px;
        }

        #ex1Slider .slider-selection {
            background: #BABABA;
        }
    </style>
    <div class="form">
        <div class="form-group">
            <label for="">亮度：</label>
            <input id="ex1" data-slider-id="ex1Slider" type="text"
                   data-slider-min="0" data-slider-max="100" data-slider-step="1"
                   data-slider-value="15" />
        </div>
    </div>

js

//亮度
$('#ex1').slider().on('change', function (e) {
    var newValue = e.value.newValue;
    console.info(newValue);
    $(document.body).css({
        backgroundColor: 'hsl(360,50%,' + newValue + '%)'
    });
});

實例3：修改多個值：

html

    <style>
        body {
            padding:100px;
        }
        .form-group {
            margin-bottom:50px;
        }
        #ex1Slider .slider-selection {
            background: #BABABA;
        }
    </style>
    <div class="form">
        <div class="form-group">
            <label for="">色&emsp;調：</label>
            <input id="Hue" data-slider-id="ex1Slider" type="text"
                   data-slider-min="0" data-slider-max="360" data-slider-step="1"
                   data-slider-value="180" />
        </div>
        <div class="form-group">
            <label for="">飽和度：</label>
            <input id="Saturation" data-slider-id="ex1Slider" type="text"
                   data-slider-min="0" data-slider-max="100" data-slider-step="1"
                   data-slider-value="50" />
        </div>
        <div class="form-group">
            <label for="">亮&emsp;度：</label>
            <input id="Lightness" data-slider-id="ex1Slider" type="text"
                   data-slider-min="0" data-slider-max="100" data-slider-step="1"
                   data-slider-value="50" />
        </div>
    </div>

 

js

//色調
$('#Hue').slider().on('change', function (e) {
    showColor();
});
//飽和度
$('#Saturation').slider().on('change', function (e) {
    showColor();
});
//亮度
$('#Lightness').slider().on('change', function (e) {
    showColor();
});
//統一顯示顏色
function showColor() {
    var h = $('#Hue').slider('getValue');
    var s = $('#Saturation').slider('getValue');
    var l = $('#Lightness').slider('getValue');
    var value = 'hsl(' + h + ',' + s + '%,' + l + '%)';
    console.info(value);
    $(document.body).css({
        backgroundColor:value
    });
}
showColor();

關於本實例中的Slider插件：http://blog.csdn.net/u011127019/article/details/52992654