如何从一种颜色构建调色板:和谐规则、十六进制代码和对比度

大多数调色板都是从某人已经喜欢的一种颜色开始的:品牌蓝色、标志绿色、婚礼布料样本。困难的部分是首选之后的一切。哪些颜色随之而来,您需要多少颜色,以及为什么设计工具中看起来平衡的套装一旦文本位于其顶部就会散架?

Color harmony在色轮上用简单的几何形状回答前两个问题,对比回答第三个,而且是人们跳过的一个,本指南涵盖了两者,带有您可以检查的真实HEX值,并展示了如何免费 调色板生成器 将一种基本颜色变成六种调色板。

TL;博士: 调色板生成器以固定角度(互补角为 180 度,三元角为 120 度,四元角为 90 度,类似角为 30 度和 60 度)围绕 HSL 色轮旋转基色's 色调,或移动其亮度以制作色调、色调和单色集。Toolz 色调生成器执行此客户端、免费、无注册:选择基色、从六种模式中选择一种、单击样本复制其 HEX 代码或将整个集合复制为 CSS 自定义属性。HSL 在感知上不均匀,因此请在发货前根据 WCAG 对比度检查任何文本和背景对。

什么是调色板生成器?

色调生成器是一种工具,它采用一种起始颜色,并使用固定的规则从中计算相关颜色,因此该集合看起来协调一致,没有反复试验。规则来自色轮:颜色彼此相对,颜色彼此相邻混合,颜色围绕轮平衡均匀间隔。

Toolz生成器工作在HSL,它描述了一种颜色,色调,饱和度和轻度色调是围绕轮子从0到360度的角度(红色在0,绿色在120,蓝色在240)饱和度是多么生动的颜色,从0%的灰色到100%的全色轻度从0%的黑色到100%的白色HSL是为网络定义的在 CSS 颜色模块 4 级 specification,并且每个浏览器都会将其转换为相同的 RGB 值。

HSL中工作,使和谐规则易于表达,互补的颜色是相同的饱和度和轻度,色调中添加了180,那是一个添加,而不是大量摆弄RGB滑块。

6种和声模式是什么?

每个模式都是远离基本颜色的秘诀。以下是 Toolz 生成器在每个模式中所做的事情,取自其源代码。

模式	么改变	拍子	色调位置
阴影和放大器;色调	仅亮度,设置为 90、75、60,基值 35、22 和 12	7	底色调
单色	轻度和饱和度在一起	5锛屽湪娴欐睙鏉	底色调
互补	色调翻转 180 度,底座更浅,补色更深	4锛屽湪娴欐睙鏉	基地,基地+180
类似	色调单程 30 度	5锛屽湪娴欐睙鏉	-60, -30, 底座, +30, +60
三元	色调将圆圈的三分之一间隔开	3	底座,+120,+240
四分	色相间隔了四分之一的圆圈	4锛屽湪娴欐睙鏉	底座,+90,+180,+270

2个细节在实践中很重要,类比、三元和四元在每个样本上都保持基色's的饱和度和亮度,因此它们只会改变色调。色调&色调和单色保持色调并改变亮度,因此它们会产生一种颜色的明暗版本。

一个有效的示例:#4466ee 的每个模式

生成器以 #4466ee 开头,中蓝色。转换为 HSL 为色调 228,饱和度 83%,亮度 60%。以下是每个模式为该底座返回的内容。这些是工具打印的 HEX 代码,您可以使用 CSS 规范中的标准 HSL 到 RGB 转换来重现它们。

三元 将 120 和 240 添加到色调中:228,然后是 348,然后是 108(468 包裹到 108)。

#4466ee  hsl(228, 83%, 60%)  blue
#ee4466  hsl(348, 83%, 60%)  pink-red
#66ee44  hsl(108, 83%, 60%)  green

注意图案。在相同的饱和度和亮度下,旋转三分之一的车轮会重新洗牌相同的三个 RGB 通道值:44、66 和 ee 交易名额。

