颜色知识

颜色知识内容

这里集中整理 RGB、HEX、网页配色、对比度和 CSS 渐变等解释型内容,适合先理解规则,再回到工具页做实际转换和校对。

这部分内容解决什么问题

工具页负责直接算结果,知识页负责解释为什么这样算、什么时候该这样用。

  • 帮助理解 RGB、HEX、RGBA、对比度和渐变等常见概念。
  • 承接“是什么”“怎么选”“有什么区别”这类解释型搜索词。
  • 把知识内容和真实工具页打通,减少只会复制颜色值但不会判断场景的问题。

建议怎么阅读

如果你是刚开始搭颜色体系,优先从基础概念、配色方法和可读性规则三条线入手。

  1. 先看 `什么是 RGB` 和 `什么是 HEX 颜色`,建立基础概念。
  2. 再看 `网页配色怎么选`,把单个颜色升级成整套层级方案。
  3. 最后看对比度和渐变文章,解决可读性和视觉表现问题。

首批颜色知识文章

首批先覆盖最常见的 5 类问题,后续会继续扩展。

4 分钟

什么是 RGB

解释 RGB 的含义、0-255 三通道规则,以及网页开发里为什么经常会看到 RGB、RGBA 和 HEX。

阅读文章

4 分钟

什么是 HEX 颜色

说明 HEX 颜色值的组成规则、3 位 / 6 位 / 8 位写法,以及它和 RGB、RGBA 的关系。

阅读文章

5 分钟

网页配色怎么选

从品牌主色、中性色、强调色和可读性四个角度,梳理网页配色的实用选择方法。

阅读文章

5 分钟

AA / AAA 对比度是什么意思

用更容易理解的方式解释 WCAG 对比度等级、通过标准,以及正文、按钮、标签该怎么判断是否可读。

阅读文章

4 分钟

linear-gradient 和 radial-gradient 的区别

比较线性渐变和径向渐变在方向、焦点、背景尺寸和适用场景上的差异。

阅读文章

搭配使用的核心工具

读完文章后,可以直接回到这些高频颜色工具做实际操作。

颜色工具可使用

RGB 转 HEX

输入 RGB 数值,实时输出 16 进制颜色值、CSS 写法和常见用途。

查看页面
颜色工具可使用

HEX 转 RGB

输入十六进制颜色值,实时解析为 RGB 数值,并生成可直接使用的 CSS 代码。

查看页面
颜色工具可使用

品牌色板生成器

输入品牌主色后自动生成 50-900 色板层级、CSS 变量和设计系统常用 token。

查看页面
颜色工具可使用

对比度检测

检测前景色与背景色的可读性,输出 WCAG 对比度结果。

查看页面
颜色工具可使用

渐变生成器

交互式生成线性与径向渐变,适合网页和海报背景。

查看页面
颜色工具可使用

色轮工具

基于主色生成互补色、邻近色、三角色等配色方案,实时输出 HEX、HSL 和 CSS 变量。

查看页面