成为一个好的设计师,或者一个很会穿搭的人。在设计作品或是穿搭衣物时,决不能配错颜色。
如果你天生对色彩不敏感,一不小心就会弄出「大红配大绿」。那么,知晓程序今天推荐的小程序,你可得要收到好了。
「Color 颜值」,是一款专注帮你解决配色问题的小程序,它基于色轮配色原理,让你轻轻松松就能搭配出大师级别的色彩。
关注「知晓程序」公众号,在后台回复「0109」,一张图教你玩转小程序。
这个小程序共提供了四大实用功能:配色广场、颜色转换、配色工具、Web 颜色。
我们先去「配色广场」看看。
自己不懂配色,就借鉴经典的配色方案吧。
在「配色广场」中,就提供了许多「Adobe Color 配色方案」,一页 5 组,一组 5 种颜色。页面底部有个「Surprise me」的按键,点击它,就切换另外 5 组。
如果你有一个确定的主色调,就可以在这里挑选可与之搭配的颜色。
看见喜欢的方案,点进去,就能获得这个色彩方案的「配色详情」,详细展示了每一种颜色的 RGB 和 HSB 色值。
实在喜欢,还可以点击底部的「收藏」,并给它起一个「名称」便于日后查阅。
不过,「我的收藏」的位置比较隐蔽,找不到它的朋友们这里要认真看咯。
回到配色广场的主页面,注意到页面上方的「下拉小箭头」,点击它会弹出选择菜单,选中「我的收藏」并确定,你收藏下来的配色方案都在这里。
每种颜色都有对应的色值,据说设计师确定颜色的方法,是先估计色值,再根据色彩的浓度、亮度等等调出最满意的颜色。
「颜色转换」就是用于调整色值的,我们来看看,具体怎么用?
首先,你要确定一种颜色模式,页面上方的「模式选择」有 RGB、CMYK、LAB、HSB 四种可选。选好模式,每一个属性有相应的滑块,滑动它就可以调整色值了。
页面中间的「预览」块可以实时显示你调出来的颜色,同时还显示其「十六进制颜色码」,以及这个颜色在四种不同模式下对应的色值。
在「配色广场」中,小程序推荐的是 Adobe Color 配色方案。
而接下来要介绍的「配色工具」,则提供了基于 6 种颜色关系的配色算法,分别是类比色/相似色、互补色、分裂补色、单色、渐变、二次色配比。
如果你对这几种配色算法没有概念,也没关系,在「关于 Color 颜值」中可以找到详细的介绍,顺便还能涨涨知识呢。
每一种配色算法都需要一个「主色」或「基准色」,这个由你自己来调它的 RGB 值以及饱和度、亮度,然后小程序会根据你选择的配色算法推荐一组 4 种颜色。
如果实在不知如何确定「主色」或「基准色」,那就点击底部的「随机」,你可以一直「随机」,直到满意。
好不容易找到一组满意的,千万别忘了「收藏」,收藏方法跟上面所述一样,这个收藏夹还可以作为你的颜色管理利器哦。
如果你不需要考虑配色原理,还有一个选项「 I am Feeling Lucky 」,它会随机挑选一种算法,并根据其原理为你推荐一组 5 种颜色的配色方案。
这个功能方便了外行人搭配出和谐的颜色,也给内行人带来了色彩灵感。
现在是互联网时代,不管是美术设计,还是 UI 设计,你都需要对「Web 颜色」有一定的了解。
这个小程序从「CSS 颜色值」、「Web 安全色」以及「Gray 灰度值」三个方面,列举了 Web 标准规范中 HTML 和 CSS 定义的标准色和安全色。
如果你还在为颜色搭配而头疼,如果你需要一个颜色管理工具,如果你喜欢和谐美丽的色彩,不妨打开「Color 颜值」。
谁不喜欢和谐美丽的色彩呢?还不快来!
「Color 颜值」小程序使用链接 https://minapp.com/miniapp/3775/
关注「知晓程序」公众号,在后台回复「藏宝图」,获取最全最好用的小程序名单。
头条创作挑战赛#
颜色对于 css 来说是非常重要的,网站之所以会呈现出五彩斑斓的样式,就是这些颜色样式起的作用。在 css 中,对于颜色样式有很多种表达方式,今天我们就来盘点下 css 中颜色的格式。
在 css 中,默认定义了很多名字颜色,比较常见的比如 yellow,blue,red,pink 等,实际上,css 中一共定义了 140 个颜色名字,这些名字你都可以直接拿来使用。虽然 140 种看起来很多,但是实际上它比 8bit 的颜色还要少,因此,平时我们很少使用它。
这是一种颜色格式,从名字我们就知道它是 red,green,blue 三种颜色的简写,我们都知道三原色原理,也就是通过三种基本颜色,我们就可以组合出其它的颜色出来,因此,rgb 就可以表示出我们可以看到的各种颜色。
在 css 中,red,green,blue 被称作三通道,每个通道的值是从 0-255,通过混合这些通道颜色,我们就可以创造出 1600 多万种颜色。需要注意的是 rgb(255,255,255,0.5) 允许我们有第四个参数,它的值从 0-1,用来表示透明度。
.translucent-box {
background: rgb(255 0 0 / 0.5);
}
通过十六进制数字来表示颜色代码,6 位数字被分成了三组,每两位一组,一位是 16,两位就是 16*16=256,所以它其实和 RGB 基本是相同的,只不过它是用 16 进制进行表示。
它的三组也是代表着 red,green,blue,和 RGB 一样的是,它也可以指定透明度,也就是说我们可以使用 8 位十六进制来表示颜色。
.translucent-box {
background: #ffff0080;
}
和 RGB 不同的是,HSL 是通过指定色调,饱和度,亮度来表示颜色的。
在 HSL 中,我们的色调是在 0deg-360deg 之间,转一圈的大致颜色范围就是红橙黄绿青蓝紫,饱和度是在 0-100%之间,亮度是在 0%-100%之间。
HSL 是可以和 RGB 进行转换的,其中色调的转换公式比较复杂。
.translucent-box {
background-color: hsl(0deg 100% 2%);
}
P3 是一个在继承 sRGB 色彩空间范围之外,又提供了更亮更充满活力的色彩范围,也就是说 P3 表示的色彩范围要更大。
因此,使用 P3 的时候,需要使用特殊的属性值 color 形式来表示,但是对于 color 这个属性,目前只有 safari 支持。
.translucent-box {
background: color(display-p3 1 0 0);
}
因为 HSL 对于不同颜色在表示亮度的时候给人的感觉是不同的,因此,人们发明了 LCH 用来更接近人眼感知的色彩表示方式。
LCH 代表 “亮度色相”。“色度”或多或少是“饱和度”的同义词。它在概念上与 HSL 非常相似,但有两个很大的区别:
与我们看到的其他颜色格式不同,LCH 不受 sRGB 的约束。它甚至没有绑定到 P3!它通过对色度没有上限来实现这一点。
在 HSL 中,饱和度范围从 0%(无饱和)到 100%(完全饱和)。这是可能的,因为我们知道我们正在谈论 sRGB 色彩空间,一个有限的调色板。
但是 LCH 与特定的色彩空间无关,因此我们不知道饱和上限在哪里。它不是一成不变的:随着显示技术的不断改进,我们可以期待显示器达到越来越宽的色域。LCH 将自动能够通过调高色度来引用这些扩展的颜色。谈论面向未来!
.translucent-box {
background: lch(50% 120 20);
}
CSS 是一种令人惊讶的难以掌握的语言。无论花了多少年练习,总会觉得有很多我不知道的东西。
就目前而言,在 LCH 没有被完全支持的情况下,HSL 也许更加适合表达。
所以说很多时候,当我们以为自己已经很熟悉或者掌握一门语言的时候,其实可能我们才仅仅是刚入门而已,任何知识当我们深入研究的时候我们都会发现我们对它的了解其实并不是真的很透彻。
们平时进入到每一个网页中,最开始看到的肯定还是整体上的色彩搭配。每一个品牌和公司的文化形象都不同,可能本身也有一些logo和颜色方面的元素添加,如果要进行网站设计,这些方面也都是要考虑到其中的。很多页面导航可能都是在使用对比色,比如说黑白色和红绿色等,跨度比较大的颜色搭配起来也着实明显,确实达到了很好的效果。但是在进行页面色彩搭配的时候,必须要注意以下几点。
要点一,根据品牌形象来选择。网站设计必须要先考虑到整体上的品牌形象,其实网站已经反射出了我们企业的一些文化元素,在进行建设的过程中,我们必须要提前确定好颜色方面的搭配。这个时候我们网站中的基础色调,基本上就影响到了后期的品牌呈现效果,所以一定要谨慎选择。北京金方时代科技有限公司专业人员建议大家最好是根据品牌的logo或者是基础颜色来进行建站,但是一定不能影响到网友的阅读,颜色搭配要适度。
要点二,重要信息要突出。网站设计的重点信息肯定是要突出,其实颜色也决定了我们的信息传递,尤其是一些比较重要的公司信息,或者是优惠信息等,尽量是使用到华丽的色彩,又或者是进行字体方面的变形,这样可以更有吸引力,也凸显了页面的独特魅力。建议大家最好是考虑一下自己受众群体的喜好,比如说一些针对年轻女性的品牌,页面设计肯定是要更有活力,整体上的色彩也可以变得更加轻松一些。考虑到每一个网友的喜好,对我们页面的色彩设计和选择也是相当有帮助的。
要点三,导航栏要直观。我们的网站设计必须要保证一个比较直观的导航栏,如此才能够让网友进入到页面后,更方便使用网页的导航。毕竟我们的网站设计就是为了能够吸引到不同类型的消费者,也为了扩大品牌的影响力,所以导航的设计也直接影响到了网友在页面停留的时间长短。颜色上可以重点突出字体,也要防止一些迷惑网友的动作产生,这样的导航设计会让人非常反感。建议大家最好是能够在导航和不同级页面的设计上有一定要求,提前写好自己的设计方案,然后网络建设公司帮助处理,效果会更好。
原文链接出自:http://www.bjjfsd.com/index_show_catid_19_id_692.html
*请认真填写需求信息,我们会在24小时内与您取得联系。