颜色为何需要表达
当你在浏览器里打开任何一个网站，目光首先被什么吸引？我猜大多数人会说"图片"或"布局"，但如果仔细回想，会发现真正在不知不觉中影响你情绪和判断的，其实是颜色。按钮是绿色让人想点击还是红色更紧迫？背景是深色还是浅色更耐看？导航栏用了什么蓝才让人觉得专业可信赖？
颜色是一种语言，但它不像文字那样直白。在数字世界里，颜色需要被翻译成计算机能够理解和处理的数值。这就是为什么设计师和开发者需要掌握HEX和RGB这两种最常见的颜色表示方法。它们看起来只是一串字符或三个数字，但背后却是一套完整的色彩数学体系。理解这套体系，你就不再只是调色盘前盲目的点击者，而成为一个真正懂得如何驾驭色彩的人。
HEX格式是什么
HEX，或者叫十六进制颜色码，应该是网页设计领域中出现频率最高的颜色表示方式。它以井号（#）开头，后面跟着六位字符。举个例子，#FF5733这个代码，在浏览器的地址栏或样式表中几乎无处不在。
为什么叫十六进制？因为它用到了数字0到9加上字母A到F，总共16个符号来表示数值。这六位字符实际上分成三组，每组两位，分别对应红、绿、蓝三种颜色成分的强度。比如#FF5733，FF代表红色的最大值（255），57代表绿色大约87的强度，33代表蓝色大约51的强度。
为什么是两位？因为每两位十六进制数对应一个字节（Byte），一个字节可以表示0到255这256个不同的值。两个十六进制位最大是FF，也就是十进制的255，正好把0到255这个范围填满了。三个通道各占一字节，所以理论上HEX可以表示256的三次方，也就是大约1677万种颜色——这个数字已经超过了人眼能分辨的颜色数量。
你可能还见过三位数的HEX代码，比如#F00。这其实是六位版本的缩写。#F00等价于#FF0000，因为每一位字符会自动重复一次来补齐两位。如果你的颜色恰好满足这种规律，用缩写确实能省点力气，不过在实际开发中大多数情况下还是会写完整六位，避免歧义。
RGB格式解析
RGB颜色格式在概念上比HEX更直观。它直接用三个数字来表示红、绿、蓝三个通道的强度，每个数字从0到255，格式通常写作rgb(255, 87, 51)。这种写法读起来很像人说话——"255份红色，87份绿色，51份蓝色"——所以很多设计新手更容易接受这种表达方式。
RGB格式还支持一种更灵活的表达：rgba()。四个参数的版本中，第四个参数代表透明度，取值从0到1之间的小数。rgba(255, 87, 51, 0.5)表示颜色半透明，字面意思就是你隔着它能隐约看到下面的内容。在做遮罩层、按钮悬停效果或者水印时，这个功能相当有用。
| 颜色名称 | HEX | RGB | 预览 |
|---|---|---|---|
| 纯红 | #FF0000 | rgb(255, 0, 0) | |
| 纯绿 | #00FF00 | rgb(0, 255, 0) | |
| 纯蓝 | #0000FF | rgb(0, 0, 255) | |
| 白色 | #FFFFFF | rgb(255, 255, 255) | |
| 黑色 | #000000 | rgb(0, 0, 0) | |
| 中性灰 | #808080 | rgb(128, 128, 128) |
转换的数学原理
理解了两种格式的含义，转换其实就变成了一道简单的数学题。把HEX转成RGB，只需要把每组两位十六进制数转换成对应的十进制数即可。十六进制的A等于十进制的10，B是11，以此类推，F是15。所以#AB12的转换过程是：A×16+B=10×16+11=171，1×16+2=18，所以RGB值就是rgb(171, X, 18)。
反过来，把RGB转成HEX，就是把每个十进制数（0-255）除以16，得到商和余数，商的十六进制和余数的十六进制拼接起来。比如231转十六进制：231÷16=14余7，14的十六进制是E，7的十六进制是7，所以231对应"E7"。
当然，在实际工作中没有人会手算这些。打开任一浏览器开发者工具，点击颜色选择器，它就能显示同一个颜色的HEX、RGB、HSL等多种格式。设计软件如Figma、Sketch也支持实时切换。关键在于理解这套原理之后，你在使用这些工具时能更准确地选择你想要的颜色，而不是碰运气。
配色实践
知道怎么转换只是第一步，更重要的是如何在实际项目中运用这些颜色。网页配色有几个基本原则值得参考。
一、确定主色调。在开始任何设计之前，先决定一个主色。这个颜色会用在logo、主要按钮、品牌元素上，通常选择能代表品牌气质的颜色——科技公司常用蓝或紫，食品品牌倾向橙或红，健康类偏向绿或青。主色确定后，其他颜色都围绕它来搭配。
二、建立色阶。一个完整的配色方案不止一个颜色，通常需要多个深浅不同的版本。比如主色是#3498DB，你可能还需要更浅的版本用于背景#EBF5FB，更深的版本用于悬停状态#2980B9。同色系的深浅变化能增加视觉层次，同时保持整体协调。
三、用对比色点缀。互补色或对比色能起到画龙点睛的作用。如果你的主色偏蓝，橙黄色作为点缀会非常醒目。但要注意对比色使用面积要小，通常用于警告提示、重要CTA按钮或者logo中，否则会让页面看起来杂乱。
好的配色不是堆砌颜色，而是用最少的颜色表达最清晰的意图。约束往往是创意的朋友。
常用工具推荐
网络上有很多优秀的免费配色工具，能帮你快速生成和管理配色方案。Adobe Color（color.adobe.com）支持从一张图片中提取配色方案，Coolors.co可以一键生成协调配色，Figma的内置插件Colordot则可以用键盘快速浏览颜色。yais.top也提供了在线的HEX与RGB转换工具，适合需要快速转换数值或者批量处理颜色代码的设计师使用。
在开发阶段，建议把常用颜色定义在CSS变量里。这样如果后期需要调整品牌色，只需要改一处定义就能全局生效，而不用在样式表中逐个搜索替换。这对于大型项目来说能省下大量时间。
相关阅读
- 百分比计算器：增长、折扣、比例的快速计算 - 数字处理的另一个实用工具
- 时区转换器：跨国沟通、会议的时间计算工具 - 时间换算在全球化协作中的重要性
- 探索更多在线工具 - 访问yais.top工具集