如何使用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. #CoolColors
  3. aqua:"#7FDBFF",
  4. blue:"#0074D9",
  5. lime:"#01FF70",
  6. navy:"#001F3F",
  7. teal:"#39CCCC",
  8. olive:"#3D9970",
  9. green:"#2ECC40",
  10. #WarmColors
  11. red:"#FF4136",
  12. maroon:"#85144B",
  13. orange:"#FF851B",
  14. purple:"#B10DC9",
  15. yellow:"#FFDC00",
  16. fuchsia:"#F012BE",
  17. #GrayScaleColors
  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. <linkrel="stylesheet"rel="nofollow noopener noreferrer" href="css/colors.css">

如果希望使用压缩过的版本,则使用min版:

CSS Code复制内容到剪贴板
  1. <linkrel="stylesheet"rel="nofollow noopener noreferrer" 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调色。抱最大的但愿,为最大的努力,做最坏的打算。更多关于如何使用clrs.cc来进行炫酷的CSS调色请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例