们在做网页时，经常会用到十六进制颜色代码，一个漂亮的网页，它的颜色搭配必定有讲究，下表是一些常用的颜色及十六进制颜色代码对照，记录在此，以便查阅！

CSSDA 工作人员整理

网页设计中的颜色趋势来来去去，但是好的色彩工具呢？我们认为是时候在网络上四处走动，并检查设计师色彩工具世界的运行状态了。结果呢？事实证明，有一些非常酷的新方法来体验颜色，你可能想看看。在本综述中，我们汇总了目前可用的最佳色彩工具以及一些有史以来的经典。

• 1. 冰雹像素

  Hailpixel提供了一种精美简单的方法来查找颜色值并探索光谱。移动鼠标以浏览或使用箭头键和滚动。Hailpixel由Devin Hunt设计，Devin Hunt是一位设计师和企业家，专注于设计，技术和创业的交叉点。

• 2. Adobe Color CC

  从最简单的颜色工具到最全面的颜色工具之一，Adobe的Color CC（以前称为Kuler）允许您浏览数千种配色方案，使用色轮创建自己的配色方案并与社区共享。

• 3. 材料调色板

  一个材料设计调色板生成器，允许您选择自己喜欢的颜色，并生成和下载您的材料设计调色板。

• 4. 0到255

  假设您是一个经常使用颜色的网页设计师，您需要在悬停状态下使链接变亮或使按钮的边框变暗。根据创作者肖恩·查普曼（Shaun Chapman）的说法，0to255是适合您的工具。当然，对于基本颜色，您可能会依赖内存来存储十六进制代码，但是使用0to255，您可以选择要开始的颜色，并使用针对网页设计优化的间隔接收从黑色到白色的一系列颜色。然后，只需单击要使用的变体，十六进制代码就会自动复制到剪贴板。

• 5. 147色

  有时，掌握基础知识会有所帮助。147种颜色是Brian Maier的心血结晶，旨在帮助网页设计师和开发人员学习HTML和CSS颜色规范中定义的147种颜色。147 种颜色由 17 种标准色和 130 种颜色组成。该值是颜色的名称，而不是十六进制值或 RGB 值。单击所有颜色的网格，单击小刷新图标以全屏获取新颜色。

• 6. 快门光谱

  Shutterstock Spectrum 根据您在屏幕顶部滑块中选择的颜色显示大小适中的图像，非常方便获得一些横向灵感。您可以添加关键字以提高主题的准确性，并按亮度和平衡过滤图像。

• 7. 冷却器

  要使用Coolors，只需点击空格键即可生成配色方案，然后单击颜色以获取组合。一些漂亮的调整工具和易于访问的撤消和导出按钮使冷却器使用起来轻而易举。由Web/app设计师和开发人员Fabrizio Bianchi创建。

• 8. 科尔德

  Colrd允许您通过调色板，渐变，图案和图像创建和共享颜色灵感。Colrd呈现精美且易于使用，由一组色彩科学家为您带来，他们专注于寻找在网络上体验色彩的新方法。

• 9. 帕莱顿

  Paletton似乎永远存在（以一种好的方式），但实际上是在2002年推出的。Paletton与其他颜色生成器（如上面提到的Adobe的Color CC）共享一些功能，但是您也可以从配色方案中选择颜色，并有效地“挖掘”以找到新的颜色可能性。

• 10. 彩色齐拉

  ColorZilla于2004年推出，是Firefox和Chrome的扩展，具有先进的吸管，颜色选择器，颜色分析器和其他好东西，而Ultimate Gradient Generator则提供了一个类似Photoshop的在线CSS渐变编辑器以及图像到CSS转换器等。

• 11. 方格米色

  Checkmycolors 是一种工具，用于检查所有 DOM 元素的前景色和背景色组合，并确定当遇到颜色缺陷的人查看时，它们是否提供足够的对比度。

• 12. hexu.al

  Hexu.al 以单词的形式呈现十六进制值及其含义。嗯？例如，十六进制值#abaca5变成了单词abacas，顺便说一句，这显然是来自菲律宾的大型植物。由Zach Wolf设计和开发。

• 13. 设计种子

  如果你有一个需要柔和的大地色调的项目，Design Seeds值得一游。Design Seeds庆祝自然界中发现的颜色，于2009年推出，因此它有很多灵感。

• 14. 色氨酸盐

  Colorotate也可作为iPad应用程序使用，是一款主要用于创建调色板的工具，此外，您还可以浏览现有调色板，然后添加，混合和共享。Colorotate与其他类似产品的不同之处在于3D风格的色轮，并允许在调色板中使用五种以上颜色。

• 15. 颜色六

  ColorHexa 提供有关任何颜色的信息。只需在搜索字段中键入颜色值，ColorHexa就会提供详细的描述，并自动将其转换为十六进制，二进制，RGB，CMYK，HSL，HSV，CIE-Lab，Hunter-Lab，CIE-Luv，CIE-LCH，XYZ和xyY的等效值。ColorHexa还将生成匹配的配色方案，例如互补，拆分互补，类似，三色，四色和单色颜色。

• 16. 科洛尔菲

  没有COLOURlovers，任何颜色工具综述都是不完整的，COLOURlovers是您应该已经了解的经典资源。用户创建的超过800万种颜色，370万调色板和470万种图案，您很可能会找到有用的东西。毕竟，Twitter上超过150万粉丝不会错;)

