1个我出货的设计系统都从单一品牌颜色开始,然后马上又需要十几个,一个蓝色永远不够,悬停状态需要浅蓝色,选行背景需要浅得多蓝色,浅色表面上坐着的文字需要深蓝色,禁用按钮不应该喊叫的静音蓝色,当我为[toolz。dev]构建界面时(/,我不断打开一个颜色选择器,轻推轻推滑块,观察结果是否仍然像同一个家庭,并将十六进制代码一次粘贴到我的样式表中,它起作用了,但速度很慢,结果不一致,因为"轻推直到看起来正确"不是一个可重复的过程。
所以我建造了 色调生成器。你给它一种颜色,它给你三个完整的尺度,在颜色空间中计算 CSS 颜色模块 4 级 定(而不是通过推动六角形数字):色调走向白色,色调走向黑色,色调走向灰色本指南解释了这三个单词的实际含义,数学是如何工作的,以及如何将单个品牌颜色变成一个连贯的调色板,您可以直接放入CSS中。
TL;博士: A tint是你的颜色与白色混合,一个色调是你的颜色与黑色混合,一个色调是你的颜色与灰色混合,每个都保持原来的色调,只改变颜色看起来明暗或静音的程度,粘贴一个HEX,RGB或HSL值,选择你想要的步骤,生成器一次构建所有三个尺度,每个swatch可复制为HEX,RGB或HSL。一切都在你的浏览器中运行。
色调、色调和色调有什么区别?
这三个词来自传统的色彩理论,它们描述了三种不同的改变颜色的方式,而不会从根本上改变它是哪种颜色。这种区别值得正确对待,因为设计师和越来越多的设计代币精确地使用这些词。
调(tint)是混合白色的颜色,加入白色提升了轻盈感,使颜色柔和,粉红色是红色调,婴儿蓝色是更强烈的蓝色调,色调是你在需要苍白背景、微妙填充物和界面中最轻的表面时所达到的。
A shade 调黑的颜色,加入黑色降低轻度加深颜色,栗色是红色,海军是蓝色,shades给你一个刻度较暗的一端:文字颜色,按键状态,边框比底座更需要重量。
A tone是混合灰色的一种颜色,添加灰色会降低颜色's强度,而不会使其明显变浅或变暗,tones是三者中最未被充分利用的,它们是调色板背后的秘密,感觉精致而不是花哨,一种淡化的颜色读起来更平静,更专业,这就是为什么静音调色板主导严肃的产品设计。
3个共有的重要是保留色调,蓝色的一色还是蓝色,蓝色的一色还是蓝色,蓝色的一色还是蓝色,那就是一组色调、色调、色调看起来像一个家庭,而不是随机的分类。
每个量表实际上是如何计算的?
Hood下,每个样条都是RGB空间中两种颜色的直线混合,生成器将你的基色取为红、绿、蓝三重,它取一个目标颜色,然后它以偶数步从一个到另一个色调的目标是白色的,这是 (255, 255, 255)。对于色调,目标是黑色, (0, 0, 0).对于声调,目标为中灰色, (128, 128, 128)。
任何单个通道的混合都是简单的算术。要获得从底数到目标的百分之三十的样本,您需要计算 base + (target - base) * 0.30 为红色通道,然后是绿色通道,然后是蓝色通道,并四舍五入到整数。十步色调尺度以百分之十、百分之二十等运行该计算,最高可达百分之百,其中颜色已变成纯白色。底色本身作为每个尺度顶部的零百分比样本包含在内,因此您始终可以看到您从哪里开始。
由于混音发生在 RGB 中的每个通道,因此色调基本上保持固定的色调和色调。向纯白色或纯黑色的混合会改变颜色反射的光线,但不会改变其底层特征,因此相同基底的色调和色调在不同亮度下读取为相同颜色。色调可以改变感知到的色调,因为灰色位于中性中心并向其拉动会稍微使每个通道去饱和,但在实践中,整个音阶仍然读取为一种颜色。如果您想准确检查给定样本如何跨格式着陆,则 颜色转换器 将并排向您展示其 HEX、RGB、HSL 和 HWB 值。
为什么不直接改变 HSL 的轻量级呢?
一个合理的问题是为什么该工具混合使用 RGB,而不是简单地升高或降低 L HSL中的值。两种方法都产生单色刻度,并且两者都是有效的。在RGB中向白色和黑色混合是经典的画家's色调和色调模型,并且它干净地映射到设计师已经使用的词上。它还保持端点的诚实:百分之百的色调是正白色的,百分之百的色调是正黑色的,当你只操纵HSL轻度时,这并不总是如此,因为饱和度与它的相互作用。生成器给你色调作为第三刻度专门覆盖"无强烈"轴,纯轻度变化不解决。
我应该生成多少步?
Generator 让你选择任何地方从两个到二十步每个规模, 和正确的数字取决于你正在建设什么。对于一个设计系统, 你想要一个命名坡道像 blue-50 通过 blue-900、步数越大,你就有一个可以采样的精细梯度,对于一对快速悬停和活动状态,三四步就足够了,我的默认是十,因为十种色调、十种色调、十种色调从一个基底上给我一个完整的工作调色板,没有压倒性的样本墙。
More steps 意味着相邻颜色之间的跳跃更小,这是当相邻色调需要视觉上清晰但接近时,您想要的,就像数据表的交替带一样,更少的步骤意味着更大胆的跳跃,这适合紧凑的调色板,其中每种颜色都有明显不同的作业没有错误的答案,并且由于工具立即重新计算,您可以上下滑动步数,直到间距看起来正确。
色调与降低不透明度有何不同?
I live in in early are using opacity to fake a tint。It seem equalificant: drop a blue button to fift-perfenty opacity over a white page and it looks like a lighter blue。the problem is that opacity is not a color, it is a compositing disrication, and it dependently on what sits backs behave the induct。that same fift-perfent blue over a dark surface become a muddy dark blue, and over a photo it become inforpreductable。your "light blue" change identity dependent on its background, which is other of a design system needs。
A色调通过将轻度烘烤成真实的、不透明的颜色来解决这个问题,生成器给你的样本是一个固定的六角形值,无论它背后是什么,看起来都是一样的,因为它是完全不透明的。当你需要一个一致的较轻版本的颜色,在你产品中的每个表面上表现得可预测时,使用色调而不是透明度。为真正的透明度效果保留不透明度,就像覆盖物和稀松布一样,你实际上希望背景能够显示出来。将这两个想法分开是安静的习惯之一,它使调色板感觉坚固而不是偶然。
如何将这些刻度变成可用的调色板?
A调色板不只是一堆颜色,它是一组作业,这里是我从单一品牌颜色开始时使用的工作流程,以底座作为你的主要动作颜色,在你的主按钮和链接上的背景的色调中触及:非常浅色调的页面或卡片表面,稍微更强的色调轻元素的悬停状态触及色调的文本和强调:深色调的身体副本需要对比淡色调,中等色调的按下状态的主按钮当你需要颜色呈现但安静时使用色调,就像禁用控制或辅助徽章。
1条你不能跳过的规则就是对比度,一个看起来可爱如按钮背景的色调如果它上的标签文字不能满足无障碍对比度要求,那就没用了,一旦你选择了将彼此叠置的颜色对,就运行它们通过 颜色对比检查器 WCAG门槛来确认他们清除,挑选漂亮的色调是容易的部分,确保它们上的文字是可读的,是将真实调色板与情绪板分开的部分。
下表显示了我通常如何将十步比例映射到界面角色。
| 斯沃奇源 | 的典型角色 | 示例使用 |
|---|---|---|
| 最轻的色调 | 表面和背景 | 页面背景、卡片填充、选定行 |
| 浅色调 | 悬停状态在轻元素上 | 按钮悬停,列表项悬停 |
| 底色 | 主要行动 | 主按钮、主动链接、品牌口音 |
| 中等色调 | 压力和活跃状态 | 按钮活跃、聚焦边框 |
| 深色阴影 | 文本和高度强调 | 光表面上的正文、标题 |
| 音调 | 静音的次要元素 | 禁用控制装置、辅助徽章 |
这与其他彩色工具如何配合?
Shades generator是一个小型管弦乐队中的一种乐器,它回答了问题"给我更多这种一种颜色,"但真正的调色板工作也触及了几个相邻的问题,当你需要不相同色调的和谐颜色时,就像一个互补或类似的集合,the 调色板生成器 建立这些关系。当您从图像或设计中采样起始颜色并需要读取其确切值时, 颜色选择器 为您提供十六进制代码。当您的色调注定要用于从一个到另一个淡入淡出的 CSS 背景时, 梯度生成器 将其中两个变成即用型粘贴 linear-gradient。
Natural pipeline 就是这样:挑选或粘贴一个基本颜色,生成它的色调、色调和色调,验证你计划堆叠的配对与对比度检查器,并将获胜者复制到你的样式表或设计令牌中,这些工具中的每一个都完全在浏览器中运行,因此你尚未宣布的品牌颜色从未传播给任何人's 服务器。如果本地优先的工具是你共享的值,则该块 数据隐私和在线工具 解释为什么我以这种方式构建一切,以及 web开发人员工具包 收集日常工作流程中的其余实用程序。
一个快速工作的例子
从品牌蓝色开始 #4466EE置步数为十,在 HEX 上留下复制格式,生成器返回三列。
色调列从 #4466EE 并爬向白色,逐渐穿过较浅的蓝色,直到最后一批 #FFFFFF。在中间的某个地方,您会得到一个柔和的长春花,它可以制作出出色的选行背景。阴影列从同一处开始 #4466EE 并下降到黑色,给你适合文本和按下状态的深靛蓝,结束于 #000000。声调列开始于 #4466EE 并走向灰色,产生柔和的石板蓝色,读起来平静而低调,结束于 #808080。
从该输入中,您现在拥有背景(浅色调)、悬停填充(稍深色调)、原色(底色)、文本颜色(深色调)和禁用颜色(色调)。单击任意样本将其复制,如果您的项目更喜欢这些,则将复制格式切换为 RGB 或 HSL,并粘贴。过去二十次选择颜色程序的内容现在是一次粘贴和几次点击,并且由于数学是确定性的,因此调色板每次都保持一致。
常见问题
色调、色调和色调有什么区别?
调(tint)是混合白色使颜色变浅,色调是混合黑色使颜色变深,色调是混合灰色使颜色静音,不改变浅色或深色,三者都保持原色调,只改变颜色呈现的浅色、深色或饱和度。
如何生成颜色深浅?
入你的基本颜色,然后读取阴影列,它将颜色与越来越多的黑色混合在一起,每行都是原始的更暗版本,在均匀的步骤中,您可以将其中任何一个复制为 HEX、RGB 或 HSL,以增加更平滑的暗值范围的步数。
较浅和较深的颜色是如何计算的?
每个刻度都是基色朝向目标的线性混合。色调向白色(255、255、255)混合,色调向黑色(0、0、0)混合,色调向中灰色(128、128、128)混合。例如,30% 的色调使每个红色、绿色和蓝色通道从基部移动 30% 到白色。
我可以粘贴什么颜色格式?
HEX 代码(3 或 6 位,带或不带前导哈希值)、rgb() 值、hsl() 值或常见的 CSS 颜色名称(如深红色或钢蓝色),您都可以输入该工具,该工具将您的输入在内部转换为 RGB,并在 HEX、RGB 和 HSL 中报告每个样本。
我可以生成多少种色调?
2到20步之间可以设置,每个音阶还包括原始的基色,因此10步设置给你基色加上十种色调,十种色调,十种色调,更少的步数给出值之间的粗体跳跃,而更多的步数给出细微的渐变。
我可以使用此工具构建单色调色板吗?
是。单色调色板在不同的轻度和饱和度水平上使用一种色调,这正是色调、色调和色调所产生的。选择一个基本品牌颜色,并将其色调用于背景,基本元素的基色及其色调用于文本或悬停状态。
生成的颜色保持相同的色调吗?
色调和色调几乎完全保持色调,因为与纯白色或黑色混合会改变轻度而不是色调。由于灰色位于色彩空间的中心,色调可能会发生非常轻微的移动,但对于实际设计工作,整个比例读作同色的一族。
色调生成器是免费且私密的吗?
是的。它是完全免费的,没有注册,也没有限制。所有解析和颜色数学都使用客户端 JavaScript 在浏览器中运行,因此您输入的颜色永远不会离开您的设备,并且一旦页面加载,该工具就会离线工作。