互补 adds 180,落在色调48,一个暖黄色,模式还包括一个较轻版本的底座和一个较暗版本的补码,所以你得到了四个样本:#8aa0f4,#4466ee,#eecc44和#d2ac14。

类似 168到288一次30度步进:#44eeecc,#44bbee,#4466ee,#7744ee,#cc44ee它读作一条从青色到蓝色到紫色的带子。

四分 添加 90、180 和 270:#4466ee、#ee44bb、#eecc44、#44ee77。

单色 保持色调 228 并用饱和度换取双向的亮度:#c4cded、#879ae8、#4466ee、#0936ec、#0225b1。

阴影和放大器;色调 将亮度设置为 90、75、60、基值 35、22 和 12:#d0d9fb、#8aa0f4、#4466ee、#4466ee、#0f2da3、#0a1c67、#050f38。

Last one 显示一个值得知道的怪癖,遮光刻度使用固定的亮度步数加上底座's 自己的亮度,当底座恰好坐落在恰好 90,75,60,35,22 或 12 百分的亮度时,就像 #4466ee 在 60 时所做的那样,两个样本出来相同,如果您想要七种不同的颜色,则将底座亮度轻推一步。

如何为工作选择合适的和谐?

Dui设计需求的对比度来挑和气,低对比方案感觉平静,You易保持一致;高对比方案引起注意,容易过度。

目标	良好的起始模式	为什么
UI色标(100至700)	阴影和放大器;色调	一种色调、可预测的从光到暗的步骤
一个极简、有凝聚力的品牌	单色	一切都很相似,没有什么冲突
一项引人注目的号召性用语	互补	相反的色调是最强烈的对比
柔和、自然的外观	类似	邻近的色调融合在一起
一个有趣、平衡的集合	三元	三种均匀间隔的色调,没有占主导地位
包含多个系列的图表	四分	仍然相关的四种不同色调

布局的常见经验法则是让一种颜色覆盖大部分区域,让第二种颜色占用较小的份额,并且少量出现重音。它与互补和三元调色板配合良好,赋予所有颜色相等的空间往往看起来很大声。

为什么调色板看起来平衡但读起来很糟糕?

HSL中调色板看起来平衡,在屏幕上仍然失败,因为HSL亮度不是一个颜色看起来像一个人那么亮,HSL将60%亮度的每种色调视为同等的亮度,人类的视觉则不然。

上面的补充示例使这一点具体化。 #4466ee 和 #eecc44 的 HSL 亮度均为 60%。它们的相对亮度(Web 内容无障碍指南对感知亮度使用的测量值)有很大不同:蓝色约为 0.17,黄色约为 0.62。黄色的亮度是眼睛的数倍。

That gap 显示为对比度, 使用 WCAG 公式, 对比度=(L1 + 0.05)/(L2 + 0.05), 其中 L1 是较浅的颜色's 亮度:

对	对比	正常文本的 WCAG AA (4.5:1)
#4466ee 上的白字	4.77:1左右的時間	通行证
#eecc44 上的白字	1.57:1左右的時間	失败
#eecc44 上的黑色文本	13.4:1左右的時間	通行证

Generator本身已经对此做出反应:每个样本从亮度估计中挑选深色或白色的标签文本,这就是为什么黄色样本会得到深色标签。对于真实的设计,通过a运行您计划使用的文本和背景对 颜色对比度检查器.门槛来自 WCAG 2.2:普通文本为 4.5:1,AA 级大文本为 3:1。 颜色对比度指南 逐步走过亮度数学。

如何将调色板导出为 CSS 变量?

单击"复制 CSS",生成器将当前调色板作为 CSS 自定义属性放在剪贴板上 :root.名称按样条顺序按 100 步进行编号,对于三元例:

:root {
  --color-100: #4466ee;
  --color-200: #ee4466;
  --color-300: #66ee44;
}

将其粘贴在样式表的顶部并在任何地方引用颜色:

.button-primary {
  background: var(--color-100);
  color: #ffffff;
}

