【CSS】271- RGB、HSL、Hex网页色彩,看完这篇全懂了
作者:CSS可乐
http://csscoke.com/2015/01/01/rgb-hsl-hex/
网页使用到的色彩标示方法中,从古早时期大家都在用的16进位码(#000000)、RGB色值标示、HSL色彩标示,其中网页设计师最常使用的16进位色码标示法,设计师究竟了解多少?而16进位码又是如何计算色彩的呢?有没有办法直接脑袋就把色彩算出来?HSL色彩该如何运用与记忆?有没有什么秘诀或小技巧?一连串的问题就跟着Amos继续看下去。
先来说说RGB色彩( RGB color )
RGB色彩在网页设计时的标记方式是RGB(0~255 , 0~255, 0~255),其中括弧内以逗号分隔的三组数值恰好就是(R, G, B) 的色彩数值,所以数值会是0~255 共256个数值的这个区间,而RGB色彩大家应该都知道的混色原理就是加法混色,各位就直接用灯光来想吧,我们把0~255的数值当作是开灯的亮度来看,0就是没开灯,255就是开到最亮,所以当我把红色光线开到最亮而其它两个色光都不开时就是RGB(255, 0, 0)这样,想当然的只有开红色光而没有开其他色光的话,你看到的就是红色啰,那么如果我把红色光只开一半,像是这样RGB(127, 0, 0),那么就会变成暗红色,因为没有开到最亮,这样应该很容易理解了吧。
同样的道理,当我们单独开启其它色光时,就只会看到该光线的色彩,如绿色就是RGB(0,255,0),蓝色就是RGB(0,0,255),如果想要黄色就是混合R与G,像是这样RGB(255,255,0),看起来有点辛苦,我们就用图片来记忆吧,RGB色彩以R在上方顺时针排列,而中间产出的混合色采则是我们印表机的C、M、Y(蓝、洋红、黄)三色,CMY三色则是以C于下方同样呈现顺时针方向排列,就把这张图记在脑海中,简单的说个口诀并记住「R在上顺时针、C在下顺时针」,很容易的你就能够把这画面中的色彩顺序记住了,以后脑袋混色再也没有那么困难了。
再来谈谈HSL色彩( HSL color )
其实国外有不少设计师喜欢HSL(Hue, Saturation, Lightness)色彩写法,HSL色彩的写法是HSL(色相角度但不加单位0~360, 色彩饱和度0~100%, 色彩亮度0~100 %),而在括号内的色相采用的是0~360度,正常所见的语法就像是这样
HSL( 240, 100%, 50% )
色相(Hue)
色相的0度为R(红)色,120度为G(绿)色,240度为B(蓝)色,为了记忆方便,先让我把角度0度设定为正上方(与CSS3渐层相同)大家记忆比较方便点,所以以顺时针方向旋转,他们之间的角度就如同下图所示
亮度/明度(Lightness)
如果我们把上面这张HSL 色彩的H(Hue) 平面图形的亮度(Lightness)转换成一个立体的圆柱体时,你就能看到如下图所示
由中间开始,越是上方的就越是增亮(白色份量增加),增亮到最后就变成纯白,而越是往下方则越是缩减亮度(黑色份量增加),亮度缩减到最后就变成了黑色,所以一般来说,HSL色彩中的L预设值会是50%,若要变暗一点就把数值往0%调整,若要变亮变白一点就把数值往100%调整
饱和度(Saturation)
如同亮度(Lightness)一样,饱和度(Saturation)也是采用百分比方式呈现,如下图所示
以色彩预设都是100%饱和的情况下,若是要让色彩变得不那么鲜艳,就把色彩饱和度(Saturation)往0%的方向调整即可,色彩饱和度(Saturation)不同于色彩亮度(Lightness)的地方在于,色彩饱和度(Saturation)降低之后,色彩越是不鲜艳就越接近灰色而不是变黑,这一点千万要能够区分。
所以,了解以上HSL三个数值的差异之后,倘若我们今天要一个黄色,那我们就可先设定HSL(60, 100%, 50%),色相60度为黄色,预设100%饱和(鲜艳) ,预设正常亮度50%,如果我们需要一个鹅黄色的话,那我们就只需要把黄色多加一点白色,所以只要修改L的数值即可,像是这样HSL(45, 100%, 80%),如果我们希望色彩接近橙色的话,那我们就修改色相(Hue)角度往R方向调整即可,像是这样HSL(40, 100%, 80%),这样是不是变得简单许多呢^^
若各位想知道更多关于HSL的色彩模型说明,也可以看看维基的解说,会有更多概念在里面喔。
最后说说网页16进位色彩( hex color )
16进位码简写为Hex,在HTML&CSS中16进位码的色彩标示是由一个井号(#)开始,接着后面带6个数字来表示,此色彩标示方式对许多设计师来说太长用到但却又有点摸不着头绪,光是要选个红色或粉红色就不知道该怎么写了,还是得依靠Dreamweaver的色盘才能写出来,其实16进位色码没有那么困难,我们只要了解三个问题就学会了,就让Amos来简单的说明一下。
10进位原理
第一个问题就是16进位是啥?一般我们常见的进位方式是10进位,也就是说一个「数」(念ㄕㄨˋ)只要超过第十位数之后就进位,如果还是无法理解的话,让我们看下面这张图的解释。
16进位原理
由上图可以看到一段数字的第十一位数就进位了,这也是我们最常用到的计算方式,而16进位的概念也是相同的,只是16进位中的第11位数字开始由于没办法写成「11」(2位数就是进位了,所以不能这样写啊),所以在第11位数开始采用abcdef这些英文字母来当作数字使用,所以完整的16进位大概就像下图所示,第16位数的代表字母是「f」,超过第16位数之后就进位了。
16进位色彩表示方式
第二个问题则是这16进位码的色彩标示怎么标示的?基本上HTML & CSS中的16进位码色彩标示共分成三组数字,每两码就表示一个色彩,如下图所示
从图片中可见到16进位码中6码数字的前两码代表的是RGB色彩中的R色,而中间的两码数字代表的是G色,后两码则是B色,如果我们把16进位码当作是发光的强度来看,#000000就表示RGB三个颜色都没有发光,那么没有发光就你看到的就是黑色啰,又如果我们希望呈现红色的话,我们就把R色光开到最大,像这样#FF0000就会看到红色的色彩了。再来做个练习,如果我们想要黄色,那就是把红色光跟绿色光混合起来,所以我们就把红色光跟绿色光像这样开到最大#FFFF00,你就能够看到黄色啰。
16进位调整亮度技巧
以上这样的做法最多只用到两个颜色,且用到的是原色居多或许还没有太大问题,现在我们进一步的来玩一下16进位色彩,我们可以知道色光是属加法混色,是越加越亮的,所以我们如果想要一个鹅黄色,我们可以先把黄色加出来之后再混进一点蓝色,当作是HSL色彩中的亮度调整用,当蓝色光线加进来之后就变亮了,而你也会看到鹅黄色出现了,所以我们的原始码大概会长这样#ffffcc。
还不是很懂吗?Amos简单的说,在使用16进位码设定色彩的时候,第一步你需要先将原色设定出来,接着再利用第三色来调整亮度,这样就搞定了!那若是我们想要调暗的话,那就是把原本的两个色彩数值降低(也就是光线强度开若一点的概念),这样就你就可以把颜色设定出来啰!其实没有那么困难的,平常写个三四次应该就能上手了~希望大家都能变成16进位码设定高手啰(喂!讲那么多!我用HSL不是更快吗?XDDD)
若大家对16进位有更多兴趣的话,也可以看看维基百科中在不同语言中的16进位表示法有何不同。
每一个“在看”,都是对我最大的肯定!
【CSS】271- RGB、HSL、Hex网页色彩,看完这篇全懂了的更多相关文章
- 对 Redux 一头雾水?看完这篇就懂了
首先,学习 Redux 可能会很困难 当你终于学会了如何使用 React,也有了自己去构建一些应用的信心,那会是一种非常棒的感觉.你学会了管理状态,一切看起来井井有条.但是,很有可能这就到了你该学习 ...
- C# - 协变、逆变 看完这篇就懂了
1. 基本概念 官方:协变和逆变都是术语,前者指能够使用比原始指定的派生类型的派生程度更大(更具体的)的类型,后者指能够使用比原始指定的派生类型的派生程度更小(不太具体的)的类型.[MSDN] 公式: ...
- spring 定时任务的 执行时间设置规则-----看完这篇就懂了
单纯针对时间的设置规则 org.springframework.scheduling.quartz.CronTriggerBean允许你更精确地控制任务的运行时间,只需要设置其cronExpressi ...
- 看完这篇 Linux 权限后,通透了!
我们在使用 Linux 的过程中,或多或少都会遇到一些关于使用者和群组的问题,比如最常见的你想要在某个路径下执行某个指令,会经常出现这个错误提示 . permission denied 反正我大概率见 ...
- APP的缓存文件到底应该存在哪?看完这篇文章你应该就自己清楚了
APP的缓存文件到底应该存在哪?看完这篇文章你应该就自己清楚了 彻底理解android中的内部存储与外部存储 存储在内部还是外部 所有的Android设备均有两个文件存储区域:"intern ...
- Windows PowerShell是啥?看完本文你就懂它了
这篇文章主要介绍了Windows PowerShell是啥?Windows PowerShell是什么?Windows PowerShell有哪些特性?Windows PowerShell有什么用?看 ...
- 关于 Docker 镜像的操作,看完这篇就够啦 !(下)
紧接着上篇<关于 Docker 镜像的操作,看完这篇就够啦 !(上)>,奉上下篇 !!! 镜像作为 Docker 三大核心概念中最重要的一个关键词,它有很多操作,是您想学习容器技术不得不掌 ...
- 【最短路径Floyd算法详解推导过程】看完这篇,你还能不懂Floyd算法?还不会?
简介 Floyd-Warshall算法(Floyd-Warshall algorithm),是一种利用动态规划的思想寻找给定的加权图中多源点之间最短路径的算法,与Dijkstra算法类似.该算法名称以 ...
- [转帖]看完这篇文章你还敢说你懂JVM吗?
看完这篇文章你还敢说你懂JVM吗? 在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身使用 ...
随机推荐
- JAVA继承中子父类的构造方法
首先,构造方法本身会有一个隐式的无参构造(默认): ①不写构造方法,类中的第一行代码事实上有一个默认的无参构造(系统会隐式为你写好) public class Student { private St ...
- IBM-X3850-4U诊断面板信息
IBM X3850 4U 指示灯 描述 OVERSPEC 没有足够的电量为系统供电.NONRED和LOG指示灯可能也点亮 PS 一个电源故障或者被电源未插 LINK 保留 CPU CPU出现故障.丢失 ...
- windows下自制动画层引擎 - 放两个demo
一年前想写一个像cocoa那样,可以方便层动画开发的引擎,写着写着又逆向它的QuartzCore.framework,也就是CoreAnimation的底层,已经大半年没有搞windows这个引擎.大 ...
- Vue学习之Vue模拟后台数据
前后端项目的开发,需要前端和后端同时进行开发,有时后端开发人员还未完成API接口可以提供给前端调用,因此就需要模拟前端请求后端接口,后端返回数据.一般开发中都是返回json数据格式来完成前后端的交互. ...
- HashSet源码学习,基于HashMap实现
HashSet源码学习 一).Set集合的主要使用类 1). HashSet 基于对HashMap的封装 2). LinkedHashSet 基于对LinkedHashSet的封装 3). TreeS ...
- Linux基础命令复习01
一.Linux中的基本查看.查找命令: 1.ls 查看目录信息: -l #查看属性,以长格式显示 -d #查看本身属性 -A #显示包括以.开头的隐藏文档 -h #提供易读的单位 -R #表示递 ...
- 高性能消息队列(MQ)Kafka 简单由来介绍(1)
Kafka是由Apache软件基金会开发的一个开源流处理平台,由Scala和Java编写.Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者在网站中的所有动作流数据. 这种动作(网页浏 ...
- [ASP.NET Core 3框架揭秘] 配置[1]:读取配置数据[上篇]
提到"配置"二字,我想绝大部分.NET开发人员脑海中会立即浮现出两个特殊文件的身影,那就是我们再熟悉不过的app.config和web.config,多年以来我们已经习惯了将结构化 ...
- 程序员的算法课(18)-常用的图算法:广度优先(BFS)
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/m0_37609579/article/de ...
- 10-kubernetes serveraccount RBAC
目录 认证安全 serviceAccountName 和 userAccount serviceaccount 创建 使用admin 的SA 测试 URL访问kubernetes资源 APIserve ...