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

初学 js 撸了个简单的配色工具

  •  1
     
  •   Ectx · 2016-06-19 20:41:44 +08:00 · 3681 次点击
    这是一个创建于 2881 天前的主题,其中的信息可能已经有所发展或是发生改变。

    去年年末开始用业余时间一点点撸出来的。
    做这个一是因为突然心血来潮,想验证一下自己那一点点半吊子对色彩的理解,但是找了很多配色工具都不理想;二是因为一直想转行当码农,然而非科班也没学历,就只能自己当作业余爱好撸着玩了。
    传送门:
    http://lwl.space/color
    功能很简单,就那么几个键,大家随便试,也希望能给些意见。
    初学的渣代码就不开源了,以后有时间再单独把颜色生成部分拆出来。

    31 条回复    2016-06-23 13:57:58 +08:00
    chairuosen
        1
    chairuosen  
       2016-06-19 21:29:21 +08:00
    js 拿什么混淆的?
    Ectx
        2
    Ectx  
    OP
       2016-06-19 21:36:35 +08:00
    @chairuosen 重点在这吗……网上随便搜的 javascriptobfuscator 和站长工具混用- -
    chairuosen
        3
    chairuosen  
       2016-06-19 21:49:30 +08:00
    @Ectx 功能看着挺复杂啊,想看看代码。。。很不错的作品!
    LancerComet
        4
    LancerComet  
       2016-06-19 21:58:21 +08:00
    随便拉了几次取了一些色相范围,不得不说颜色相当讲究,简直就是拿 Sylvain Sarrailh 或 Atey Ghailan 这样的概念设计师的稿子取的颜色,非常不错!
    DoraJDJ
        5
    DoraJDJ  
       2016-06-19 22:07:45 +08:00 via Android
    手机操作不怎么好,只能点下面的操作按钮,圆盘不能操控
    187j3x1
        6
    187j3x1  
       2016-06-19 22:10:40 +08:00
    好玩
    TangMonk
        7
    TangMonk  
       2016-06-19 22:11:18 +08:00
    感觉挺厉害的样子,但是不知道具体有什么作用。。
    Ectx
        8
    Ectx  
    OP
       2016-06-19 22:13:35 +08:00
    @chairuosen 行吧,这东西我也是当学习用的,就不混淆了。(源码里各种乱也跟混淆了差不多- -
    Ectx
        9
    Ectx  
    OP
       2016-06-19 22:16:50 +08:00
    @DoraJDJ 移动端的兼容目前还不太会弄,以后有时间再慢慢研究了
    SuperFashi
        10
    SuperFashi  
       2016-06-19 22:37:21 +08:00 via Android
    太棒了!必须 mark 一下
    smallpath
        11
    smallpath  
       2016-06-19 22:37:47 +08:00
    好玩
    取色规则不建议用贝塞尔曲线, 毫无色彩上的意义,建议参照 Adobe Color CC 那几种设定好了的分组拾色
    BGLL
        12
    BGLL  
       2016-06-19 22:46:24 +08:00
    挺有趣的,虽然曲线操作的有点迷
    Ectx
        13
    Ectx  
    OP
       2016-06-19 23:02:03 +08:00
    @smallpath 这可不能说是‘毫无色彩上的意义’哦,因为一条贝塞尔在色轮上就是一组邻近色或者过渡色,我最初的想法就是用贝塞尔来控制邻近色的走向的。且不如说如果我需要的是 adobe kuler 那样的功能,那我就没必要做这个工具了……
    smallpath
        14
    smallpath  
       2016-06-19 23:23:33 +08:00
    @Ectx 邻近色是指色相差 90 度, 似乎你这里贝塞尔句柄把 360 度都取到了吧,另外这里用到的色轮貌似是 cmyk,我印象中 cmyk 并不是以色相为基准输入的,hsb 和 hsl 才是;过渡色意义不明;adobe kuler 那十组拾色的规则是有固定的算式的,结果可靠可预期,老实说 10 组算式并不能满足需求, 我觉得有另外的规则做补充是很好的
    qiaobeier
        15
    qiaobeier  
       2016-06-19 23:41:00 +08:00
    上传到 github ,给你简历润润色。
    qiaobeier
        16
    qiaobeier  
       2016-06-19 23:41:19 +08:00
    弄到 github ,给你简历润润色。
    Ectx
        17
    Ectx  
    OP
       2016-06-20 00:35:11 +08:00
    @smallpath 谢谢,我个人对色理也没太系统的研究过,很多都是靠感觉得来的,所以操作设定的自由度比较高也满足各种非理性的需求。另外这个色轮确是 hsl 的, cmyk 的色彩空间貌似没法做色轮的……
    kuler 那套算法我不太懂,他的色轮貌似也不是 hsl/hsb ,正常的 hsl 在 120 度的位置应该是纯绿色(#00FF00),他的却是偏黄色,但感觉似乎过渡更自然。
    shiny
        18
    shiny  
       2016-06-20 00:41:49 +08:00
    👍让学了 N 年 JS 的我自感惭愧
    smallpath
        19
    smallpath  
       2016-06-20 00:49:25 +08:00 via Android
    @Ectx ,咦,是 hsl 嘛,hsb 和 hsl 的三原色占比高的吓人,可能我没看清楚吧。 cmyk 也可以做色轮,做出来的效果更倾向于彩虹七色,只是 cmyk 的定义决定了色轮的中心是黑的,因此基本没人用 cmyk 色轮。 kuler 的算法是重映射了 hsb 算法的颜色范围,从 3 种基准色按角度映射成了 7 种,并且 kuler 有个小 bug ,正好绿色那块有大约 10 度的范围 rgb 值几乎一样,非常像映射绿色那块写错了参数导致颜色骤变,之后又打了模糊来掩盖错误,我之前模拟 kuler 时候正好踩了一样的坑, 233
    Niphor
        20
    Niphor  
       2016-06-20 08:29:26 +08:00
    好棒!
    tSQghkfhTtQt9mtd
        21
    tSQghkfhTtQt9mtd  
       2016-06-20 09:55:47 +08:00 via Android
    卧槽 lwl.space 是你的。。
    onionnews
        22
    onionnews  
       2016-06-20 14:58:58 +08:00
    我也想学 js ,楼主在哪里学习的,有什么课程和书推荐?
    Ectx
        23
    Ectx  
    OP
       2016-06-20 19:08:58 +08:00
    @liwanglin12 欲购私聊(手动斜眼

    @onionnews 先随便入门一门编程语言的基础语法(我的是 C#),然后去 codewars 上刷 js 的题
    tSQghkfhTtQt9mtd
        24
    tSQghkfhTtQt9mtd  
       2016-06-20 19:20:09 +08:00
    @Ectx 2333 并不需要,我有 lwl.moe 了(
    话说你 space 域首页我能挪过来用吗(((
    Exin
        25
    Exin  
       2016-06-20 21:45:01 +08:00
    炫酷
    huybery
        26
    huybery  
       2016-06-20 22:24:31 +08:00
    - - 话说这个怎么拯救我的垃圾配色感
    zdd2389
        27
    zdd2389  
       2016-06-22 18:23:07 +08:00
    这个要怎么用到项目中?看着色彩感觉很不错
    Ectx
        28
    Ectx  
    OP
       2016-06-22 23:19:40 +08:00
    @liwanglin12 蛤蛤,那不行,虽说现在首页瞎糊的但以后可能会用到

    @zdd2389 目前只能保存为 svg ,可以放到 ai 或者 cdr 里当色板用
    tSQghkfhTtQt9mtd
        29
    tSQghkfhTtQt9mtd  
       2016-06-22 23:21:24 +08:00
    @Ectx 遗憾( 2333 那就算了 还是资辞 lz 的配色工具喽
    lslqtz
        30
    lslqtz  
       2016-06-23 12:39:19 +08:00
    好棒!
    fetich
        31
    fetich  
       2016-06-23 13:57:58 +08:00
    不会用……楼主好厉害!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1307 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 18:02 · PVG 02:02 · LAX 11:02 · JFK 14:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.