要获得正确的配色方案,可能需要设计人员大量的人工(和主观意见)。 好消息是,有一些工具可以使您的生活更轻松。 之前我们已经介绍了iOS的Adobe Kuler以及一个名为0to255的便捷工具,该工具可以帮助您轻松获取色调的十六进制代码。 这次,我们正在研究ColourCode。
ColourCode是基于Web的工具,可轻松查找配色方案。 ColourCode可让您根据HSL(色调,饱和度,亮度)值选择颜色 。 它具有多种模式,使您只需单击几下即可选择互补色,还可以下载多种格式的色板。
使用ColourCode
进入页面后 ,将鼠标悬停在页面上的任意位置即可获取颜色及其颜色代码。 只要您移动光标 , 颜色就会不断变化 。 如果您喜欢看到的颜色,请单击它以锁定您的选择。 就这么简单。
要添加另一种颜色, 请单击右侧的加号,然后重复悬停和单击以锁定另一种颜色。 要删除颜色选择,只需单击中间的垃圾桶图标 。
![](https://i-blog.csdnimg.cn/blog_migrate/337421464335135be3bbd0377c94b181.png)
![](https://i-blog.csdnimg.cn/blog_migrate/337421464335135be3bbd0377c94b181.png)
这是在自由构建模式下选择颜色样本的方式。 还有其他几种模式可以从中选择颜色样本。
![](https://i-blog.csdnimg.cn/blog_migrate/be00d488923331fabfd3d5e7ea829d72.png)
![](https://i-blog.csdnimg.cn/blog_migrate/be00d488923331fabfd3d5e7ea829d72.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2a810411e4be6de8f439fb2b9334262f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2a810411e4be6de8f439fb2b9334262f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5d2341b2296eadf65e17ea16dd9ea88f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5d2341b2296eadf65e17ea16dd9ea88f.png)
除了这4种模式之外,您还可以在该站点上探索另外5种模式。
手动调整
每种颜色的底部都有一个向下箭头图标。 单击它可以显示颜色的详细信息以及其他选项,例如能够在HEX,RGB,HSL,CMY,CMYK,XYZ或YXY等格式之间手动更改颜色模式(通过单击它)。 另外,您也可以使用颜色滑块进行更改。
![](https://i-blog.csdnimg.cn/blog_migrate/18eb467c2502de8b0c6ac438ddc7654c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/18eb467c2502de8b0c6ac438ddc7654c.png)
获得颜色
确定要使用的颜色后,可以使用SCSS,LESS或PNG格式进行抓取。 不幸的是,ColourCode没有为您提供内置的代码编辑器来复制和粘贴源代码。 您必须先下载它,然后使用桌面编辑器将其打开。
![](https://i-blog.csdnimg.cn/blog_migrate/ca7c8bbdabdf099ba9f19966f3c682b3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ca7c8bbdabdf099ba9f19966f3c682b3.png)
即使这样,源也只是单行颜色定义器。 以下是SCSS文件中的源代码:
$color: #a8e2ba;
而这是在LESS中 :
@color: #a8e2ba;
翻译自: https://www.hongkiat.com/blog/find-color-scheme-colourcode/