网页颜色搭配表（UI设计的颜色搭配方式！）

本文目录

• UI设计的颜色搭配方式！
• 颜色搭配色系表
• 色彩搭配——关于UI颜色选择的6个技巧
• 颜色搭配口诀表
• 网页文字颜色的搭配有什么技巧
• 十二种颜色搭配口诀表
• Ps在制作网页时需要使用什么颜色

UI设计的颜色搭配方式！

色彩作为视觉传达中非常重要的要素在UI设计中具有非常重要的作用，一个好的UI色彩提案可以起到：

1）显示界面的整体架构

2）明确视觉层级关系

3）营造界面整体风格，甚至增加转化

UI色彩搭配方案

单色搭配

基于一种颜色，以色调和饱和度区分层次。

单色永远是一个经典且安全的配色方案。

相邻颜色搭配

选择色轮上相邻的颜色。

这种类型的配色方案用于不需要对比度的设计，包括web或banner的背景。

高对比搭配

选择色轮上对立面的颜色混合，提高对比度。

例如：蓝色背景上的橙色按钮非常吸睛。

协调对比搭配

这个方案与上一个方案类似，但是它采用了更多的颜色。

例如：如果选择蓝色，则需要取其对立面中，相邻的2个其他颜色（即黄色和红色）。

这里的对比度不如【高对比方案】那么强烈，但它允许使用多种颜色。

三色搭配

当设计需要更多的颜色时，可以尝试三色方案。

为了画面的平衡，建议使用一种颜色作为主导，另一种作为辅助。

想学习更多UI设计相关知识，从软件开始，附赠教程点击（UI设计）获取

颜色搭配色系表

颜色搭配色系表

颜色搭配色系表，颜色搭配是一门很深的学问，生活的很多方面都涉及到了颜色的搭配，很多时候根据不同色系的之间的搭配会有不同的视觉感受，下面是颜色搭配色系表。

颜色搭配色系表1

色彩搭配，总有一个主次之分，主色调不同，与之搭配的颜色也会不同：

主色——淡色

白色搭配色：黑色和所有深色以及鲜艳的色彩

浅米色：黑色 红色 褐色 绿色

浅灰色：褐色 深绿色 深灰色 红色

天蓝色：褐色 深绿色 紫红色 紫色 米色

粉色：米色 紫色 藏青色 灰色

浅黄色：黑色 藏青色 褐色 灰色

浅紫色：深紫色 褐色 藏青色

浅绿色：深绿色 红色

主色——深色

黑色 搭配色：米色 白色 棕黄色 天蓝色 粉色

褐色：白色 米色 黑色 橙红 橙黄 深绿色

深灰色：米色 黑色 (所有浅色和艳色)

藏青色：白色 柠檬黄 绿松色 紫红 鲜绿 紫

深绿色：天蓝色 白色 米色 鲜红色 浅黄色

深紫色：天蓝色

深红色：黑色 天蓝色 米色

主色——鲜艳色

蓝色(泛紫) 搭配色：黑色 白色 鲜绿

绿松色(蓝色泛绿)：白色 棕黄 藏青色

绿色(偏蓝)：藏青色 黑色 白色

绿色(偏黄)：米色 白色 棕黄色

金黄色：白色 黑色 褐色

柠檬黄 ：黑色 白色 藏青色 深绿 淡粉 橙色

橙色：白色 柠檬色 黑色 深绿色

紫红色：藏青色 白色

鲜红色(朱红)：褐色 白色

紫色：褐色 白色 天蓝色 粉色 绿松色

颜色搭配色系表2

1、红色配白色、黑色、蓝灰色、米色、灰色。

2、粉红色配紫红、黑色、灰色、墨绿色、白色、米色、褐色、海军蓝。

3、橘色配白色、黑色、蓝色。

4、黄色配紫色、蓝色、白色、咖啡色、黑色。

5、咖啡色配米色、鹅黄、砖红、蓝绿色、黑色。

6、绿色配白色、米色、黑色、暗紫色、灰褐色、灰棕色。

