逐浪云主机

立即开通

CSS3 颜色值HSL表示方式&简单实例全教程

作者: 发布时间:2021-06-17 来源:本站原创 点击数:

何谓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值,以亮度为例
html:

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

完整代码:

<!doctype html>
<html lang="zh-CN">
<head>
<title>动态hsl调整背景色</title>
<meta name="Generator" content="Zoomla!逐浪®CMS">
<meta name="Author" content="去上云73ic.com">
<meta name="Others" content="字体呈现基于逐浪字库f.ziti163.com">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  
<link href="https://cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
<script src="https://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script>
</head>
<body>
<style>
body {    padding: 100px;}
#ex1Slider .slider-selection {background: #BABABA;}
</style>
<h1>动态hsl调整背景色</h1>
<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>
<script>
//亮度
$('#ex1').slider().on('change', function (e) {
    var newValue = e.value.newValue;
    console.info(newValue);
    $(document.body).css({
        backgroundColor: 'hsl(360,50%,' + newValue + '%)'
    });
});
</script>


</body>
</html>

效果如下:
在这里插入图片描述

实例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="">色 调:</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="">亮 度:</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();

在这里插入图片描述

完整代码:

<!doctype html>
<html lang="zh-CN">
<head>
<title>新建HTML</title>
<meta name="Generator" content="Zoomla!逐浪®CMS">
<meta name="Author" content="去上云73ic.com">
<meta name="Others" content="字体呈现基于逐浪字库f.ziti163.com">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  
<link href="https://cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
<script src="https://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script>
</head>
<body>
<h1>动态hsl调整背景色@多值</h1>
 <style>
        body {
            padding:100px;
        }
        .form-group {
            margin-bottom:50px;
        }
        #ex1Slider .slider-selection {
            background: #BABABA;
        }
    </style>
    <div class="form">
        <div class="form-group">
            <label for="">色 调:</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="">亮 度:</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> 
<script>
//色调
$('#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();
</script>
</body>
</html>

关于本实例中的Slider插件:http://blog.csdn.net/u011127019/article/details/52992654

本文责任编辑: 加入会员收藏夹 点此参与评论>>
复制本网址-发给QQ/微信上的朋友