如何使用clrs.cc来进行炫酷的CSS调色

如何使用clrs.cc来进行炫酷的CSS调色，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

clrs.cc是最近在GitHub上发现的一个有趣的项目。它是一套精心设计的web配色方案。

web的默认的颜色看起来……比较……呃……怎么说呢……经典……

Navy #000080

Blue #0000ff

Aqua #00ffff

Teal #008080

Olive #008000

Green #008000

Lime #00ff00

Yellow #ffff00

Orange #ffa500

Red #ff0000

Maroon #800000

Fuchsia #ff00ff

Purple #800080

Silver #c0c0c0

Gray #808080

Black #000000

所以clrs.cc重搞了一套。

CSS Code复制内容到剪贴板

1. colors = {

2. # Cool Colors

3. aqua: "#7FDBFF",

4. blue: "#0074D9",

5. lime: "#01FF70",

6. navy: "#001F3F",

7. teal: "#39CCCC",

8. olive: "#3D9970",

9. green: "#2ECC40",

10. # Warm Colors

11. red: "#FF4136",

12. maroon: "#85144B",

13. orange: "#FF851B",

14. purple: "#B10DC9",

15. yellow: "#FFDC00",

16. fuchsia: "#F012BE",

17. # Gray Scale Colors

18. gray: "#aaa",

19. white: "#fff",

20. black: "#111",

21. silver: "#ddd"

22. };

提供了css文件，可以通过github获取：

代码如下:

git clone git@github.com:mrmrs/colors.git

例如，css这样使用：

CSS Code复制内容到剪贴板

1. "stylesheet" href="css/colors.css">

如果希望使用压缩过的版本，则使用min版：

CSS Code复制内容到剪贴板

1. "stylesheet" href="css/colors.min.css">

如果你希望调整颜色，可以直接修改css文件。如果需要压缩，有gulp任务提供：

代码如下:

gulp minfy

你可能惯用sass、stylus、myth，那可以直接修改git repo中的相应文件，然后用gulp生成css：

代码如下:

glup sass

代码如下:

glup stylus

代码如下:

gulp myth

项目主页

看完上述内容，你们掌握如何使用clrs.cc来进行炫酷的CSS调色的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注行业资讯频道，感谢各位的阅读！