7、墨绿色配粉红色、浅紫色、杏黄色、暗紫红色、蓝绿色。

8、蓝色配白色、粉蓝色、酱红色、金色、银色、橄绿、橙色、黄色。

9、浅蓝色配白色、酱红色、浅灰、浅紫、灰蓝色、粉红色。

10、紫色配浅粉色、灰蓝色、黄绿色、白色、紫红色、银灰色、黑色。

11、紫红色配蓝色、粉红色、白色、黑色、紫色、墨绿色。

“色彩搭配”是指对色彩进行搭配，可以取得更好的视觉效果。“色彩搭配”咨询这一理念在20世纪末才开始传入中国，对于大多数中国人只敢穿黑、白、灰、蓝来说，这无疑是个很大的惊喜。

十年来，“色彩搭配”咨询已经风靡了中国的大江南北，对于人们的穿衣打扮指导，促进商业企业的新型营销，提高城市与建筑的色彩规划水平，改善全社会的视觉环境都起到了重要的推动作用。

色彩的’基本原理：卖场的色彩变化规律，是建立在色彩基本原理的基础上的，只有扎实的掌握色彩的基本原理才能根据卖场的特殊规律灵活运用。A、色彩的相关名词及解释三原色、色相、明度、纯度三原色：指红、黄、蓝三色、是色彩的最基本单位，三色互相混合后分别产生橙、绿、紫、三个二次色、三色等量混合后变成黑色。色相：反映色彩相貌的名称。如红、橙、黄、绿、蓝、靛、紫等明度：指色彩的明亮程度。就是色彩的深浅度。如白色比黑色浅。明度就是高，大红和天蓝相比较。天蓝色比大红色明度就要高。纯度：指勾通析纯净程度，纯度越高色彩就越纯。

颜色搭配色系表3

颜色搭配表怎么看

1、基色(三原色)

三原色：红绿蓝，其他颜色可以通过三原色按不同比例得到。

2、色环

熟悉基本的颜色，使你在PPT设计中可以快速的使用各种颜色。

3、次生色

次生色是混合任何两种邻近的基色(即红绿蓝)获得的三种颜(即青、品红和黄)。

4、相似色

相似色是指给定颜色左右两边的颜色，例如红色的次生色是橙红和紫红色。使用相似色的配色可以使整个PPT画面有层次感，更加协调。

5、互补色即对比色

互补色在色环上相互正对，在你需要突出某重要内容时，可以使用对比色进行强调。

颜色搭配表搭配原理

1、同类色搭配

指深浅、明暗不同的两种同一类颜色相配。比如：青配天蓝、墨绿配浅绿、咖啡配米色、深红配浅红等，同类色搭配显得柔和文雅。

2、近似色搭配

指两个比较接近的颜色相配，如：红色与橙红或紫红相配，*与草绿色或橙*相配等。

3、强烈色配合

指两个相隔较远的颜色相配，如：*与紫色，红色与青绿色，这种配色比较强烈。

4、补色配合

指两个相对的颜色相配，如：红与绿、青与橙、黑与白等，补色相配能形成鲜明的对比，有时会收到较好的效果，黑白搭配是永远的经典。

色彩搭配——关于UI颜色选择的6个技巧

用户体验设计涉及许多流程，需要仔细深入地思考才能使界面满足目标受众的需求。即使看起来不太复杂，每一步都需要对细节的深入关注。

颜色选择是用户界面创建过程中一个耗时的重要阶段。设计师有时需要花几个小时选择正确的颜色。在本文中，我们将介绍六个有用的技巧，帮助设计师为UI选择强有力的颜色，并使此过程更轻松，更高效。
这种规则或技术来自室内设计，因此常用于房屋装饰。这个想法很简单。为了使构图达到平衡，颜色应该以60％-30％-10％的比例组合。最大的比重应该是主色调，次要颜色占三分之一，剩余10％的颜色用于帮助强调和点缀。

这样的比例被认为是可以令人眼感到愉悦的，因为它能够使用户逐渐感知所有的视觉元素。了解了适当的颜色比例，设计师可以成功地将颜色搭配起来，而不会产生使界面多彩混乱的风险。

