什么是色调生成器?
Color shades生成器采用一种基本颜色,并构建一个更浅和更深版本的单色尺度,从#4466EE等单个输入中,它产生一排朝白色迈进的色调,一排朝黑色迈进的色调,一排朝灰色迈进的色调。每个色谱都是真正的颜色,您可以复制为HEX,RGB或HSL,并直接放入CSS,设计文件或主题配置中。
3个音阶来自色彩理论中使用的经典定义,色调是基色混合白色,在保持相同色调的同时提高了它的亮度,色调是基色混合黑色,使它变暗,色调是基色混合灰色,降低了它的强度,并给出了一个静音的,更精致的颜色版本,从一个输入中拥有所有三个,就是让你构建一个连贯的调色板:一个按钮及其悬停状态,一组图表系列,或者一个界面的明暗表面,都源自单一品牌颜色。
Generator 完全在你的浏览器中运行,你输入的颜色被解析,比例尺是用客户端 JavaScript 计算的,所以什么都没有上传,没有账号,你的工作也从来没有被跟踪,它接受 HEX,rgb(),hsl(),和常见的 CSS 颜色名称,让你设置每个比例尺包含多少步,并立即更新每个样本,一旦页面加载了它,它就会离线工作。
如何使用色调生成器?
输入基本颜色
在任何常见语法中键入或粘贴颜色:像 #4466EE 这样的 HEX 代码、rgb() 或 hsl() 值或 CSS 颜色名称(例如 teal)。
设置步骤数
选择每个音阶应包含多少种变化。更多的步骤给出了从基部到白色、黑色或灰色的更细梯度。
查看色调、色调和色调
该工具并排显示三个比例,每个样本都标有其 HEX 值和朝向目标颜色混合的百分比。
复制您需要的颜色
单击任意样本来复制其值。在 HEX、RGB 和 HSL 之间切换复制格式以匹配项目期望的语法。
主要特点
色调、色调和色调
一种基色同时产生三种完整的音阶:浅色、深色和向灰色的柔和色调。
每个值均可复制
每个样本都有 HEX、RGB 和 HSL 版本,因此您可以将其直接粘贴到 CSS、设计工具或主题文件中。
可调节步骤
2到20步设置为每个比例,以控制基色和白色,黑色或灰色之间的梯度有多细。
宽恕输入
接受 3 位和 6 位 HEX、rgb() 和 hsl() 值以及常见的 CSS 颜色名称,所有这些都标准化为相同的样本。
Frequently Asked Questions
Related Tools
Color Contrast Checker
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
Color Converter
Convert color codes between HEX, RGB, HSL, HWB, and CMYK instantly
Color Mixer
Blend two colors with adjustable ratio and blend modes, and build a gradient between them
Color Palette Generator
Generate harmonious color palettes from any base color - shades and tints, complementary, analogous, triadic, and monochromatic - with HEX codes you can copy and a CSS variables export.
Comments
0 comments
No comments yet. Be the first to share your thoughts!