Scale 是一个在线颜色工具,由 Hayk 制作,页面通过一个可调整的 Color 输入和一组颜色参数,帮助用户围绕指定颜色生成深浅变化的配色序列。它不是静态展示单组色板,而是将基色、深色数量、明暗程度、色相角度和饱和度等参数集中在同一界面中,用户可以直接修改数值,观察由深色与浅色组成的结果。页面还提供复制 SVG、复制颜色和随机生成全部参数的操作,适合需要快速调整颜色阶梯、查看色板变化或提取颜色值的场景。
核心功能
基色输入与颜色预览
页面顶部以 Color 作为主要输入区域,并展示当前颜色的十六进制值,同时提供 R、G、B 三个颜色通道字段。当前页面示例颜色为 #1D9A6C,旁边还能看到对应的 RGB 标签区域,用户可以围绕指定基色继续调整配色参数。
深色配色生成
Scale 提供 Dark colors amount、Darkness、Dark colors hue angle 和 Dark colors saturation 四项深色控制。页面示例中深色数量为 4,Darkness 为 50%,色相角度为 -51º,饱和度为 14%。生成结果中包含从 #0A2F51 到 #188977 的深色部分,具体色值会随页面参数变化。
浅色配色生成
浅色部分由 Light colors amount、Lightness、Light colors hue angle 和 Light colors saturation 控制。示例设置为浅色数量 6、Lightness 80%、色相角度 67º、饱和度 20%,结果中可见 #39A96B、#56B870、#74C67A、#99D492、#BFE1B0 和 #DEEDCF 等浅色值。
随机生成全部参数
界面提供 Randomize all 操作,可以对整组颜色和相关设置进行随机化。这个入口与当前的颜色预览和参数控制位于同一页面,适合在不固定基色或不想逐项设置时快速查看新的颜色组合。
复制颜色与 SVG
页面提供 Copy SVG 和 Copy colors 两个复制操作。Copy colors 用于复制当前色板中的颜色,Copy SVG 则对应当前配色结果的 SVG 内容,页面同时以多个十六进制色值展示生成结果。
使用方式
Scale 的正文展示为直接操作颜色和参数的网页界面,页面中可编辑颜色相关数值,并通过 Randomize all 生成随机结果。生成后可以使用 Copy colors 或 Copy SVG 复制内容。正文没有提到注册、客户端、浏览器插件、API、命令行、自备模型 Key 或导入功能;页面底部提供 GitHub 项目链接、Gallery 链接以及作者 Hayk 的链接。
适用人群与场景
需要围绕一个基色制作深浅色阶的设计人员,可以通过 Darkness、Lightness、色相角度和饱和度等参数调整色板。需要获取具体十六进制颜色值的用户,可以直接使用页面展示的颜色序列和 Copy colors 操作。需要复制可缩放图形内容的用户,可以使用 Copy SVG;而希望快速浏览不同组合的用户,则可以使用 Randomize all。