昨晚改bug改到凌晨三点，眼睛都快瞎了。客户非说那个按钮颜色不对，说是“不够高级”，我盯着屏幕看了半天，觉得挺正常的啊。最后发现是RGB和HEX转换的时候小数点没对齐，气死个人。
做网页设计的，天天跟颜色打交道。很多人一上来就问，这个红色是多少？那个蓝色是多少？别去翻那些厚厚的色卡书了，没用。咱们直接上干货，讲讲怎么快速搞定html网页设计颜色代码。
第一步，别瞎猜。
很多人喜欢凭感觉调颜色，调来调去调不出那个味儿。其实最稳妥的办法是找参考图。比如你想做一个类似Instagram那种渐变背景，别自己在那调参数。直接去Pinterest或者Behance找类似的图。
第二步，取色工具得趁手。
我平时主要用两个工具。一个是浏览器自带的开发者工具，另一个是Mac自带的截图取色。
用浏览器的时候，右键点击你想改色的元素，选“检查”。在Styles面板里，你会看到background-color: rgb(...)。这时候，鼠标点在那个颜色块上，通常会弹出一个取色器。如果你用的是Chrome或者Edge，直接点击那个小方块，就能把HEX值复制下来。
这里有个小坑，有时候你复制的是rgba，带透明度的。如果你只需要纯色，记得把透明度拉满，或者手动去掉后面的alpha值。比如rgba(255, 0, 0, 1) 其实就是 #ff0000。
第三步，学会用HEX值。
为什么推荐用HEX？因为短啊。#000 比 rgb(0,0,0) 省多了。而且现在CSS3支持更丰富的颜色格式，但HEX依然是兼容性最好的。
比如你想用那种很火的莫兰迪色系，别去记那些复杂的数字。你可以先在PS或者Figma里调好，然后直接复制HEX代码。粘贴到你的css文件里，比如：
.btn {
background-color: #6b705c;
color: #fff;
}
这样写，html网页设计颜色代码 就搞定了。简单粗暴。
第四步，注意对比度。
这是很多新手容易忽略的。颜色选得再好看，如果字看不清，也是白搭。特别是做移动端网页的时候，屏幕小，光线复杂。
你可以用WebAIM的Contrast Checker这个网站，输入你的背景色和文字色，它会告诉你是否符合WCAG标准。如果不符合，赶紧调。别为了追求所谓的“高级灰”把字弄得看不清，用户体验第一。
第五步，建立自己的颜色库。
我电脑里有个txt文件，专门记常用的颜色代码。比如：
主色调：#333333（深灰，比纯黑柔和）
辅助色：#f4f4f4（浅灰背景）
强调色：#ff6b6b（这种珊瑚红很吸睛，适合按钮）
每次新项目开始，先从这个库里挑几个基础色。这样整体风格不会乱。
有时候，客户说“再鲜艳点”，你就把HEX值的饱和度调高。比如#ff6b6b改成#ff4444。肉眼看着变化不大，但代码里改个数字就行。
最后说句心里话，别太纠结于完美的颜色。网页设计是动态的，在不同屏幕上显示效果不一样。iPhone的屏幕和安卓的屏幕，颜色还原度都有差异。所以，html网页设计颜色代码 只是工具，重要的是整体布局和内容。
别总想着一步到位。先做个大概，然后慢慢调。改着改着，你就知道哪种颜色最耐看。
对了，还有个小技巧。如果你用VS Code，装个Color Highlight插件。写代码的时候，背景色块会直接显示在代码旁边，不用去预览页面看效果，省事儿。
今天就说这么多，我去补觉了。希望这些能帮到你，别再用那些过时的颜色了，赶紧换成HEX吧。
