资讯专栏INFORMATION COLUMN

clrs 精心设计的现代web配色方案

Y3G / 3531人阅读

摘要:是最近在上发现的一个有趣的项目。它是一套精心设计的配色方案。的默认的颜色看起来比较呃怎么说呢经典所以重搞了一套。如果需要压缩,有任务提供你可能惯用,那可以直接修改中的相应文件,然后用生成项目主页编译

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重搞了一套。

colors = {
    # Cool Colors

    aqua: "#7FDBFF", 
    blue: "#0074D9",
    lime: "#01FF70",
    navy: "#001F3F",
    teal: "#39CCCC",
    olive: "#3D9970",
    green: "#2ECC40",

    # Warm Colors

    red: "#FF4136",
    maroon: "#85144B",
    orange: "#FF851B",
    purple: "#B10DC9",
    yellow: "#FFDC00",
    fuchsia: "#F012BE",

    # Gray Scale Colors

    gray: "#aaa",
    white: "#fff",
    black: "#111",
    silver: "#ffffd"
};

提供了css文件,可以通过github获取:

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

例如,css这样使用:


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


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

gulp minfy

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

glup sass
glup stylus
gulp myth

项目主页

编译 SegmentFault

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/110872.html

相关文章

  • 12个美丽网站与受到日出启发配色方案

    摘要:在为项目选择配色方案时,有什么提供灵感我打赌你有一些论点和原则。例如,蓝色激发了信任,被企业广应用。这就是众多公司和机构选择它作为主要原因的原因。绿色用于一切自然和环保,等等。无论喜欢与否,颜色都会影响我们的潜意识,这是一个需要考虑的重点。  在为项目选择配色方案时,有什么提供灵感?我打赌你有一些论点和原则。例如,我们都意识到每种颜色都有其个性和心理底蕴,使其有助于唤起特定的情感。例如,蓝色...

    Aklman 评论0 收藏0
  • 优秀文章收藏(慢慢消化)持续更新~

    摘要:整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次,彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习 原文:https://www.ahwgs.cn/youxiuwenzhan...

    JeOam 评论0 收藏0
  • 【译】Seaborn教程(二)选择配色方案

    摘要:让选择和使用配色方案变得简单且适用于你工作的数据种类和你想要达到的可视化目标。使用建立配色方案管理不同的配色方案所使用的重要函数是。 原文:http://web.stanford.edu/~mwaskom/software/seaborn/tutorial/color_palettes.html 选择配色方案 配色是图表设计里最重要的方面之一,因为如果配色方案好,它可以清晰展现数据的模...

    ranwu 评论0 收藏0
  • 收集整理适用博客建站免费开源Wordpress主题-简约好看WP主题

    摘要:最重要的就是找一个适合自己的主题了。事实上,免费主题也非常多,而且很多的免费主题在功能上和界面美观上已经大大超过了付费的主题。加上这些主题都是开源的,基本上可以在上找得到源码,安全性是没有问题,主题的作者也在不断更新当中。WordPress最重要的就是找一个适合自己的主题了。好一点的WordPress主题基本上都是要收费的,而且价格还不便宜,这导致了不少的新手朋友们很为难。而有时我们仅仅根据...

    番茄西红柿 评论0 收藏2637
  • Vue面试题精选:Vue与React区别,分别在哪些场景下使用更合适?

    摘要:它们是高度重视且广泛使用的框架,用于界面设计。应用程序开发引起了全球开发人员的极大关注,以构建令人惊叹的应用程序。但是,具有适应性强的体系结构,使其成为广泛使用的框架之一,具有最新的库和包。专业和出色的社区支持,以解决任何问题。 JavaScript是世界上最流行的语言之一,React和Vue是JS最流行的两个框架。但哪一款最适合你? JavaScript越来越受欢迎,许多科技巨头正在...

    mcterry 评论0 收藏0

发表评论

0条评论

Y3G

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<