HSLA制作配色表

最新推荐文章于 2021-04-10 09:05:39 发布
最新推荐文章于 2021-04-10 09:05:39 发布
阅读量152 收藏
点赞数
原文链接：http://www.cnblogs.com/ron123/p/5391500.html
版权 
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HSLA制作配色表</title>
    <style>
    .table-wrap {
        width: 400px;
        margin: 10px;
        float: left;
    }
    
    table {
        width: 400px;
        border: 1px solid #756c6c;
        border-left: none;
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    th,
    td {
        border-top: 1px solid #756c6c;
        border-left: 1px solid #756c6c;
        padding: 10px;
        text-align: center;
        vertical-align: middle;
    }
    /*h=0 s=50% l=50%*/
    
    tbody tr:nth-child(1) td:nth-of-type(1) {
        background: hsla(0, 50%, 50%, 1);
    }
    
    tbody tr:nth-child(1) td:nth-of-type(2) {
        background: hsla(0, 50%, 50%, .8);
    }
    
    tbody tr:nth-child(1) td:nth-of-type(3) {
        background: hsla(0, 50%, 50%, .6);
    }
    
    tbody tr:nth-child(1) td:nth-of-type(4) {
        background: hsla(0, 50%, 50%, .4);
    }
    
    tbody tr:nth-child(1) td:nth-of-type(5) {
        background: hsla(0, 50%, 50%, .2);
    }
    
    tbody tr:nth-child(1) td:nth-of-type(6) {
        background: hsla(0, 50%, 50%, 0);
    }
    /*h=60 s=50% l=50%*/
    
    tbody tr:nth-child(2) td:nth-of-type(1) {
        background: hsla(60, 50%, 50%, 1);
    }
    
    tbody tr:nth-child(2) td:nth-of-type(2) {
        background: hsla(60, 50%, 50%, .8);
    }
    
    tbody tr:nth-child(2) td:nth-of-type(3) {
        background: hsla(60, 50%, 50%, .6);
    }
    
    tbody tr:nth-child(2) td:nth-of-type(4) {
        background: hsla(60, 50%, 50%, .4);
    }
    
    tbody tr:nth-child(2) td:nth-of-type(5) {
        background: hsla(60, 50%, 50%, .2);
    }
    
    tbody tr:nth-child(2) td:nth-of-type(6) {
        background: hsla(60, 50%, 50%, 0);
    }
    /*h=120 s=50% l=50%*/
    
    tbody tr:nth-child(3) td:nth-of-type(1) {
        background: hsla(120, 50%, 50%, 1);
    }
    
    tbody tr:nth-child(3) td:nth-of-type(2) {
        background: hsla(120, 50%, 50%, .8);
    }
    
    tbody tr:nth-child(3) td:nth-of-type(3) {
        background: hsla(120, 50%, 50%, .6);
    }
    
    tbody tr:nth-child(3) td:nth-of-type(4) {
        background: hsla(120, 50%, 50%, .4);
    }
    
    tbody tr:nth-child(3) td:nth-of-type(5) {
        background: hsla(120, 50%, 50%, .2);
    }
    
    tbody tr:nth-child(3) td:nth-of-type(6) {
        background: hsla(120, 50%, 50%, 0);
    }
    /*h=180 s=50% l=50%*/
    
    tbody tr:nth-child(4) td:nth-of-type(1) {
        background: hsla(180, 50%, 50%, 1);
    }
    
    tbody tr:nth-child(4) td:nth-of-type(2) {
        background: hsla(180, 50%, 50%, .8);
    }
    
    tbody tr:nth-child(4) td:nth-of-type(3) {
        background: hsla(180, 50%, 50%, .6);
    }
    
    tbody tr:nth-child(4) td:nth-of-type(4) {
        background: hsla(180, 50%, 50%, .4);
    }
    
    tbody tr:nth-child(4) td:nth-of-type(5) {
        background: hsla(180, 50%, 50%, .2);
    }
    
    tbody tr:nth-child(4) td:nth-of-type(6) {
        background: hsla(180, 50%, 50%, 0);
    }
    /*h=240 s=50% l=50%*/
    
    tbody tr:nth-child(5) td:nth-of-type(1) {
        background: hsla(240, 50%, 50%, 1);
    }
    
    tbody tr:nth-child(5) td:nth-of-type(2) {
        background: hsla(240, 50%, 50%, .8);
    }
    
    tbody tr:nth-child(5) td:nth-of-type(3) {
        background: hsla(240, 50%, 50%, .6);
    }
    
    tbody tr:nth-child(5) td:nth-of-type(4) {
        background: hsla(240, 50%, 50%, .4);
    }
    
    tbody tr:nth-child(5) td:nth-of-type(5) {
        background: hsla(240, 50%, 50%, .2);
    }
    
    tbody tr:nth-child(5) td:nth-of-type(6) {
        background: hsla(240, 50%, 50%, 0);
    }
    /*h=300 s=50% l=50%*/
    
    tbody tr:nth-child(6) td:nth-of-type(1) {
        background: hsla(300, 50%, 50%, 1);
    }
    
    tbody tr:nth-child(6) td:nth-of-type(2) {
        background: hsla(300, 50%, 50%, .8);
    }
    
    tbody tr:nth-child(6) td:nth-of-type(3) {
        background: hsla(300, 50%, 50%, .6);
    }
    
    tbody tr:nth-child(6) td:nth-of-type(4) {
        background: hsla(300, 50%, 50%, .4);
    }
    
    tbody tr:nth-child(6) td:nth-of-type(5) {
        background: hsla(300, 50%, 50%, .2);
    }
    
    tbody tr:nth-child(6) td:nth-of-type(6) {
        background: hsla(300, 50%, 50%, 0);
    }
    /*h=360 s=50% l=50%*/
    
    tbody tr:nth-child(7) td:nth-of-type(1) {
        background: hsla(360, 50%, 50%, 1);
    }
    
    tbody tr:nth-child(7) td:nth-of-type(2) {
        background: hsla(360, 50%, 50%, .8);
    }
    
    tbody tr:nth-child(7) td:nth-of-type(3) {
        background: hsla(360, 50%, 50%, .6);
    }
    
    tbody tr:nth-child(7) td:nth-of-type(4) {
        background: hsla(360, 50%, 50%, .4);
    }
    
    tbody tr:nth-child(7) td:nth-of-type(5) {
        background: hsla(360, 50%, 50%, .2);
    }
    
    tbody tr:nth-child(7) td:nth-of-type(6) {
        background: hsla(360, 50%, 50%, 0);
    }
    </style>
</head>

<body>
    <table>
        <caption>HSLA制作透明过渡色块</caption>
        <thead>
            <tr>
                <th colspan="7">透明度</th>
            </tr>
            <tr>
                <th>色度</th>
                <th>1</th>
                <th>0.8</th>
                <th>0.6</th>
                <th>0.4</th>
                <th>0.2</th>
                <th>0</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>0</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th>60</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th>120</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th>180</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th>240</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th>300</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th>360</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>

</html>
View Code

转载于:https://www.cnblogs.com/ron123/p/5391500.html

di84186
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS学习（十六）-HSLA颜色模式
bwshqh的博客
03-16 1894
一、理论： 1.HSLA颜色模式 a.HSLA在HSL基础上增加了不透明度，值越大透明度越低 b.HSLA颜色模式的浏览器兼容性和HSL一样，只有较新版本的主流浏览器才支持 2.RGBA和HSLA颜色模式二者可以完全相互替换 3.RGBA/HSLA的IE兼容方案 a.在IE8以下版本，一般在前面设置一个非透明色，在其后紧跟一个RGBA/HSLA颜色模式 b.将透明的PNG图片平铺做为
CSS3中HSL和HSLA的简单使用示例
12-13
使用CSS3 HSL声明同样是用来设置颜色的。下一个呢？ HSLA？ 是的，这个和RGBA的效果是一样的。 HSL声明使用色调Hue(H)、饱和度Saturation(s)和亮度Lightness(L)来设置颜色。     Hue衍生于色盘：0和360是红色，接近120的是绿色，240是蓝色。    Saturation值是一个百分比：0%是灰度，100%饱和度最高    Lightness值也是一个百分比：0%是最暗，50%均值，100%最亮。 随想：为什么是”ligntness”呢？或许我更习惯Photoshop中的”Brightness”呢…… 浏览器兼容性： 目前HSL和HSLA被Fi
什么是CSS3 HSLA色彩模式？HSLA模拟渐变色条
09-24
主要以模拟渐变色条实例，针对CSS3 HSLA色彩模式进行介绍，使用HSLA色彩模式，可以设计不同的透明效果，感兴趣的小伙伴们可以参考一下
轻量级JavaScript(JS) HSLA颜色选择器
Uncle_long的博客
02-15 545
https://www.jianshu.com/p/0c38853c41fb
颜色的HSLA 表示法
朝阳39的博客
10-14 1207
举例： background-color: hsla(240,50%,50%,0.4); 解释： H 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。 S 饱和度，取值范围 0%~100%。值越大，越鲜艳。 L 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。 A 透明度，取值范围 0~1。 如果不知道...
HSL和HSLA颜色
weixin_44131922的博客
04-10 1105
HSL HSL 颜色值得到以下浏览器的支持：IE9+、Firefox、Chrome、Safari 以及 Opera 10+。 HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度） - 表示颜色柱面坐标表示法。 HSL 颜色值是这样规定的： hsl(hue, saturation, lightness)。 Hue 是色盘上的度数（从 0 到 360）:0 (或 360) 是红色，120 是绿色，240 是蓝色。 Saturation 是百分比值；0% 意味着灰色，而 10
CSS 的 hsl() 和 hsla() 函数（设置颜色的方式之一）
单枪匹码
11-07 4301
一：CSS中的 hsl()函数： 1、定义与用法：hsl() 函数使用色相、饱和度、亮度来定义颜色。 HSL 即：色相（Hue）、饱和度（Saturation）、亮度（Lightness）。 色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0 ~ 100%的数值。 亮度（L），取0 ~ 100%，增加亮度，颜色会向白...
CSS配色辞典方案
12-04
在CSS中，颜色可以通过多种方式表示：颜色名称（如`red`）、十六进制值（如`#ff0000`）、RGB值（如`rgb(255, 0, 0)`）、RGBA值（包含透明度）、HSL值（色相、饱和度、亮度）以及HSLA值。理解这些表示方法是进行有效...
css3系列教程(HSL和HSLA).rar
07-09
CSS3是层叠样式表的第三版，引入了许多新的特性和功能，极大地丰富了网页设计的视觉效果。在本教程中，我们将重点关注HSL（色相、饱和度、亮度）和HSLA（色相、饱和度、亮度、透明度）颜色模型，这两种颜色模式在CSS...
css配色字典
11-09
2. 颜色值：颜色可以通过十六进制（#RRGGBB）、RGB函数（rgb(r, g, b)）、RGBA（带有透明度的RGB）、HSL（色相、饱和度、亮度）和HSLA（带有透明度的HSL）等方式表示。 3. 色彩理论：了解色彩的对比、调和、互补、...
css3中颜色值用HSLA表示
zhanglongdream的博客
07-18 2750
一看见css3 我们就知道IE8及其以下都不支持 其有四个参数    h 表示色调 从0-360   s 饱和度  0 - 100%   l 亮度    0 -100%   a 透明度  0-1 还是来个例子吧 background: -webkit-linear-gradient(45deg, hsla(190, 100%, 50%, 1) 0%,
css中hsla代表_hsla（）函数以及CSS中的示例
cumt30111的博客
07-19 635
css中hsla代表Introduction: 介绍： The use of functions is very beneficial for web development and one must learn as many functions as they can, therefore keep learning functions for improving your knowled...
CSS颜色调色工具
飞鸟与鱼
03-07 700
CSS调色： [url]http://meyerweb.com/eric/tools/color-blend/[/url] SASS调试： [url]http://sassmeister.com/[/url]
CSS3中的RGBA，HSLA颜色
小马过河
09-26 1210
CSS 中的颜色可以由RGBA色彩空间和HSLA色彩空间两种方式来表述，二者均可以用来在设置颜色的同时也指定其透明度。 RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。 　R：红色值。正整数 （0~255） 　G：绿色值。正整数 （0~255） 　B：蓝色值。正整数（0~255） 　A：透明度。取值0~1之间 使用如下： ...
matlab下载.pdf
07-14
matlab下载下载方式及注意事项
Android系统原理及开发要点详解-从入门到精通
07-13
Android系统原理及开发要点详解 Java4 Android视频教程 Android开发视频教学 从入门到精通 Android的软件管理器的开发教程视频 Android深入浅出_Android高端课程分享试听 JavaWeb Android系统的手机防盗软件的实现 Android开发入门与实战随书视频 视频列表.txt 0.0MB 开发入门与实战代码.rar 6.1MB 第9章 我来“广播”你的“意图”——Intent和Broadcast面对面.wmv 15.1MB 第8章 移动信息仓库——Android的数据存储操作之轻轻地我保护——SharedPreferences存储-2.wmv 0.6MB 第8章 移动信息仓库——Android的数据存储操作之轻轻地我保护——SharedPreferences存储-1.wmv 24.3MB 第8章 移动信息仓库——Android的数据存储操作之Android数据存储概述.wmv 57.7MB 第7章 良好的学习开端——Android基本组件介绍之友好地互动交流——对话框(Dialog)介绍与实例-2.wmv 7.
GESP等级认证 2024年6月 C++一级真题
最新发布
07-14
GESP等级认证 2024年6月 C++一级真题 从官网上刚刚下载下来的,题都是热乎的,这可是最新真题 大家看一看瞧一瞧,走过路过不要错过,免费下载,全篇无水印,不好用随便吐槽我! 涵盖选择题,判断题,编程题,基础知识多,满满的干货,非常建议下载!!!!! 萌新小白来做做题,复习巩固都很合适!
大学生创业计划书(35)三份资料.doc
07-14
大学生创业计划书(35)三份资料.doc
cesium点云按高程染色公式 使用hsla染色
05-13
Cesium点云按高程染色可以使用HSLA颜色模型来实现。HSLA颜色模型包括色相（Hue）、饱和度（Saturation）、亮度（Lightness）和透明度（Alpha）四个参数。其中，色相参数可以根据高程值进行映射，实现不同高度的颜色...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值