今天，我们将聚焦于各种项目的色彩工具和资源，从各种类型的调色板和生成器到为你的项目获得恰到好处的对比度和梯度。这个系列绝不是完整的，而是Smashing团队发现的一些有用的东西，希望能让你的日常工作更有成效和效率。
如果你对更多类似的工具感兴趣，请看一下我们可爱的电子邮件通讯，这样你就可以把类似的提示直接放到你的收件箱里了
CSS变量和HSLA
你通常如何在CSS中定义颜色？用HEX？RGBA？还是用HSLA？Maxime Heckel混合使用了HEX和RGBA，直到他发现了一个聪明的模式，帮助他清理了混乱的局面并减轻了他的代码库。基础。HSLA和CSS变量。
HSLA代表色相饱和度和亮度Alpha，是定义颜色所必需的四个主要成分。当你使用类似的颜色时，例如不同的蓝色，你会注意到它们有相同的色调和饱和度。使用Maxime的方法，你可以通过一个CSS变量来定义一部分色相和饱和度，并重新使用它来定义你的其他颜色值--比如说，从头开始建立一个色标。这是一个神奇的例子，说明了CSS的强大。
一个超快的色彩计划生成器
你需要创建一个调色板吗？一个方便的工具可以帮助你做到这一点--还有更多--就是Coolors。Coolors的核心是一个漂亮的调色板生成器。首先，它向你推荐一个随机的调色板，你可以通过玩色调来调整，或者，如果你愿意，可以通过引入新的颜色来完全改变它。
Coolors还可以让你从照片中挑选调色板，并创建拼贴、渐变和渐变调色板。对比度检查器为你计算文本和背景颜色的对比度，以确保你的颜色组合可以被接受。如果你只是需要一点灵感，也有成千上万的颜色主题等待你去探索--只要点击你喜欢的颜色，六角值就会被复制到你的剪贴板上。好好享受吧!
过于描述性的调色板
你是否考虑过将蜗牛式的软粉色与未密封的桃花心木和糟糕的西瓜结合起来，作为你下一个项目的色彩方案？好吧，一开始听起来可能有点奇怪，这就是colors.lol背后的概念，一个具有 "过度描述性的调色板 "的色彩灵感网站，正如其创建者Adam Fuhrer所描述的。
作为一种发现有趣的色彩组合的有趣方式，这些调色板是从Twitter机器人@colorschemez上手工挑选出来的。该程序随机生成颜色组合，并将每种颜色与超过2万个单词列表中的一个形容词相匹配。隐藏在这些不寻常的名字背后的当然是你可以立即使用的真实的十六进制颜色值--例如，在蜗牛节奏的软粉色和它的伙计们的情况下，#FDB0C0,#4A0100, 和#FD4659 。对颜色的一种有趣的看法。
单色调色板轻松搞定
如果你曾经试图生成一个一致的单色调色板，你知道这可能是一个无聊的任务。在他再次乱用无限的复制粘贴命令来创建一个漂亮的调色板之后，迪米特里斯-拉普蒂斯决定改变这种情况。他的解决方案。CopyPalette。
CopyPalette让你轻松地创建调色板。你所需要做的就是选择一个基础色，深浅的对比度，以及你想要的颜色变化的数量，然后这个工具会生成一个完美平衡的调色板，你可以复制并粘贴到你喜欢的设计工具中。一个真正的节省时间的工具。
数据可视化的色标
不同类型的数据可视化在颜色方面有不同的需求。例如，当你设计饼状图、分组条形图或地图时，选择一系列在视觉上等距的颜色可能是个好主意。这可以确保它们很容易被区分开来，并与关键部分进行比较。由Learn UI Design提供的数据选色器可以帮助你在你指定的两个端点颜色的基础上创建这种视觉上等距的调色板。
对于那些你想在你的可视化中显示单一变量的值，因而只需要基于一种颜色的色阶（深色的变化代表较高的值，中性的颜色代表接近零的值）的情况，有一个单一色阶生成器。
最后但并非最不重要的是，发散色对于可视化来说是最有用的，因为你要显示从一个极端经过中性中间到另一个极端的过渡（一个常见的例子是 "美国每个州的民主党/共和党情况 "的地图）。分歧色标生成器可以帮助你为这样的场合找到最佳的色标。一个强大的三重奏，将你的数据可视化提升到一个新的水平。
现实世界中的调色板灵感
有很多奇妙的网站可以帮助你找到鼓舞人心的调色板。然而，一旦你决定了一个你喜欢的调色板，最大的问题还是没有得到解决。你应该如何在你的设计中应用这些颜色？Happy Hues是来帮助你的。
Happy Hues为你提供调色板的灵感，同时作为一个现实世界的例子，说明如何在你的设计中使用这些颜色。只要改变调色板，Happy Hues网站就会改变其颜色，向你展示你喜欢的调色板在实际设计中的样子。聪明!
色调发生器
另一个处理颜色的有用工具是Vitaly Rtishchev和Vlad Shilov建立的颜色色调发生器。你可以输入一个十六进制值，该工具将向你展示一系列较浅和较深的色调。
要定制阴影系列，只需调整你想使原色变亮/变暗的百分比，并改变饱和度的变化。一旦你对结果感到满意，你可以一键复制一个颜色的十六进制值或整个调色板。
色彩的简单化
谈论颜色可能很棘手。一个人所说的紫色，对另一个人来说可能是桑葚。但他们实际上是指什么颜色？为了防止误解，Lyft的设计团队想出了他们自己的颜色系统，这对设计师和开发者来说很容易学习，同时也考虑到了可访问性。他们已经将其开源，所以你的团队也可以使用它。向ColorBox问好
谷歌，但对于颜色
你输入一个搜索词，就会看到一个链接列表。这就是搜索引擎通常的工作方式，对吗？Picular则不同。Picular不是搜索相关的网站，而是向您展示符合您搜索的颜色。例如，"夏天 "将返回不同色调的蓝色，以及一些沙黄色和棕色，还有少量的粉红色。每种颜色都标有它的十六进制值，所以如果你想在一个项目中使用它，只要点击它，它就会被复制到你的剪贴板上。
来自被遗忘时代的色彩灵感
那么，一些有点不同的色彩灵感呢？由布兰登-谢泼德（Brandon Shepherd）带来的《色彩跳跃》将带你穿越4000年的色彩历史。
从公元前2000年到20世纪60年代，该项目展示了来自12个不同时代的180个调色板，每一个都代表了当时的色彩语言。令人着迷!
创造无障碍的调色板
找到一种颜色的完美色调或阴影不仅是一个品味问题，也是一个可及性问题。毕竟，如果缺乏色彩对比，在最坏的情况下，一个产品甚至会让有视力障碍的人无法使用。一个非常详细的对比度检查器可以帮助你提前发现潜在的陷阱，它来自Gianluca Gini。Geenes。
这个工具可以让你调整色调范围和饱和度，并将调色板应用于三个可选择的UI模型中的一个。一旦应用，你可以触发不同类型的视力障碍，看看受影响的人是如何看待颜色的，最后，对你的调色板的最佳色调作出明智的决定。要立即使用这些颜色，只需复制和粘贴它们的代码或将它们导出到Sketch。
设计无障碍色彩系统
要确保不仅有视力障碍的人可以轻松地使用你的产品，而且其他人在低光环境中或使用旧屏幕时也可以轻松地使用你的产品，正确的色彩对比是一个重要的部分。然而，如果你曾经尝试过自己创建一个无障碍的颜色系统，你可能知道这可能是一个相当大的挑战。
Stripe的团队决定应对这一挑战，重新设计了他们现有的颜色系统。它应该提供的好处是：通过无障碍准则，使用清晰而充满活力的色调，用户可以很容易地相互区分，并且具有一致的视觉重量，不会出现一种颜色优先于其他颜色的情况。如果你想了解更多关于他们的方法，他们的博文会给你提供有价值的见解。
正确对待色彩管理
色彩管理是必不可少的，但是你所拥有的设置真的是对你的资产和你所设计的平台最好的设置吗？毕竟，你需要能够依赖你在屏幕上看到的东西。它不仅在选择颜色时至关重要，而且对于评估对比度和可读性也是如此。
为了帮助你改善你的色彩管理，_bjango_的团队总结了你需要知道的一切。你将学会选择最适合你需要的颜色空间，以及什么时候应该指定一个颜色配置文件与什么时候转换为一个颜色配置文件更好。作为奖励，文章还介绍了流行的设计程序，以及如何最大限度地利用它们的色彩管理选项。
CSS 梯度生成器和资源
CSS渐变是给你的设计带来新鲜感和友好感的快速方法。CSS Gradient是一个神奇的小工具，可以帮助你生成和实现线性和径向梯度。一旦你输入了你想在渐变中包含的颜色，你就可以在一个滑块上调整过渡的位置。CSS代码实时反映了这些变化，只需点击一下就可以复制到剪贴板上。
但是，网站不仅仅有梯度生成器，还有围绕梯度的有用内容：技术文章、来自真实项目的梯度例子、教程，以及像色调集、梯度色板和更多灵感的参考资料。全面了解渐变以及如何使用它们。
轻松创建CSS颜色梯度
手工挑选颜色来制作颜色渐变需要设计经验和对颜色和谐的良好理解。如果你需要一个背景或UI元素的渐变，但又没有足够的信心自己解决这个问题（或者你很匆忙），My Brand New Logo的朋友们创造的颜色渐变生成器可以帮助你。
在色彩渐变算法的支持下，该生成器可以根据你选择的颜色创建均衡的渐变。有四种不同风格的渐变，从微妙到珍珠母效果和强烈的深色渐变。你可以用滑块调整渐变，一旦你对结果满意，就可以复制粘贴生成的CSS代码，在你的项目中使用它。很好!
易于使用的CSS梯度
另一个方便的工具是Gradient Magic，它消除了麻烦，使使用梯度成为一个简单的复制和粘贴行为，这是一个独特的CSS梯度库，包括从标准梯度到角度、条纹、格子和爆裂梯度等各种梯度。为了找到你的最爱，你可以按风格和颜色来浏览这个库。对任何工具箱来说都是一个很好的补充
实现更漂亮的梯度的方法
渐变的结果往往不像你希望的那样平滑。问题是边缘太硬，特别是在渐变的起点和终点。为了帮助你迎合更漂亮的结果，Andreas Larsen建立了一个小小的Sketch插件。Easing Gradient。
这个插件让你的渐变尽可能的不可见，这样它们就不会干扰你放在上面的文本或用户界面。你可以用Sketch Runner安装这个插件，或者通过GitHub下载这个软件包。顺便说一下，还有一个PostCSS插件可以做同样的事情，以及一个手工编码的解决方案。
探索CSS梯度背后的力量
Shapy。隐藏在可爱的名字背后的是一个强大的工具：一个由Victoria Bergquist创造的渐变形状编辑器。Shapy让你发现和探索CSS梯度的力量，通过在单个div 标签上分层和移动梯度来创建形状和图像。只需使用滑块来定制画布大小、渐变类型、色块和盒子的细节，一旦你对预览中的内容感到满意，你就可以通过点击来复制CSS。很方便!
使用React的彩虹梯度
Josh Comeau喜欢创造性的实验。在他可爱的个人博客上，他有带音效的手风琴、华丽的纸屑模式、出乎意料的友好弹出式窗口，以及许多其他东西。另外，还有一系列精彩的教程，用于用React做各种不寻常的效果。
例如，Josh分享了他如何用CSS Houdini和React Hooks创建神奇的彩虹梯度（见GitHub repo）。一个美妙的小教程，让你的网站或应用程序闪闪发光。从字面上看。
只需点击几下就能生成彩色背景
一个很酷的背景图可以吸引人们对博客文章的注意，增强你的社交媒体资料，或者简单地使你的手机主屏幕焕然一新。为了使创建抽象和多彩的背景变得轻而易举，Moe Amaya的项目Cool Backgrounds现在将最好的JavaScript背景生成器集中在一个地方。
高对比度模式的快速提示
为不同的显示模式进行设计会带来一些不可预见的惊喜。特别是Windows高对比度模式的行为与其他操作系统的显示模式不同，它完全用用户设置的颜色覆盖了自动编写的颜色。幸运的是，对于大多数高对比度模式的问题，往往有简单的解决方案。
在她的文章《高对比度模式的快速提示》中，Sarah Higley分享了解决高对比度模式错误的五个提示。它们包括自定义焦点样式、处理SVG、使用-ms-high-contrast 媒体查询来尊重用户的颜色选择，以及测试时应该注意的事项。一个方便的小指南。如果你想更深入地了解这个话题，Sarah还收集了一些进一步的阅读资源。
按钮对比度检查器
你的按钮有足够的对比度吗？由Aditus的人建立的按钮对比度检查器可以帮助你找到答案。输入你的域名，该工具会测试网站上的按钮是否符合WCAG 2.1标准。
为了迎合现实的结果，该检查器不仅测试按钮的默认状态，而且还考虑到悬停和聚焦状态以及相邻的背景。一个不错的细节。每次你扫描一个页面时，结果都会存储在一个独特的URL中，你可以与你的团队分享。一个珍贵的小帮手。
黑暗模式开关教程
深色/浅色模式开关是一个不错的功能。但你如何真正实现它呢？Sebastiano Guerriero带你完成必要的步骤。他的方法显示了如何为你的项目创建一个黑暗主题，然后使用CSS自定义属性，当一个特定的数据属性或类被添加到主体元素时，从默认的光明主题切换到它。
收尾工作
外面有成百上千的与颜色有关的资源，我们希望这里列出的一些资源能在你的日常工作中证明是有用的--最重要的是帮助你避免一些耗时的常规任务。
祝大家收藏愉快!