色彩对比是任何视觉构图的关键部分。它为每个UI元素带来了独立性，并使所有这些元素都引人注目。仅明暗度不同的相同色系颜色的用户界面很难吸引用户的注意。而且，在这个UI中复制内容看起来难以辨认，这使得与产品的交互几乎不可能。

设计师根据它应该完成的目标来控制对比度的等级。例如，如果您需要用户特别注意特定的用户界面元素，最好使用两种高对比度的颜色，例如蓝色和红色。CTA按钮（Call to Action用户行为号召）设计通常使用高对比度的颜色设计。

但是，从UI的整体构成来说，高水平的色彩对比可能并不总是奏效。如果复制内容和背景颜色对比太强烈，则很难阅读或扫描文本。这就是为什么设计师被建议创造一个温和的对比度等级，并应用高对比度的颜色来突出显示元素。各种设备上的用户测试可帮助设计人员确保其解决方案的有效性。

正如我们在前文提到的，心理学是帮助设计工作流程的基础研究之一。有一种心理学分支表明颜色对人类情绪和行为的影响，称为色彩心理学。它表明我们的大脑对颜色有反应，而我们通常不会注意到它。当人眼看到一种颜色时，我们的大脑向内分泌系统发出信号，释放对心情和情感负责的激素。

每种颜色对我们的想法都有其自身的影响，并且可能的反应可以帮助设计师传递正确的信息并呼吁用户做出预期的行动。以下是颜色含义的简短列表。

它同时具有好与坏的象征，象征着爱情，自信，激情和愤怒等。

充满活力和温暖的色彩带来兴奋的感觉。

这是幸福，阳光，欢乐和温暖的颜色。

自然的色彩带来平静和焕然新生的感觉。

它通常代表一些企业形象，也可能与距离和悲伤有关。

长期与皇室和财富有关。这也是一种神秘和魔力的颜色。

它与悲剧和死亡联系在一起，意味着神秘。它可以同时是传统的和现代的。

颜色意味着纯洁无瑕，以及整体性和清晰度。

另外，设计师需要记住，视觉感受对每个人来说都是非常独特的。年龄和性别等因素对色彩偏好有很大影响，因此了解目标受众的特征至关重要。您可以在我们之前的文章中找到颜色含义和偏好的详细说明。

每种文化都有自己的传统和信仰，所以在选择颜色之前，你需要确保它们会被解读成你想表达的含义。事实是有时一种颜色在不同国家可能有完全相反的意思。例如，在欧洲国家，白色代表纯度，常用于婚礼，而在许多亚洲国家，这种颜色意味着死亡和悲伤。错误的使用可能会导致对产品可能致命的误解。通过承认文化色彩感知的特点，设计师可以减少被误解的风险。
和谐是UI设计努力的目标。为了让用户感到高兴和舒适，设计人员尝试将平衡带入用户界面设计。色彩和谐是关于设计中色彩以最有吸引力和最有效的方式用于用户感知的方式。和谐的颜色有助于网站或应用程序获得良好的第一印象。

经过多年的搜索，设计师们区分了有效运作的基本配色方案。让我们看看他们是什么。

色彩和谐基于一种颜色的各种色调和明暗关系。

该方案应用在色轮上彼此相邻的颜色。

它是在色轮上彼此相对放置的颜色混合，旨在产生高对比度。

这个方案与前一个方案类似，但是它采用了更多的颜色。例如，如果您选择蓝色，则需要取两个与其补色相邻的其他颜色，例如黄色和红色。

它基于色轮上等距的三种不同颜色。专业人士建议使用一种颜色作为主导色，其他作为点缀色。

四色配色方案采用了四种互补配对的色轮颜色。如果连接所选颜色的点，它们将形成矩形。

大自然母亲是世界上最好的艺术家和设计师。我们在自然环境中看到的色彩组合总是接近完美。人们喜欢看日落和黎明，秋天的森林和冬天的山脉，因为它们充满了自然的色彩组合。

