颜色工具
Convert colors between HEX, RGB and HSL with a live preview — the quick way to grab the exact value you need for CSS and design.
关于 颜色工具
颜色工具解决一个小而持续的问题：你手上的值不是你需要的格式。品牌规范给你一个十六进制码，设计文件报告 RGB，一个 CSS 变量想要 HSL，而夹在中间的你不得不转换。本类别正好有四个工具应对这一点——HEX 转 RGB 转换器（用于最常见的那种转换）、更全面的颜色转换器（用于在各格式间切换）、用于无障碍的颜色对比度检测，以及用于构建调色板的颜色渐变生成器。它们面向前端开发者、设计师，以及任何在拼一份样式表或幻灯片的人。
在它们之间选择很简单。如果你有一个值、需要另一个，当方向正好是那样时用HEX 转 RGB，而当你要反向转换或需要 HSL 时用通用的颜色转换器。HSL 值得在这里学一学，因为它是让颜色易于推理的格式：色相告诉你这是哪种颜色，而单独调整明度就能得到一组一致的浅色和深色。当你需要的是一整个范围而非单个值——一个悬停态、一个禁用态、一个安静地衬在文字后面的背景——颜色渐变生成器一步就能搞定。而在你交付任何文字与背景的搭配之前，先用颜色对比度检测跑一遍，它会测量对比度，让你判断你的组合是舒适可读，还是仅仅在技术上可见。
这四个工具都免费、无需账户，并完全在你的浏览器中运行——你的颜色值永远不会被上传，实时预览随你输入而更新，而非在往返服务器之后。这使它们足够快，可以在你工作时当草稿本用：微调一个值、看着色块、复制结果。如果你是在构建 CSS 而非挑选颜色值，CSS 生成器类别有渐变构建器和阴影构建器，能产出可直接复制的代码，而生成器类别里有一个随机颜色生成器，供你在只需要一个起点时使用。
常见问题
我应该以什么对比度为目标？
广泛使用的 WCAG 指南要求正文文字的对比度至少为 4.5 比 1，大号文字为 3 比 1，而最高级别更严格，为 7 比 1。对比度检测会显示比值，让你对照适用于你项目的标准来判断。
HEX、RGB 和 HSL 可以互换吗？
对于普通的不透明颜色，可以。HEX 和 RGB 用不同记法描述同一个值，HSL 也映射到相同的 sRGB 颜色。转成 HSL 再转回来时的取整可能让一个值偏移一两个点，这在实践中不可见，但可能让两个码看起来略有不同。
这些工具支持透明度吗？
透明度通过 RGBA、HSLA 和八位十六进制这类格式来表达。请记住，半透明颜色的对比度取决于它背后的任何东西，所以要检查最终混合后的颜色，而非透明的那个。
我的颜色数据会存储在任何地方吗？
不会。这四个工具都在你的浏览器中运行，所以你输入的任何内容都不会被上传、保存或记录。它们免费使用，无需账户。