爱意满满的作品展示区。
Ectx

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

  •  1
     
  •   Ectx · Jun 19, 2016 · 4968 views
    This topic created in 3789 days ago, the information mentioned may be changed or developed.

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

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

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

    @zdd2389 目前只能保存为 svg ,可以放到 ai 或者 cdr 里当色板用
    tSQghkfhTtQt9mtd
    tSQghkfhTtQt9mtd
    Jun 22, 2016
    29
    @Ectx 遗憾( 2333 那就算了 还是资辞 lz 的配色工具喽
    lslqtz
    lslqtz
    Jun 23, 2016
    30
    好棒!
    fetich
    fetich
    Jun 23, 2016
    31
    不会用……楼主好厉害!
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2889 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 61ms · UTC 13:19 · PVG 21:19 · LAX 05:19 · JFK 08:19
    ♥ Do have faith in what you're doing.