理解十六进制 HTML 颜色代码的直观方式?

15

有没有一种直观的方式或良好的记忆方法,可以理解颜色和其十六进制值之间的对应关系?

10个回答

24

你只需要记住颜色范围从00(无色效果)到FF(全彩色效果),三个数字分别代表红色、绿色和蓝色。

000000是黑色(即没有颜色),FFFFFF是白色(混合了三原色)。

难点在于要记住颜色混合方式,我用以下口诀来辅助记忆:

  • Really good yams: 红 + 绿 = 黄色(土豆是我最喜欢的食物)。
  • Really bad prunes: 红 + 蓝 = 紫色(我真的很讨厌梅干)。
  • Good/bad apples: 绿 + 蓝 = 青色(我对苹果不太感冒)。

显然,如果你的食品口味与我不同,你可能需要想出自己的口诀。但我发现这是我最容易做到的方法。

然后,只需稍加变化就可以添加更多的红或少一些的蓝等颜色。 我通常只使用00、40、80、C0和FF的值,因为这给您选择的125种颜色调色板,而且我不希望过多的选择会减慢我的速度。


既然我还记得那个非常难吃的梅干,我认为这个可以打勾了。虽然梅干也很好吃。 - unmounted
2
abcdef是一种易于记忆且可爱的浅蓝色调 :) - pomarc

12