那么，你为什么不尝试借用一些想法呢？去散散步或搜索美丽的大自然的照片，你一定会找到灵感。
数码产品的成功在很大程度上取决于用户界面的颜色。正确的颜色会使用户在产品的使用中感到舒适。仅仅通过使用适当的颜色，设计师可以将人们置于思维的框架中以驱使他们采取相应的行动。所以在设计中，请明智地做出你的选择。
***隐藏网址***

本文翻译来自Medium感谢 Tubik Studio

原文链接

颜色搭配口诀表

颜色搭配口诀表
颜色搭配口诀表具体如下：
1、红靠黄，亮晃晃。
2、要想精，加点青。
3、青间紫，不如死。
4、红要红得鲜，绿要绿得娇，白要白得净。
5、青紫不并列，黄白不随肩。
6、红搭绿，一块玉。
7、红间黄，喜煞娘。
8、紫是骨头绿是筋，配上红更新。
9、黄马紫鞍配，红马绿鞍配。
10、黄身紫花，绿眉红嘴，显得鲜明。
11、红离了绿不显，紫离了黄不显。
12、光有大红大绿不算好，黄能托色少不了。
13、艳不俗，淡适宜。
14、色多不繁，色少不散。
15、草绿披粉而和，藤黄加赭而老。
16、紫多发恶红主新，多了多主淡，绿色多了也不新，上样三色均可用，唯有紫少画真新。
17、断国孝，三蓝墨。
18、红红绿绿，图个吉利。
19、女红、妇黄、寡青、老褐。
20、头色不过四，身色勿过三。

网页文字颜色的搭配有什么技巧

对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景，但是，浏览一下大型的商业网站，你会发现他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅，大方和温馨。更重要的是，这样可以大大加快浏览者打开网页的速度。
　　一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜色。下面是我做网页和浏览别人的网页时，对网页背景色和文字色彩搭配积累的经验，这些颜色可以做正文的底色，也可以做标题的底色，再搭配不同的字体，一定会有不错的效果，希望对大家在制作网页时有用。
　　Bgcolor:″＃F1FAFA″——做正文的背景色好，淡雅
　　Bgcolor:″＃E8FFE8″——做标题的背景色较好，与上面的颜色搭配很协调
　　Bgcolor:″＃E8E8FF″——做正文的背景色较好，文字颜色配黑色
　　Bgcolor:″＃8080C0″——上配黄色白色文字较好
　　Bgcolor:″＃E8D098″——上配浅蓝色或蓝色文字较好
　　Bgcolor:″＃EFEFDA″——上配浅蓝色或红色文字较好
　　Bgcolor:″＃F2F1D7″——配黑色文字素雅，如果是红色则显得醒目
　　Bgcolor:″＃336699″——配白色文字好看些
　　Bgcolor:″＃6699CC″——配白色文字好看些，可以做标题
　　Bgcolor:″＃66CCCC″——配白色文字好看些，可以做标题
　　Bgcolor:″＃B45B3E″——配白色文字好看些，可以做标题
　　Bgcolor:″＃479AC7″——配白色文字好看些，可以做标题
　　Bgcolor:″＃00B271″——配白色文字好看些，可以做标题
　　Bgcolor:″＃FBFBEA″——配黑色文字比较好看，一般作为正文
　　Bgcolor:″＃D5F3F4″——配黑色文字比较好看，一般作为正文
　　Bgcolor:″＃D7FFF0″——配黑色文字比较好看，一般作为正文
　　Bgcolor:″＃F0DAD2″——配黑色文字比较好看，一般作为正文
　　Bgcolor:″＃DDF3FF″——配黑色文字比较好看，一般作为正文
　　浅绿色底配黑色文字，或白色底配蓝色文字都很醒目，但前者突出背景，后者突出文字。红色底配白色文字，比较深的底色配黄色文字显得非常有效果。
以上配色方案仅供参考。

十二种颜色搭配口诀表