编号遵循样本顺序,而不是亮度。在 Shades & 色调模式中,恰好从亮到暗运行,因此 --color-100 是最轻的色调,在三元或类比模式下,数字只是位置。将变量重命名为有意义的东西,例如 --brand、 --accent 並 --surface 一旦你选择了,因为 --color-200 CSS的下一个人来说毫无意义。

要复制单一颜色,请单击其样本。 HEX 代码转到剪贴板,样本显示 "复制"片刻。

你能用它制作婚礼或粉彩调色板吗?

Shi,只要带起始色,没有婚礼预设,没有策划的题材,Suo以调色板只和你选择的底座一样好。

婚礼,从真实的东西中取出颜色:鲜花、邀请卡库存、伴娘礼服面料。输入它的 HEX 代码并尝试每种模式。从鼠尾草绿色开始,#9caf88,补充返回#c2ceb6,#9caf88,一朵灰尘的薰衣草#9b88af和更深的#755e8d。那朵薰衣草对抗鼠尾草是经典的配对,数学一键找到了。

Pastels来说,从一个苍白的、柔和饱和的底座如#a7c7e7开始,类比、三元和四元在每个样本上都保持着那个轻盈和饱和度,所以整套保持柔和的色调&色调和单色故意移动轻盈,所以他们添加了深色,对于那个蓝色,降到#0d1f30,没有单独的轻盈滑块;底色是控制。

屏幕颜色和印刷颜色不同。显示器混合红、绿和蓝光,而打印机在纸上放置青色、品红色、黄色和黑色墨水,一些明亮的屏幕颜色没有精确的墨水等效物。如果调色板要涂在文具上,请在完全运行之前订购印刷校样。

常见的错误和错误案例有哪些?

大多数调色板问题来自输入或太相信数学。

键入时调色板会变成蓝色。 在文本框包含有效的 HEX 代码之前,生成器会回落到 #4466ee。半类型值,例如 #9c 或 #9caf8 显示默认的蓝色调色板。该字段接受三到六个十六进制数字,带或不带 #如此 #9ca 在前往的路上 #9caf88 简要显示 #99ccaa 的调色板。

基础样本距离一步之遥。 Colors 在转换回之前四舍五入到整个 HSL 数字,因此有些 base 不会精确地往返。#c08081,例如,以 #c18182 返回。差异是每个通道一个单位,不可见,但如果您完全匹配品牌代码,则很重要:保留官方 HEX 作为 base,其余使用生成的 HEX。

到处使用每种颜色。 五色类似调色板是一个可供选择的系列,而不是所有都需要工作的五种颜色。

跳过对比度。 如上所示,相同 HSL 亮度下的两种颜色亮度可以相差三倍以上。检查文本对。

期望感知均匀性。 Shade steps 甚至在 HSL 亮度上,而不是在它们看起来如何的光线上,如果您需要一个看起来均匀的刻度,请通过眼睛调整单个步骤或在 OKLCH 等感知空间中工作,CSS Color 4 也定义了这一点。

与其他彩色工具相比,这是如何比较的?

Palette生成是较长工作流程中的一步,表格显示每个步骤适合哪个工具。

任务	工具	它给你什么
查找或采样起始颜色	颜色选择器	HEX、RGB 和 HSL 适用于任何颜色
构建协调集	调色板生成器	六种和谐模式,CSS导出
制作一种颜色的细粒度	色调生成器	专用的色调和阴影坡道
混合两种颜色	调色剂	两个输入之间的中间颜色
检查文本可读性	颜色对比度检查器	WCAG比率,并通过或失败

如果规模比和谐更重要,那么 生成色调和色调的指南 50到900个坡道上更深入。每一个颜色工具都列在上面 彩色工具中心。

生成器是私有的并且离线工作吗?

是的。所有 HSL 数学和渲染都使用 JavaScript 在浏览器中运行。您输入的任何内容都不会上传,并且在页面加载后 调色板生成器 不断工作,无需网络连接复制样本或 CSS 计入每日使用限制,该限制记录您所处的模式,而不是您的颜色。