请问#f00是什么颜色?

在我以前出的前端笔试题里,第一道题就是:请问 #f00 是什么颜色?

这道题,对于知道的人来说简直就是送分题,这还用问吗?不就是红色吗?而对于不知道或者没有用心的人来说,却无从入手,怎么回答的都有。

我问过做了 3 年多的面试者为什么不知道这是什么颜色,他说平时都是直接在设计稿上取,从来没记过。

没记过我是信的,但是你从来都没有好奇这一串字符到底啥意思?到底怎么表示颜色的吗?

算了,还是让姬老师给你讲讲这一串东西到底啥意思吧!

话说色彩有很多种表示方式,最常用的是十六进制的代码表示方式,即 # 开头的 6 位十六进制数 0 ~ F 组成,大小写均可。

为什么要用代码表示颜色呢?因为如果用名字来表示颜色,是十分不精准的。甚至对于设计师来说,根本不知道你说的是哪种颜色,唯有代码可以精准表示出你所要的颜色。

这六个字符每个都是由 10 个数字和 6 个字母组成,总共可以有 16,777,216 种独立的组合。但是肉眼无法分辨这么多颜色,所以我们只来了解一下基本原理,适当的时候装 b 一下即可。

首先,这六位字符可以分为三段,两两一段分别代表红,绿,蓝三原色,对应的英文首字母就是我们常说的 RGB 颜色模型。

图片来源于我翻译的文章《你不可不知的色彩密码》

这三种颜色以不同的比例相加,就会产生各种颜色。我们想象屏幕在没点亮之前没有任何光点打上去,也就是 RGB 全为 0,即黑色 #000000;如果所有光点都最强那就是白光,也就是 #ffffff 了。

从黑色到白色之间,只要是 RGB 变化一致,那就是不同程度的灰,你可以随便记住几个,比如 #333333#666666#999999#cccccc#dddddd 等。

如果只有红色满格,其他的没有,那就是最亮的红色了 #ff0000,也就是点题的红色。只不过是在 css 代码中,这种两两相等的十六进制可以简写为三位,即 #f00 而已。

同理,#00ff00 就是绿色,#0000ff 就是蓝色啦。再复杂一点,#00fffff 代表最亮的青色,#ff00ff 代表最亮的品红,#ffff00 代表最亮的黄色。

大多数情况下,我们可以采用忽略个位字符的方式读出十六进制的颜色,因为十位处的字符可以给出更多信息。

也就是说,你很难区分出 41 和 42的区别,但是 41 和 51 之间的区别是很容易察觉的。

图片来源于我翻译的文章《你不可不知的色彩密码》

上面的例子在十六位的位置上已经有了足够的差异来让我们分辨,大量的红色,一些蓝色,没有绿色。这会构成一个温暖的紫色。

第二个例子的十位(9,9和8)非常类似,那么要想辨别这个颜色,我们还需要检查个位(7,0和5)才行。十六进制颜色的十位处越接近,则该颜色会越中性(即更加不饱和)。

所以,看到十位的位置比较接近的颜色,就一定是灰不拉几的颜色了,只是深浅不同,可能很接近黑色或白色。

对于颜色的深浅,我们经常通过调整明度来实现,而对于十六进制的形式来说,就是直接减每段的值。

还是举标题的例子,#f00 是最亮的红色,那么与之对应的,#d00#900 就是越来越暗的红色了。

到这里,我想你已经知道这些代码是什么意思了,也大概了解了它们变化的奥秘。剩下的就是在工作中用心记住一些常用的颜色值即可。

比如默认的文字我们经常不用纯黑,而用 #333;或者链接,我们经常不用最亮的蓝色,而用 #369 这种更柔和的颜色。

所以,下次再有关于颜色的笔试题,我想你可以和他谈笑风声了。

就算不用做笔试题,下次你见到某个颜色的时候,也可以大致蒙出代码;或者见到代码的时候,说出大致的颜色, 这 b 装得是不是要给 ? ?

原文发布于微信公众号 - 姬小光(hi-laser)

原文发表时间:2017-03-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术换美食换不换

Greedy & Violent

1 2 3//坐标缩小后就可以更方便的选择 double pos = (double)i / n * (n + m);//原来雕像的位置 ans += f...

641
来自专栏程序员的诗和远方

Canvas基础-粒子动画Part2

紧接上一篇文章 Canvas基础-粒子动画Part1 其实这篇早在一个星期之前就应该发了,无奈事情太多,而且我又跑去写微信公众号了。 粒子动起来 有了上一...

3167
来自专栏技术总结

iOS进阶之CAEmitterLayer

2838
来自专栏一心无二用,本人只专注于基础图像算法的实现与优化。

O(1)效率的表面模糊算法优化。

     很久没有写文章了,主要是最近一段时间没有以前那么多空暇空间,内存和CPU占用率一致都很高,应前几日群里网友的要求,今天发个表面模糊的小程序来找回之前...

2436
来自专栏ACM算法日常

Minecraft我的世界(矩阵处理)- HDU 5538

Have you ever played the video game Minecraft? This game has been one of the wor...

1253
来自专栏章鱼的慢慢技术路

OpenGL光照设置

1903
来自专栏Java面试通关手册

六道面试中常见的智力题 来看看你会做几道?

下面的题目来自滴滴出行2017秋招题。这些题目是我自己觉得比较难或者比较容易出错的题目。

2114
来自专栏帮你学MatLab

《Experiment with MATLAB》读书笔记(十一)

读书笔记(十一) % 这是第十一部分GUI,通过一个游戏展示 function tictactoe(job) % 井字棋游戏以及变形 % 游戏1是在1至9中...

3036
来自专栏PPV课数据科学社区

【学习】【R语言读书会】《R实战》读书笔记(第七章)

读书会是一种在于拓展视野、宏观思维、知识交流、提升生活的活动。PPV课R语言读书会以“学习、分享、进步”为宗旨,通过成员协作完成R语言专业书籍的精读和分享,达到...

3289
来自专栏韩东吉的Unity杂货铺

零基础入门 34:摄像机跟随目标

hello,今天来抽出时间给大家更新一发,之前有好多同学和我反馈说特别想要一个收藏贴可以分享如何制作摄像机追随目标,经过大家一而再再而三的催促,今天来给大家分享...

2184

扫码关注云+社区

领取腾讯云代金券