网页设计配色应用实例剖析--橙色

网页设计配色应用实例剖析网页设计配色应用实例剖析 橙色系橙色系 1 橙橙色具有轻快 欢欣 收获 温馨 时尚的效果 是快乐 喜悦 能量的 色彩 在整个色谱里 橙色具有兴奋度 是最耀眼的色彩 给人以华贵而温暖 兴奋而热烈的感觉 也是令人振奋的颜色 具有健康 富有活力 勇敢自由等 象征意义 能给人有庄严 尊贵 神秘等感觉 橙色在空气中的穿透力仅次于 红色 也是容易造成视觉疲劳的颜色 在网页颜色里 橙色适用于视觉要求较高的时尚网站 属于注目 芳香的 颜色 也常被用于味觉较高的食品网站 是容易引起食欲的颜色 下面我们根据橙色系不同属性邻近色 同类色 对比色的搭配做不同的举 例分析 橙色橙色 橙色网页例图 橙色网页例图 http www wastelink co uk 橙色系分析 橙色系分析 主色调橙色 HSB 数值的 H 表示色相 显示的是 30 度 而 30 度正是橙色 显示特征最标准的颜色 正橙色 饱和度和亮度同时达到最高值 因此整个 页面的视觉刺激是极其耀眼强烈的 这里选取了三种面积相当又是整个页面使用得最少的颜色为点睛色 使页 面生动的同时又运用于导航位置 从而达到突出主题的效果 从 HSB 数值上 看它们的明度纯度相对较低 与明度纯度较高的背景正橙色形成鲜明的对比 通过范围较大的背景白色 前景图片灰白色和小细节前景白色文字制造出 明快气氛的同时 又呼应统一于整个页面 辅助色在这里是橙色与白色的过渡 色 结论 结论 饱和度与纯度很高特性明显的颜色 在达到视觉冲击力的同时 可适当采 用少许对比色调和缓和于视觉 从而削弱视觉的疲劳度 深橙红色系深橙红色系 深橙红色网页例图 深橙红色网页例图 http www matisserestaurant ca 深橙红色系分析 深橙红色系分析 从色相度中可以知道 0 度为正红色 30 度为正橙色 而主色调的 HSB 数 值 H 显示 22 度可知 该深橙红色是橙色基础上加入少许邻近色红色 整体上 降低了明度而得 因为红色本身较橙色明度低 因此这里橙红色的明度呈现出 较低状态 辅助色选取了明度相对于主色调更低的三种颜色 前面两种饱和度都较高 最后一种灰蓝色由于明度较高因此饱和度降低 是主色调与前面两种辅助色的 协调色 这个页面背景色运用了纹样 是以目前选取的主色调颜色和明度较暗的深 红色结合而得 使得明度稍暗 数值上看 主色调也就是背景色的饱和度较高 但是由于降低了明度 颜 色变得较沉稳 辅助色 RGB 数值显示 添加了适量的其他颜色 G 和 B 数值 区别不大 因此饱和度降低 颜色趋于柔和稳定 点睛色的加入和提亮 使页 面视觉效果得到强化 结论 结论 前景色通常要较明显的区别于背景色 达到台前的宣传目的 当饱和度较 低的前景色与背景色变化不明显时 形成的是另外一种柔和统一的效果 浅橙色同类色浅橙色同类色 浅橙色同类色网页例图 浅橙色同类色网页例图 http 浅橙色同类色分析 浅橙色同类色分析 从主色调和辅色调在 HSB 数值 H 显示的数值是 36 可以看出 该页面色 调是在同一种橙色的基础上只在明度上发生了变化 由于主要色调是浅橙色 明度越高饱和度越低 页面上减弱了饱和度较高的橙色特性 整个网页呈现出 柔和自然稍有些发灰的调子 该网页是在橙色这一个颜色上做不同明度黑白灰色阶的柔和变化 属于单 色调 配色非常的单纯 色阶平稳 同时存在着不够醒目的状态 白色在这里 是起到了拉开主色调和辅色调空间距离 增强辅色调橙色的特性 使整个稍许 有些发灰的页面明快了不少 但也由于白色属于非色彩 只在明度上呈最高数 值而无彩度 不能给页面带来彩度所具有的鲜活靓丽的感觉 另一方面却也呈 现出质朴的感受 结论 结论 前面我们提到过同类色是在同一色相中不同的明度颜色变化 因此这类颜 色相对其他类别颜色来说明净而单纯 配色上较容易达到协调统一 但也容易 显得单调 初看该页面配色协调舒服 但看多了的确有些单调乏味的感觉 这也是同 类色搭配的特性 同时由于运用了渐变色这一调和方法 该页面同时占有了前 面我们提到的 4 种色彩中的调和方法的 2 种 整个页面呈现出调和中的调和是 勿庸置疑的 但也同时显得有些单调 没有色彩亮点 橙色系邻近色 黄色橙色系邻近色 黄色 橙色 橙红色 橙色 橙红色 邻近色橙色网页例图 邻近色橙色网页例图 http 橙色系邻近色 黄色橙色系邻近色 黄色 橙色 橙红色 分析 橙色 橙红色 分析 虽然第一眼看上去似乎色调上变化很多 但该网页的色彩构成主要是由黄 色和橙色这两种邻近色构成的 通过不同的明度和纯度的变化而得到更为丰富 的色阶 它们是浅黄色 黄色 橙色 橙红通过不同的形状面积 位置变化而 得 从 HSB 数值中的 H 可以看出属于暖色范畴 三个色相的倾向不是很明显 以至于色彩呈现较规律 缓和 由于不同数值的明度表达 纯度也做出了不同 的数值变化 浅色在这里主要起到更调和主色调和点睛色的色彩过渡作用 点睛色在这 里起到强调整个页面的华丽感 增强整个页面彩度的作用 结论 结论 橙色与邻近色黄 红暖色调的搭配组合 这是一种简单又安全的方法 视 觉韵律上处理得井然有序 整个页面看起来艳泽华丽 新鲜充满活力的感觉 符合 Tide 这一主题所要表达的目的 橙色系对比色 橙色 蓝色 橙色系对比色 橙色 蓝色 对比色橙红色应用网页例图 对比色橙红色应用网页例图 ar 橙色系对比色 橙色 蓝色 分析橙色系对比色 橙色 蓝色 分析 HSB 数值中的 H 色相显示主色调橙红色为 26 我们知道正红色的 H 为 0 正橙 H 为 30 主色调橙红色是往 0 偏移而得 正蓝色是 240 而该点睛 色蓝色为 192 往绿度偏移 在 RGB 中的数值 G160 也能看出来 因此蓝色 的特性不是很强 但由于橙红色的明度饱和度达到最高值 因此尽管蓝色不是 正蓝 但它的特性得到了很大程度的发挥 此种橙蓝对比色中的蓝色调配 比较少见 让人很容易记住它 而橙红色 的饱和度明度都非常高 刺激度强 属于让人不可久视的颜色 介于橙红色和蓝色之间 与蓝色面积相当的白色 起到调和对比色橙红与 蓝色之间关系的作用 结论 结论 这组对比色通过使用的面积位置的不同来反映主次之间的关系 对比色能 相互强烈的突出色彩特性 这组对比色属于是非常能突显个性的颜色 橙色系低对比度 橙色橙色系低对比度 橙色 绿色 绿色 橙色低对比应用网页例图 橙色低对比应用网页例图 http 橙色系低对比度 橙色橙色系低对比度 橙色 绿色 分析 绿色 分析 如果不看数值参数 刚一开始看会以为这是一组纯度较低的颜色 HSB 数 值 H 显示主色调为正橙色 而黄绿色的明度较低且色相倾向不够明确 加之背 景有少许的暗橙色纹样 整个页面没有高亮度白色点缀衬托 使得纯度的彩度 不够确切 就很容易造成了该页面纯度较低的错觉 整个页面最亮的颜色除了 书本 最亮色浅黄色外 就是点睛色黄色了 我 们知道黄色是所有彩度色中明度最高的颜色 不同明度纯度的黄色系让整个页 面明亮了不少 它是整个页面明度色阶的最高调 黄绿色的出现 让本只有邻近色的橙色系列多了些内容 页面配色丰富不 少 视觉节奏多了些变化 结论 结论 这类颜色的组合随着不同色阶明度的变暗 整个页面没有白色衬托 制造 出另外一种古典的环境氛围 有如娓娓道来的故事场景 也是一种不错的主题 配色方法 本页面的配色设计亮点是 无白色设计 橙色系高纯度高对比度 橙红色橙色系高纯度高对比度 橙红色 绿色 绿色 橙色高纯度对比应用网页例图 橙色高纯度对比应用网页例图 橙色系高纯度高对比度 橙红色橙色系高纯度高对比度 橙红色 绿色 分析 绿色 分析 与上组的橙色绿色相比 这组颜色强烈而刺激 色彩倾向无疑明确了很多 主色调橙红色往红色倾向 而红色的对比色是绿色 因此整组颜色有强烈的 对比效果 从 HSB 数值 H 上看 除了蓝色外 其余几种颜色纯度都非常高 加上又是近于红绿对比色 页面的刺激强度是可想而知的强烈 黄色是中间色 起到过渡对比色作用 在这组色里属于调和色 蓝色出现 在产品图案上 引导主次关系 增强视觉的注目点 结论 结论 橙色是注目容易引起食欲的颜色 在这里得到了较充分的应用 非色彩的白色和黑色在这里起到了非常重要的作用 拉大了色彩色阶空间 的距离 白色让整个色调组合更加明快 而黑色增添色彩的厚重质感 强烈 中的强烈 增强对产品的视觉刺激 本部分小节 本部分小节 橙色在 HSB 数值的 H 中为 30 度 是正橙色 橙色是一个非常响亮注 目的颜色 橙色的对比色是蓝色 当这两种颜色彩度倾向越明确 对比强度就 越大 但我们也看到 除了正宗的对比色橙蓝色外 橙色和绿色随着纯度的升 高 达到的对比效果也很强烈 在今后的配色设计中可以多些不同明度纯度冷暖对比的尝试 会有意想不 到的收获 白色是所有网页设计中属于较通用的颜色 它容易突出彩度的特性 明 快于整个页面 当一个页面设计没有使用白色时 空间感觉减弱 容易造成彩 度不够明确 页面有些