十二种颜色搭配口诀表如下：
1. 红色搭配：白色、黑色、蓝灰色、米色、灰色。
2. 粉红色搭配：紫红色、黑色、蓝色。
3. 橘色搭配：白色、黑色、蓝色。
4. 黄色搭配：紫色、蓝色、白色、咖啡色、黑色。
5. 咖啡色搭配：米色、砖红、黑色。
6. 绿色搭配：白色、米色、黑色、暗紫色、灰棕色。
7. 蓝色搭配：白色、灰蓝色、粉红色。
8. 紫色搭配：浅粉色、灰蓝色、白色。
在实际搭配中，还需考虑每个人的肤色、体型以及个人喜好，请根据实际情况灵活运用。

Ps在制作网页时需要使用什么颜色

配色方案：
1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。
2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。
3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。当然，对比色调如果用得不好，会适得其反，产生俗气、刺眼的不良效果。这就要把握“大调和，小对比”这一个重要原则，即总体的色调应该是统一和谐的，局部的地方可以有一些小的强烈对比。
最后，还要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是“高调”和“低调”。底色浅的称为高调；底色深的称为低调。底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。这种深浅的变化在色彩学中称为“明度变化”。有些主页，底色是黑的，但文字也选用了较深的色彩，由于色彩的明度比较接近，读者在阅览时，眼睛就会感觉很吃力，影响了阅读效果。当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。
网页色彩的搭配
网页的色彩是树立网站形象的关键之一，色彩搭配却是网友们感到头疼的问题。网页的背景，文字，图标，边框，超链接...，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵呢？阿捷这里谈一些心得，希望对你有所启发。
首先我们先来了解一些色彩的基本知识：
1.颜色是因为光的折射而产生的。
2.红，黄，蓝是三原色，其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如：红色是color (255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF), 我们经常看到的"bgColor=#FFFFFF"就是指背景色为白色。
3.颜色分非彩色和彩色两类。非彩色是指黑，白，灰系统色。彩色是指除了非彩色以外的所有色彩。
4.任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。
网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。
我们通常的做法是：主要内容文字用非彩色(黑色)，边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。
●非彩色的搭配
黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。 灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。
●彩色的搭配
色彩千变万化，彩色的搭配是我们研究的重点。我们依然需要进一步学习一些色彩的知识。
一.色环。我们将色彩按"红-》黄-》绿-》蓝-》红"依次过度渐变，就可以得到一个色彩环。色环的两端是暖色和寒色，当中是中型色。(如下图)
红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红
|___________| |____| |_________| |_________| | | | |
暖色系 中性系 寒色系 中性系
二.色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。
红色---是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。
绿色---介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。 它和金黄，淡白搭配，可以产生优雅，舒适的气氛。
橙色---也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。
黄色---具有快乐，希望，智慧和轻快的个性，它的明度最高。
蓝色---是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛(象天空的色彩:)
白色---具有洁白，明快，纯真，清洁的感受。
黑色---具有深沉，神秘，寂静，悲哀，压抑的感受。
灰色---具有中庸，平凡，温和，谦让，中立和高雅的感觉。
每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。
●网页色彩搭配的原理
1.色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。
2.色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。(参考设计思考第二篇网站CI的标准色彩一节)
3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。
4.色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。
●网页色彩掌握的过程
随着网页制作经验的积累，我们用色有这样的一个趋势:单色-》五彩缤纷-》标准色-》单色。一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一；在有一定基础和材料后，希望制作一个漂亮的网页，将自己收集的最好的图片，最满意色彩堆砌在页面上；但是时间一长，却发现色彩杂乱，没有个性和风格；第三次重新定位自己的网站，选择好切合自己的色彩，推出的站点往往比较成功；当最后设计理念和技术达到顶峰时，则又返朴归真，用单一色彩甚至非彩色就可以设计出简洁精美的站点。
○网页色彩搭配的技巧
文章写到这里，有心急的网友要问了：“到底用什么色彩搭配好看呢？你能不能推荐几种配色方案？”别急，这里有一点技巧，可以帮助你迅速成为调色大师:)
1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将 色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。
2.用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。
3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中选择"自定义"，然后在"色库"中选就可以了:)
4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。