写前端代码满屏的#FF5733、#1A2B3C，看着像乱码但每个数字都有含义。搞懂HEX色值的结构，你看到色值脑子里就有颜色，不用每次都打开取色器试。
HEX色值的基本结构
HEX色值就是十六进制表示的RGB颜色。格式是#加6位十六进制数字，每两位一组分别代表红绿蓝三个通道的强度。比如#FF5733，FF是红通道、57是绿通道、33是蓝通道。
十六进制和十进制怎么转换？十六进制用0到9加A到F表示0到15，A是10，F是15。两位十六进制能表示的范围是00到FF，换算成十进制是0到255。所以每个颜色通道有256级强度，三个通道组合起来就是256乘256乘256共16777216种颜色，这就是常说的24位真彩色。
具体换算方法：把两位十六进制拆开，第一位乘16加第二位。比如FF是15乘16加15等于255，也就是十进制的255。57是5乘16加7等于87。33是3乘16加3等于51。所以#FF5733对应的RGB就是(255, 87, 51)，一个偏红的橙色。
00表示该通道完全没有贡献，FF表示该通道满强度。#FF0000是纯红，#00FF00是纯绿，#0000FF是纯蓝，#000000是黑，#FFFFFF是白。这五个记住，其他色值就有参照系了。
色值和颜色的对应关系怎么记
记不住色值正常，但记住几个关键的能帮你快速定位。纯红#FF0000、纯绿#00FF00、纯蓝#0000FF。黑#000000、白#FFFFFF。灰色是三个通道相等，#808080是中灰，#404040是深灰，#C0C0C0是浅灰。
常见品牌色也值得记。微信绿#07C160、支付宝蓝#1677FF、淘宝橙#FF6700、百度蓝#2932E1。这些记住了改UI不用每次翻设计稿。
判断色值偏什么色调，看哪个通道数值大。红色通道明显大就是暖色，蓝色通道大就是冷色，三个差不多就是灰色调。比如#FF5733红255绿87蓝51，红远大于绿蓝，明显偏红橙。#3366FF红51绿102蓝255，蓝最大，是偏蓝的紫色。
简写形式#RGB
当HEX色值的每两位相同，可以简写成3位。比如#FFFFFF简写成#FFF，#000000简写成#000，#FFAA00简写成#FA0。简写和全写表示的颜色一样，但简写只能表示每通道值为00、11、22到FF这16档，共4096种颜色，不如6位灵活。
实际开发中能简写就简写，代码更短。但要精确控制颜色时必须用6位，比如#FF5733没法简写，因为57和33都不是重复数字。
透明度怎么表示
6位HEX加2位透明度变成8位，叫RGBA的HEX表示。格式是#RRGGBBAA，最后两位AA表示透明度。00全透明，FF不透明。比如#FF0000FF是不透明纯红，#FF000000是全透明（不可见）的红色。
透明度的十六进制换算成百分比：FF是100%，80是50%，40是25%，C0是75%。这几个常用值记住够日常用。比如#FF573380就是半透明的那个橙色。
注意不是所有浏览器都支持8位HEX透明度。老旧浏览器要用rgba()函数，写法rgba(255, 87, 51, 0.5)。现代浏览器两种都支持。
HEX和RGB怎么互转
HEX转RGB就是十六进制转十进制。#FF5733，红FF换算255，绿57换算87，蓝33换算51，得到RGB(255, 87, 51)。
RGB转HEX就是十进制转十六进制。RGB(255, 87, 51)，红255换算FF，绿87换算5乘16加7是57，蓝51换算3乘16加3是33，得到#FF5733。
十进制转十六进制的方法：除16取余。87除16商5余7，5小于16不用再除，结果是57。51除16商3余3，结果是33。这个手算麻烦，实际开发直接用工具或编程语言内置函数。
JavaScript里parseInt('FF', 16)得到255，toString(16)把数字转十六进制字符串。CSS里两种格式都支持，rgb(255, 87, 51)和#FF5733等价。
几个常被问的问题
【HEX色值大小写有区别吗？】没有，#FF5733和#ff5733完全一样，CSS和HTML都识别。习惯上大写更醒目，但小写也不报错。团队规范统一一种就行。
【为什么有些色值只有3位？】是简写形式，每两位相同的6位色值可简写成3位。#FFF等于#FFFFFF，#F00等于#FF0000。3位色值能表示的颜色少（4096种），但代码更短，常见纯色和灰色用它。
【怎么快速知道一个颜色的HEX值？】用本站的颜色选择器工具，拖动色块直接显示HEX和RGB值。或者用浏览器开发者工具的取色器，点页面任何元素看它的颜色值。Photoshop的吸管工具也能取色显示HEX。
HEX色值看着乱但有规律。记住#FF0000、#00FF00、#0000FF、#000000、#FFFFFF这五个基准，其他色值往这五个上靠就能估出大概颜色。需要精确取色用工具，需要换算用本站的颜色转换器，输入HEX直接出RGB和HSL。