• 17. 对比度-A

  Contrast-A是另一个“老古董但好东西”，由Annika Hamann（DasPlankton）于2009年1月创建。这个有趣的工具允许用户试验颜色组合，根据辅助功能指南检查它们并创建自定义调色板。Contrast-A 检查颜色组合的对比度是否可接受，并根据 WCAG 2.0（亮度比）以及较旧的辅助功能指南显示结果。

• 18. 拾色器

  不喜欢复杂的工具？不用担心，拾色器可能只是你的东西。只需单击表单字段即可激活色轮，或者只需输入所需的十六进制值，拾色器就会提取免费颜色，三元组颜色和四元颜色。如果你想要一些无意识的娱乐，那么点击随机按钮，重复，重复，重复，重复;)

这在我们为设计师寻找最佳色彩工具时结束。我们希望您找到一些感兴趣的东西，并记得分享它们，以帮助创作者对创建这些有用的工具并免费提供它们感到一些爱。

编辑：尘渊文化

头条创作挑战赛#

颜色对于 css 来说是非常重要的，网站之所以会呈现出五彩斑斓的样式，就是这些颜色样式起的作用。在 css 中，对于颜色样式有很多种表达方式，今天我们就来盘点下 css 中颜色的格式。

名字颜色

在 css 中，默认定义了很多名字颜色，比较常见的比如 yellow，blue，red，pink 等，实际上，css 中一共定义了 140 个颜色名字，这些名字你都可以直接拿来使用。虽然 140 种看起来很多，但是实际上它比 8bit 的颜色还要少，因此，平时我们很少使用它。

RGB

这是一种颜色格式，从名字我们就知道它是 red，green，blue 三种颜色的简写，我们都知道三原色原理，也就是通过三种基本颜色，我们就可以组合出其它的颜色出来，因此，rgb 就可以表示出我们可以看到的各种颜色。

在 css 中，red，green，blue 被称作三通道，每个通道的值是从 0-255，通过混合这些通道颜色，我们就可以创造出 1600 多万种颜色。需要注意的是 rgb(255,255,255,0.5) 允许我们有第四个参数，它的值从 0-1，用来表示透明度。

.translucent-box {
  background: rgb(255 0 0 / 0.5);
}

Hex Codes

通过十六进制数字来表示颜色代码，6 位数字被分成了三组，每两位一组，一位是 16，两位就是 16*16=256，所以它其实和 RGB 基本是相同的，只不过它是用 16 进制进行表示。

它的三组也是代表着 red，green，blue，和 RGB 一样的是，它也可以指定透明度，也就是说我们可以使用 8 位十六进制来表示颜色。

.translucent-box {
  background: #ffff0080;
}

HSL

和 RGB 不同的是，HSL 是通过指定色调，饱和度，亮度来表示颜色的。

在 HSL 中，我们的色调是在 0deg-360deg 之间，转一圈的大致颜色范围就是红橙黄绿青蓝紫，饱和度是在 0-100%之间，亮度是在 0%-100%之间。

HSL 是可以和 RGB 进行转换的，其中色调的转换公式比较复杂。

.translucent-box {
  background-color: hsl(0deg 100% 2%);
}

P3

P3 是一个在继承 sRGB 色彩空间范围之外，又提供了更亮更充满活力的色彩范围，也就是说 P3 表示的色彩范围要更大。

因此，使用 P3 的时候，需要使用特殊的属性值 color 形式来表示，但是对于 color 这个属性，目前只有 safari 支持。

.translucent-box {
  background: color(display-p3 1 0 0);
}

LCH

因为 HSL 对于不同颜色在表示亮度的时候给人的感觉是不同的，因此，人们发明了 LCH 用来更接近人眼感知的色彩表示方式。

LCH 代表 “亮度色相”。“色度”或多或少是“饱和度”的同义词。它在概念上与 HSL 非常相似，但有两个很大的区别：

• 如前所述，它优先考虑人类的感知，因此具有相同“亮度”值的两种颜色将感觉同样轻。
• 它不绑定到任何特定的颜色空间。

与我们看到的其他颜色格式不同，LCH 不受 sRGB 的约束。它甚至没有绑定到 P3！它通过对色度没有上限来实现这一点。

在 HSL 中，饱和度范围从 0%（无饱和）到 100%（完全饱和）。这是可能的，因为我们知道我们正在谈论 sRGB 色彩空间，一个有限的调色板。

但是 LCH 与特定的色彩空间无关，因此我们不知道饱和上限在哪里。它不是一成不变的：随着显示技术的不断改进，我们可以期待显示器达到越来越宽的色域。LCH 将自动能够通过调高色度来引用这些扩展的颜色。谈论面向未来！

.translucent-box {
  background: lch(50% 120 20);
}

总结

CSS 是一种令人惊讶的难以掌握的语言。无论花了多少年练习，总会觉得有很多我不知道的东西。

就目前而言，在 LCH 没有被完全支持的情况下，HSL 也许更加适合表达。

所以说很多时候，当我们以为自己已经很熟悉或者掌握一门语言的时候，其实可能我们才仅仅是刚入门而已，任何知识当我们深入研究的时候我们都会发现我们对它的了解其实并不是真的很透彻。