V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
ZxBing0066
V2EX  ›  分享创造

写了个懒人网站用于一键给网站配色

  •  1
     
  •   ZxBing0066 ·
    ZxBing0066 · 2022-02-08 20:14:50 +08:00 · 3452 次点击
    这是一个创建于 1018 天前的主题,其中的信息可能已经有所发展或是发生改变。

    先上链接: https://chinese-colors.heyfe.org/

    因为经常会写一些小 demo 之类的,苦于配色痛苦就写了一个一键配色的小网站。

    主流的配色站点一般都是给出几个颜色的搭配,然后需要自己去搭配到元素上,对我这种美感缺失的人实在太痛苦了。

    主色列表用的是中国色上的,然后会根据主色生成边框、字色、背景色等颜色。可以在配置面板中选择配色方案。

    不过现在颜色太多有点难找,回头加个收藏功能。欢迎大家提建议和意见。

    第 1 条附言  ·  2022-02-08 23:14:46 +08:00
    网站没有引导,录了个小视频:

    网站的颜色列表数据是来自中国色: http://zhongguose.com/ ,并非我整理,按照中国色网站的解释,是来自中科院,不过我没找到相关资料。

    网站主要功能不是为了展示颜色列表,而是按照颜色来生成一个网页的字色、背景色、线条色等常用颜色,减少配色时的痛苦,配色功能藏在左侧中间的按钮中,好像不是很容易发现。具体使用可以看上方的视频
    第 2 条附言  ·  2022-02-08 23:30:26 +08:00
    emm 上面写错了,按钮是在右侧中间,又左右不分了 🥲

    windows 下字体有点不太行,回头找个 windows 自带的国风字体加上去,现在 windows 下用的自定义字体不过字体文件太大了,速度好像很慢的样子。

    然后其实按 空格键 可以随机选择一个颜色,解决选择困难证 🐶
    28 条回复    2022-02-11 08:33:58 +08:00
    thedog
        1
    thedog  
       2022-02-08 20:50:24 +08:00
    优秀
    pomesio
        2
    pomesio  
       2022-02-08 21:12:20 +08:00
    挺不错的,最好能做个复制的按钮,2 个方案:
    1 、点击颜色块就自动复制了 hex ;
    2 、在右边的 hex 和 rgb 栏,分别做两个复制机制;对于 hex 的复制则为#ffffff 这种,rgb 的复制则为 0,0,0 这种,不要带任何括号比较好,因为不是所有语言的数组表达式都一样。
    以上仅我在初体验时候遇到的问题。
    Yother
        3
    Yother  
       2022-02-08 21:17:53 +08:00 via Android
    这个感觉出来很久了。
    sickoo
        4
    sickoo  
       2022-02-08 21:33:14 +08:00
    EPr2hh6LADQWqRVH
        5
    EPr2hh6LADQWqRVH  
       2022-02-08 21:35:31 +08:00
    颜色生成什么算法,开源吗?
    dream7758522
        6
    dream7758522  
       2022-02-08 22:06:47 +08:00 via Android
    就服你能给颜色起那么多名字
    EyebrowsWhite
        7
    EyebrowsWhite  
       2022-02-08 22:22:18 +08:00
    感觉可能是字体&字号的原因,左边的某些颜色名称看着有点费劲
    ZxBing0066
        8
    ZxBing0066  
    OP
       2022-02-08 23:16:04 +08:00
    @dream7758522 颜色不是我起的名字哦 😂,从中国色拿来的,应该是中科院的数据,我是将颜色做转换生成字色、背景这些
    ZxBing0066
        9
    ZxBing0066  
    OP
       2022-02-08 23:17:36 +08:00
    @avastms 自己写的额,还比较粗糙暂时不开源了就,后面好好研究下,没问题了再开源。这个颜色生成还是得有专业性知识,我这是这几天研究了好久乱搓的。
    ZxBing0066
        10
    ZxBing0066  
    OP
       2022-02-08 23:19:11 +08:00
    @EyebrowsWhite 嗯 这个原先的方案是列表里所有的颜色都会随着色彩变化,但是由于添加了很多渐变动画,元素太多切换时会造成卡顿,所以替换成了现在的方案,颜色固定了,再深色背景下会有些吃力,暂时想不到什么好办法
    ZxBing0066
        11
    ZxBing0066  
    OP
       2022-02-08 23:20:15 +08:00
    @Yother 你说的是 http://zhongguose.com/ 这个吧,这个是出来好久了,我这个主要是为了生存网站的配色,定位不太一样。而且中国色这个网站有点问题,配色固定,很多颜色会导致文字完全没法看。
    ZxBing0066
        12
    ZxBing0066  
    OP
       2022-02-08 23:21:41 +08:00
    @pomesio 😂 麻烦看下追加的视频哈,这个主要不是提供主色的这种,而是直接生成一套字体、背景、线条的配色,功能都藏在右侧中间的按钮里了,不太显眼,那边可以导出主题然后复制的
    mlhadoop
        13
    mlhadoop  
       2022-02-09 00:03:52 +08:00
    复制了怎么用? 有 demo 吗
    agdhole
        14
    agdhole  
       2022-02-09 00:30:55 +08:00
    根本看不清字
    ZxBing0066
        15
    ZxBing0066  
    OP
       2022-02-09 08:19:37 +08:00
    @agdhole 看不清指的是左侧颜色列表还是什么。左侧的话在部分深色环境下确实会有时看不清,不过暂时想不到什么好办法。
    ZxBing0066
        16
    ZxBing0066  
    OP
       2022-02-09 08:20:29 +08:00
    @mlhadoop 现在导出的是 scss 或者 css 的变量。直接用变量就行了
    sarices
        17
    sarices  
       2022-02-09 08:41:17 +08:00
    换个字体吧,黑体就很好了啊,每个人都能看明白
    ZxBing0066
        18
    ZxBing0066  
    OP
       2022-02-09 10:42:56 +08:00
    @sarices windows 下的字体吗? mac 字体我觉得挺舒服的 行楷,比较喜欢楷书这种
    rbw
        19
    rbw  
       2022-02-09 11:58:49 +08:00
    哈哈哈 我之前给网站配色就是从传统色上找的。https://dasein.site
    agdhole
        20
    agdhole  
       2022-02-09 13:17:06 +08:00
    @ZxBing0066 #15 windows 4k 显示器,左侧字又小又糊
    ZxBing0066
        21
    ZxBing0066  
    OP
       2022-02-09 13:26:50 +08:00
    @agdhole 手头只有 2k 显示器 😂 大小看着还好,windows 上不懂为啥字确实有点糊
    ypzhou
        22
    ypzhou  
       2022-02-09 17:31:09 +08:00
    你这个网站 看的我头晕
    adian
        23
    adian  
       2022-02-09 20:44:17 +08:00
    艳红 237 90 101
    ZxBing0066
        24
    ZxBing0066  
    OP
       2022-02-09 22:06:14 +08:00
    @ypzhou windows 吗 win 下有点糊 没搞懂为啥 😂
    sechi
        25
    sechi  
       2022-02-10 08:11:22 +08:00
    这个字体观感太不好了,字很小而且也不是很好看,建议还是上黑体
    ZxBing0066
        26
    ZxBing0066  
    OP
       2022-02-10 22:23:44 +08:00
    @sechi mac 吗 ,我觉得行楷挺好看的 😂 。字是小了点 个人习惯,喜欢一屏看下更多东西
    sechi
        27
    sechi  
       2022-02-11 06:14:24 +08:00 via Android
    @ZxBing0066 Windows ,除去字体的因素,整体上来看还是做的很不错的~
    ZxBing0066
        28
    ZxBing0066  
    OP
       2022-02-11 08:33:58 +08:00
    @sechi 字号拉大了两号,仔细看确实比较吃力,汉字果然需要大点。

    字体的话前天改过一版来着,windows 除了标题是楷体外应该都是黑体的才对
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2715 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 12:29 · PVG 20:29 · LAX 04:29 · JFK 07:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.