你需要掌握这三个不同的事情。

  1. 十六进制数的阅读和写作。这需要练习和熟悉。颜色代码从00(零)到FF(= 255)范围内,因此可以花一点时间(例如使用科学计算器的calc.exe?)选取一个数字并尝试猜测它在十六进制下的值,反之亦然。在十进制中计数可能已经变成你的第二天性;在十六进制中计数也是相同的概念,只是有不同的符号和规则。

  2. 如何将RGB颜色代码读作三个分量值。RGB代码可以写成三位数字(#FFF)或六位数字(#FFFFFF)。在第一种情况下,每个数字都是单个颜色分量;红、绿然后蓝。0 = 空,F =“满”(最大值)。第二种情况与第一种情况相同,但是多出来的数字给您提供了更广泛的色调范围,因为您对每个分量有256个可能的强度而不是16个。

  3. 知道RGB颜色模型。你的主要颜色是红色、绿色和蓝色。你的次要颜色是黄色(R+G)、品红色(R+B)和青色(G+B)。增加所有值会使颜色变浅;将它们全部减小会使它变暗。纯灰度图会有三个相等的分量,例如#ddd、#222。通过将其中一个颜色值略微上调来获得灰度渐变- #866将为您提供带有一点红色的深灰色。这一部分您只需要通过经验学习。尝试操作它,并使用像Instant Eyedropper这样的工具来查找已知颜色的十六进制值。

确切地做到这一点非常非常困难,但是在几天内你就可以说“对了...我想要橙色,它位于颜色轮上红色(#F00)和黄色(#FF0)之间,因此让我们尝试平均一下并使用#F90...嗯,有点暗,所以让我们将G和B分量都略微上调一点...#FA2...成功了!”


谢谢你的回复。但是黄色怎么会是“R+G”呢?这不是棕色吗?更重要的是,黄色不是一种基本颜色吗? - Agent007
1
@Agent007 - 当你使用RGB值时,你不是在混合颜料,而是在混合光线 - 它的工作方式非常不同。从技术上讲,混合光线被称为加色混合(从黑色开始添加亮度),而混合颜料则是减色混合(从白色开始向较暗的色调着色)。是的,红色加绿色会变成黄色 - 这也让我感到惊讶,但这就是它的工作原理。你会习惯的。 - Dylan Beattie

3

把它想象成混合颜料。

有三个组成部分RR,GG,BB(RRGGBB),可以用不同的强度混合。 请记住,00是最低强度,ff是最高强度。

例如,我们知道000000在所有颜色上都是低强度,并且是黑色。 同样,ffffff在所有三种颜色成分中都是最高的,将是白色。

您可以通过使其中一个部分更强或更弱来添加或删除颜色。 例如,从黑色000000开始,加入一点红色为330000,或者使用000033加入一点蓝色。 加入两者并查看发生了什么330033。

加入大量红色,使用ff0000。 或者添加适量的绿色006600。

如果所有三个组成部分接近相同的强度,则它们会互相抵消,您将得到灰度,这将根据颜色的强度而轻或重。 因此,000000,333333,666666,999999和ffffff是黑色,深灰色,浅灰色和白色。

如果你拿中灰色并加一点蓝色,你就会得到一个带点蓝的灰色,像888899。红、绿和蓝几乎相等,所以几乎是灰色,但多了一点蓝色。你可以试着进行一些实验。
查看颜色代码的一个非常好的工具是这个(小而免费):

http://www.nattyware.com/pixie.html

希望有所帮助!

1
不要把它看作混合油漆!油漆是一种基于颜料的介质,根据减法原理混合反射的颜色:颜料越多,吸收的光就越多,反射的光就越少。此外,颜料的次要颜色是黄色,而不是绿色: 红色 + 绿色颜料制成棕色。 红色 + 绿色光会产生黄色。你对灰度的理解是正确的 - 如果三个组件都相同,则会产生灰色调,但这并不意味着所有六个数字必须相同。 以下都是纯灰色调的示例:121212 0f0f0f 9e9e9e - brennanyoung

2
我不确定您的意思,但我记得它是一种RGB颜色:前两个数字代表红色,第二对数字代表绿色,最后一对数字代表蓝色。
就像这样:#RRGGBB 当然,要记住较小的数字会产生较暗的颜色。
如果您正在寻找一种方法来记忆橙色的颜色代码,恐怕您没有办法。我总是需要查阅相关资料……

哦,橙色很容易...试试 #F60!;-) 不知道为什么一直在我脑海中。 - John Topley
嗯,也许有人应该以F60品牌名义销售橙子 - 这肯定会帮助我! - Treb

1

十六进制颜色的格式为#RRGGBB,其中RR代表红色,GG代表绿色,BB代表蓝色。由于它们是十六进制的,所以它们的范围是00-FF。从中可以很容易地大致判断出你正在处理的颜色类型,例如#FF12A3将会是相当红的。


假设你的工作范围是从0到256,那么低位和高位分别对应什么?是否有一种方法来记忆和测试中间点,以便于常用颜色的应用? - unmounted
00 就是 0,80 就是 128(一半),FF 就是 256。请记住,每当您将右侧数字重置为 0 时,您就会增加 16。无论如何,这应该会有所帮助! - ljs
FF 是 255,抱歉,而 7F 是一半(127)! - ljs
我总是尽可能地缩短我的标签,比如说#F00,因为这样稍微容易理解一些;F代表满的意思, 0代表空的意思。 - Ross

1
将颜色分解为代表红、绿和蓝色的三元组值。每个分段中十六进制值越高,该颜色就越多。因此,#000000是黑色,#FF0000是全红色,#FF00FF是紫色,等等。

1

我认为获取一个好的HTML颜色表并将其放在你的桌子旁边是很有用的。我喜欢Visibone鼠标垫和海报。


1
记住:
1)十六进制对的顺序为红,绿和蓝。这很容易记住,因为我们经常谈论RGB颜色、RGB屏幕等。
2)数字应该解释为颜色中的光量。因此00表示没有光,而FF表示该颜色中的最大光。
3)如果所有三种颜色的级别都相同,则它们“互相抵消”,因此我们得到灰度颜色。 00是最小光,如果所有三种颜色都是00,则我们得不到光-即黑色。 如果所有三种颜色都是最大光(#FFFFFF),则我们得到白色。 介于两者之间的任何数字都是灰色。

0

好的,显示器使用“RGB”颜色方案。十六进制数中颜色的顺序是RRGGBB。所以只要记住颜色方案的名称就可以知道哪个位置放什么。然后你可以将#RRGGBB解析为三个数字RR、GG和BB。

数字越高,该特定组件越亮。

然后你只需要记住小学时学过的加法颜色轮即可。 ;)


0
我现在能够直观地创建颜色了(当然,需要一些试错),因为我已经多次练习过了。使用颜色混合器(例如红/绿/蓝滑块)有助于理解它们之间的关系。现在,我知道FFFF00是黄色,FF00FF是品红色,00FFFF是青色,当然还有原色,而所有其他颜色都介于它们之间。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接